---
title: Branding
description: "Konfigurieren Sie Logos, Favicons, Navigationslinks und Footer-Inhalte für Ihre Dokumentationsseite – mit hellen/dunklen Varianten, Farben und externen Link-Icons."
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

{/*
  ANCHOR STABILITY: The "Favicon", "Site Name", "Description", and "Logo"
  heading anchors on this page are baked into suggestion links stored in
  Firestore build records (builder/build-service/lib/config-suggestions.ts
  and its CLI twin). Renaming these headings dead-links every previously
  stored suggestion — don't rename without updating both twins and accepting
  stale links in historical builds.
*/}

Branding steuert die visuellen Elemente, die Leser zuerst sehen: Logos, Favicons und Navigationslinks. Alles unterstützt Varianten für den hellen und dunklen Modus.

## Logo

Fügen Sie Ihr Logo zum Navigationsheader hinzu:

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

| Feld | Beschreibung |
|-------|-------------|
| `light` | Logo für den hellen Modus (dunkles Logo auf hellem Hintergrund) |
| `dark` | Logo für den dunklen Modus (helles Logo auf dunklem Hintergrund) |
| `href` | Ziel, zu dem die Navigation beim Klicken auf das Logo führt |

<Tip>
Verwenden Sie SVG-Logos für eine gestochen scharfe Darstellung bei jeder Größe. Wenn Sie nur ein Logo haben, verwenden Sie es für `light` und `dark`.
</Tip>

### Abmessungen des Logos

Logos werden mit einer maximalen Breite von 120 px angezeigt. Für optimale Ergebnisse:
- Breite: 120–240 px
- Höhe: 30–40 px
- Format: SVG bevorzugt

## Favicon

Ein Bild für beide Modi:

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

Oder eine separate Variante für jeden Modus:

```json
{
  "favicon": {
    "light": "/images/favicon.svg",
    "dark": "/images/favicon-dark.svg"
  }
}
```

Das Favicon `light` wird im hellen Modus angezeigt, `dark` im dunklen Modus. `dark` ist optional. Wenn es nicht angegeben wird, wird `light` in beiden Modi verwendet. Jamdesk erzeugt ein `<link rel="icon">` für das primäre Favicon sowie einen zweiten Link mit `media="(prefers-color-scheme: dark)"` für die dunkle Variante.

Unterstützte Formate: SVG, PNG, ICO.

<Note>
Wenn Sie ein einzelnes Asset bevorzugen, passt sich ein SVG, das `currentColor` für seine Konturen und Füllungen verwendet, ebenfalls automatisch an: Der Browser ersetzt die aktive Vordergrundfarbe.
</Note>

## Name der Website

Das Feld `name` wird in Browser-Tabs und Suchergebnissen angezeigt:

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

Kombinieren Sie es mit einer [`description`](#beschreibung), damit Suchergebnisse und Link-Vorschauen echten Text statt eines generischen Fallbacks anzeigen.

## Beschreibung

Das Feld `description` ist die standardmäßige SEO-Zusammenfassung Ihrer Website. Suchmaschinen zeigen sie unter dem Titel Ihrer Website an, und soziale Plattformen verwenden sie für Link-Vorschauen:

```json
{
  "description": "Build, ship, and scale documentation with the Acme platform."
}
```

Streben Sie 50–160 Zeichen an, die für Leser formuliert sind, die entscheiden, ob sie klicken. Seiten mit eigenem `description`-Frontmatter verwenden diesen Wert; die Website-Beschreibung gilt für alle anderen Seiten.

## Navigationslinks

Fügen Sie Links zu Ihrer Navbar hinzu:

```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"
    }
  }
}
```

### Linkoptionen

| Feld | Typ | Beschreibung |
|-------|------|-------------|
| `label` | string | Angezeigter Text |
| `href` | string | URL (extern oder intern) |

### Primärer Button

Das Feld `primary` erstellt einen hervorgehobenen Call-to-Action-Button:

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

## Footer

Fügen Sie Social-Links und benutzerdefinierte Linkspalten zum Footer Ihrer Dokumentation hinzu.

### Social-Links

Zeigen Sie unten auf jeder Seite Symbole für soziale Medien an:

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

#### Unterstützte Plattformen

| Plattform | Schlüssel | Beschreibung |
|----------|-----|-------------|
| GitHub | `github` | Link zu Ihrer GitHub-Organisation oder Ihrem Repository |
| X (Twitter) | `x` oder `twitter` | Link zu Ihrem X-/Twitter-Profil |
| LinkedIn | `linkedin` | Link zu Ihrer LinkedIn-Unternehmensseite |
| Discord | `discord` | Link zu Ihrem Discord-Server |
| Slack | `slack` | Link zu Ihrer Slack-Community |
| YouTube | `youtube` | Link zu Ihrem YouTube-Kanal |
| Instagram | `instagram` | Link zu Ihrem Instagram-Profil |
| Facebook | `facebook` | Link zu Ihrer Facebook-Seite |
| Reddit | `reddit` | Link zu Ihrem Subreddit |
| Telegram | `telegram` | Link zu Ihrem Telegram-Kanal |
| Bluesky | `bluesky` | Link zu Ihrem Bluesky-Profil |
| Threads | `threads` | Link zu Ihrem Threads-Profil |
| Medium | `medium` | Link zu Ihrer Medium-Publikation |
| Hacker News | `hacker-news` | Link zu Ihrem Hacker-News-Profil |
| Website | `website` | Link zu Ihrer Hauptwebsite |

<Tip>
Die Symbole werden unabhängig davon, wie Sie sie in Ihrer Konfiguration definieren, in einer einheitlichen Reihenfolge angezeigt. GitHub und X/Twitter erscheinen zuerst, gefolgt von den anderen Plattformen.
</Tip>

### Linkspalten

Fügen Sie über Ihren Social-Symbolen organisierte Linkgruppen hinzu:

```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"
    }
  }
}
```

| Feld | Typ | Beschreibung |
|-------|------|-------------|
| `links` | array | Array mit Linkspaltenobjekten |
| `links[].header` | string | Spaltenüberschrift (optional) |
| `links[].items` | array | Links in der Spalte |
| `links[].items[].label` | string | Angezeigter Text für den Link |
| `links[].items[].href` | string | URL (interne Pfade oder externe URLs) |

<Note>
Externe Links (beginnend mit `http`) werden automatisch in einem neuen Tab geöffnet. Interne Links führen innerhalb Ihrer Dokumentation weiter.
</Note>

### Footer auf bestimmten Seiten ausblenden

Verwenden Sie Frontmatter, um den Footer auf einzelnen Seiten auszublenden:

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

Dies ist für benutzerdefinierte Landingpages oder Seiten nützlich, auf denen der Footer ablenken würde.

## Jamdesk-Branding

Standardmäßig wird in der Fußzeile Ihrer Dokumentationsseiten ein Link „Powered by Jamdesk“ angezeigt. Dieser Link hilft anderen Teams, Jamdesk zu entdecken. Sie können ihn entfernen, wenn Sie möchten.

### Branding ausblenden

So entfernen Sie das Jamdesk-Branding:

1. Gehen Sie in Ihrem Jamdesk-Dashboard zu **Settings**
2. Suchen Sie den Abschnitt **Build Settings**
3. Deaktivieren Sie **Show Jamdesk Branding**
4. Starten Sie einen neuen Build

<Note>
Der Branding-Schalter ist in allen Tarifen verfügbar. Änderungen werden erst nach einem erneuten Build wirksam.
</Note>

## Vollständiges Branding-Beispiel

Hier sehen Sie eine vollständige Branding-Konfiguration:

```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" }
        ]
      }
    ]
  }
}
```

## Benutzerdefinierte Domain

Fügen Sie Ihre Domain im Jamdesk-Dashboard hinzu:

1. Gehen Sie zu **Settings** → **Domains**
2. Fügen Sie Ihre Domain hinzu (z. B. `docs.yourcompany.com`)
3. Konfigurieren Sie DNS wie angegeben
4. Warten Sie auf die Verifizierung

Ihre Dokumentation ist unter Ihrer benutzerdefinierten Domain mit automatischem SSL verfügbar.

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Theming" icon="palette" href="/de/customization/theming">
    Passen Sie Farben und Typografie an
  </Card>
  <Card title="SEO-Optimierung" icon="magnifying-glass-chart" href="/de/content/seo">
    Verbessern Sie Suchmetadaten und Vorschauen
  </Card>
</Columns>