---
title: Marca
description: "Configura logos, favicons, navegación y pie de página de tu documentación. Variantes claro/oscuro, colores e iconos de enlaces externos."
---

La marca controla los elementos visuales que los lectores ven primero: logos, favicons y enlaces de navegación. Todo es compatible con variantes de modo claro/oscuro.

## Logo

Añade tu logo al encabezado de navegación:

```json
{
  "logo": {
    "light": "/images/logo-light.webp",
    "dark": "/images/logo-dark.webp",
    "href": "https://yourcompany.com"
  }
}
```

| Campo | Descripción |
|-------|-------------|
| `light` | Logo para modo claro (logo oscuro sobre fondo claro) |
| `dark` | Logo para modo oscuro (logo claro sobre fondo oscuro) |
| `href` | Destino al hacer clic en el logo |

<Tip>
Usa logos SVG para una visualización nítida en cualquier tamaño. Si solo tienes un logo, úsalo tanto para `light` como para `dark`.
</Tip>

### Dimensiones del logo

Los logos se muestran con un ancho máximo de 120 px. Para mejores resultados:
- Ancho: 120-240 px
- Alto: 30-40 px
- Formato: SVG preferido

## Favicon

Añade un icono para la pestaña del navegador:

```json
{
  "favicon": "/images/favicon.svg"
}
```

Formatos compatibles: SVG, PNG, ICO

<Note>
¡Los favicons SVG son compatibles con el modo oscuro! El navegador usará los colores del sistema si utilizas `currentColor` en el SVG.
</Note>

## Nombre del sitio

El campo `name` aparece en las pestañas del navegador y en los resultados de búsqueda:

```json
{
  "name": "Acme Docs",
  "description": "Documentation for the Acme API"
}
```

## Enlaces de navegación

Añade enlaces a tu barra de navegación:

```json
{
  "navbar": {
    "links": [
      { "label": "Blog", "href": "https://yourcompany.com/blog" },
      { "label": "Pricing", "href": "https://yourcompany.com/pricing" }
    ],
    "primary": {
      "type": "button",
      "label": "Get Started",
      "href": "https://app.yourcompany.com/signup"
    }
  }
}
```

### Opciones de enlace

| Campo | Tipo | Descripción |
|-------|------|-------------|
| `label` | string | Texto de visualización |
| `href` | string | URL (externa o interna) |

### Botón principal

El campo `primary` crea un botón de llamada a la acción destacado:

```json
{
  "primary": {
    "type": "button",
    "label": "Dashboard",
    "href": "https://app.yourcompany.com"
  }
}
```

## Pie de página

Añade enlaces sociales y columnas de enlaces personalizadas al pie de página de tu documentación.

### Enlaces sociales

Muestra iconos de redes sociales al pie de cada página:

```json
{
  "footer": {
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany",
      "discord": "https://discord.gg/yourserver",
      "linkedin": "https://linkedin.com/company/yourcompany"
    }
  }
}
```

#### Plataformas compatibles

| Plataforma | Clave | Descripción |
|----------|-----|-------------|
| GitHub | `github` | Enlace a tu organización o repositorio de GitHub |
| X (Twitter) | `x` o `twitter` | Enlace a tu perfil de X/Twitter |
| LinkedIn | `linkedin` | Enlace a la página de LinkedIn de tu empresa |
| Discord | `discord` | Enlace a tu servidor de Discord |
| Slack | `slack` | Enlace a tu comunidad de Slack |
| YouTube | `youtube` | Enlace a tu canal de YouTube |
| Instagram | `instagram` | Enlace a tu perfil de Instagram |
| Facebook | `facebook` | Enlace a tu página de Facebook |
| Reddit | `reddit` | Enlace a tu subreddit |
| Telegram | `telegram` | Enlace a tu canal de Telegram |
| Bluesky | `bluesky` | Enlace a tu perfil de Bluesky |
| Threads | `threads` | Enlace a tu perfil de Threads |
| Medium | `medium` | Enlace a tu publicación de Medium |
| Hacker News | `hacker-news` | Enlace a tu perfil de Hacker News |
| Website | `website` | Enlace a tu sitio web principal |

<Tip>
Los iconos se muestran en un orden consistente independientemente de cómo los definas en tu configuración. GitHub y X/Twitter aparecen primero, seguidos de las demás plataformas.
</Tip>

### Columnas de enlaces

Añade grupos de enlaces organizados encima de tus iconos sociales:

```json
{
  "footer": {
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://yourcompany.com/blog" },
          { "label": "Changelog", "href": "/changelog" }
        ]
      },
      {
        "header": "Company",
        "items": [
          { "label": "About", "href": "https://yourcompany.com/about" },
          { "label": "Careers", "href": "https://yourcompany.com/careers" }
        ]
      }
    ],
    "socials": {
      "github": "https://github.com/yourcompany",
      "x": "https://x.com/yourcompany"
    }
  }
}
```

| Campo | Tipo | Descripción |
|-------|------|-------------|
| `links` | array | Array de objetos de columna de enlaces |
| `links[].header` | string | Encabezado de columna (opcional) |
| `links[].items` | array | Enlaces en la columna |
| `links[].items[].label` | string | Texto de visualización del enlace |
| `links[].items[].href` | string | URL (rutas internas o URLs externas) |

<Note>
Los enlaces externos (que comienzan con `http`) se abren en una nueva pestaña automáticamente. Los enlaces internos navegan dentro de tu documentación.
</Note>

### Ocultar el pie de página en páginas específicas

Usa el frontmatter para ocultar el pie de página en páginas individuales:

```yaml
---
title: Landing Page
hideFooter: true
---
```

Esto es útil para páginas de destino personalizadas o páginas donde el pie de página podría resultar distractor.

## Marca de Jamdesk

De forma predeterminada, aparece un enlace "Powered by Jamdesk" en el pie de página de tus páginas de documentación. Esto ayuda a difundir Jamdesk manteniendo un aspecto profesional en tu documentación.

### Ocultar la marca

Para eliminar la marca de Jamdesk:

1. Ve a **Configuración** en tu Jamdesk dashboard
2. Encuentra la sección **Configuración de build**
3. Desactiva **Mostrar marca de Jamdesk**
4. Activa un nuevo build

<Note>
El control de marca está disponible en todos los planes. Los cambios requieren un rebuild para surtir efecto.
</Note>

## Ejemplo completo de marca

Aquí tienes una configuración de marca completa:

```json
{
  "name": "Acme Documentation",
  "description": "Build amazing products with Acme",
  "theme": "jam",
  "colors": {
    "primary": "#6366F1",
    "light": "#818CF8",
    "dark": "#4F46E5"
  },
  "favicon": "/images/favicon.svg",
  "logo": {
    "light": "/images/logo-dark.webp",
    "dark": "/images/logo-light.webp",
    "href": "https://acme.com"
  },
  "navbar": {
    "links": [
      { "label": "API", "href": "/api/overview" },
      { "label": "Blog", "href": "https://acme.com/blog" }
    ],
    "primary": {
      "type": "button",
      "label": "Sign Up",
      "href": "https://app.acme.com/signup"
    }
  },
  "footer": {
    "socials": {
      "github": "https://github.com/acme",
      "x": "https://x.com/acme",
      "discord": "https://discord.gg/acme"
    },
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://acme.com/blog" },
          { "label": "Status", "href": "https://status.acme.com" }
        ]
      }
    ]
  }
}
```

## Dominio personalizado

Añade tu dominio en el Jamdesk dashboard:

1. Ve a **Configuración** → **Dominios**
2. Añade tu dominio (por ejemplo, `docs.yourcompany.com`)
3. Configura el DNS según se indica
4. Espera la verificación

Tu documentación estará accesible en tu dominio personalizado con SSL automático.

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Temas" icon="palette" href="/es/customization/theming">
    Personaliza colores y tipografía
  </Card>
  <Card title="Optimización SEO" icon="magnifying-glass-chart" href="/es/content/seo">
    Mejora los metadatos de búsqueda y las previsualizaciones
  </Card>
</Columns>