---
title: Identità visiva
description: "Configura loghi, favicon, link della barra di navigazione e contenuti del piè di pagina del tuo sito di documentazione."
---

> **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.
*/}

L'identità visiva controlla gli elementi che i lettori vedono per primi: loghi, favicon e link di navigazione. Tutto supporta varianti per la modalità chiara/scura.

## Logo

Aggiungi il tuo logo all'intestazione della navigazione:

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

| Campo | Descrizione |
|-------|-------------|
| `light` | Logo per la modalità chiara (logo scuro su sfondo chiaro) |
| `dark` | Logo per la modalità scura (logo chiaro su sfondo scuro) |
| `href` | Destinazione del clic sul logo |

<Tip>
Usa loghi SVG per una resa nitida a qualsiasi dimensione. Se hai un solo logo, usalo sia per `light` che per `dark`.
</Tip>

### Dimensioni del logo

I loghi vengono visualizzati con una larghezza massima di 120px. Per ottenere risultati ottimali:
- Larghezza: 120-240px
- Altezza: 30-40px
- Formato: SVG preferito

## Favicon

Un'immagine per entrambe le modalità:

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

Oppure una variante separata per ogni modalità:

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

La favicon `light` viene mostrata nella modalità chiara, mentre `dark` viene mostrata nella modalità scura. `dark` è facoltativa. Se omessa, `light` viene utilizzata in entrambe le modalità. Jamdesk genera un elemento `<link rel="icon">` per la favicon principale, oltre a un secondo link con `media="(prefers-color-scheme: dark)"` per la variante scura.

Formati supportati: SVG, PNG, ICO.

<Note>
Se preferisci un singolo asset, anche un SVG che usa `currentColor` per i tratti e i riempimenti si adatta automaticamente: il browser sostituisce il colore di primo piano attivo.
</Note>

## Nome del sito

Il campo `name` viene visualizzato nelle schede del browser e nei risultati di ricerca:

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

Abbinalo a una [`description`](#descrizione), così i risultati di ricerca e le anteprime dei link mostrano un testo reale invece di un fallback generico.

## Descrizione

Il campo `description` è il riepilogo SEO predefinito del sito. I motori di ricerca lo mostrano sotto il titolo del sito e le piattaforme social lo usano per le anteprime dei link:

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

Punta a 50-160 caratteri pensati per un lettore che sta decidendo se fare clic. Le pagine che impostano una propria `description` nel frontmatter usano quella; la descrizione del sito si applica a tutto il resto.

## Link di navigazione

Aggiungi link alla barra di navigazione:

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

### Opzioni dei link

| Campo | Tipo | Descrizione |
|-------|------|-------------|
| `label` | string | Testo visualizzato |
| `href` | string | URL (esterno o interno) |

### Pulsante principale

Il campo `primary` crea un pulsante di invito all'azione in evidenza:

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

## Piè di pagina

Aggiungi link social e colonne di link personalizzate al piè di pagina della documentazione.

### Link social

Visualizza le icone dei social media in fondo a ogni pagina:

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

#### Piattaforme supportate

| Piattaforma | Chiave | Descrizione |
|----------|-----|-------------|
| GitHub | `github` | Link all'organizzazione o al repository GitHub |
| X (Twitter) | `x` o `twitter` | Link al tuo profilo X/Twitter |
| LinkedIn | `linkedin` | Link alla pagina LinkedIn della tua azienda |
| Discord | `discord` | Link al tuo server Discord |
| Slack | `slack` | Link alla tua community Slack |
| YouTube | `youtube` | Link al tuo canale YouTube |
| Instagram | `instagram` | Link al tuo profilo Instagram |
| Facebook | `facebook` | Link alla tua pagina Facebook |
| Reddit | `reddit` | Link al tuo subreddit |
| Telegram | `telegram` | Link al tuo canale Telegram |
| Bluesky | `bluesky` | Link al tuo profilo Bluesky |
| Threads | `threads` | Link al tuo profilo Threads |
| Medium | `medium` | Link alla tua pubblicazione su Medium |
| Hacker News | `hacker-news` | Link al tuo profilo Hacker News |
| Sito web | `website` | Link al tuo sito web principale |

<Tip>
Le icone vengono visualizzate in un ordine coerente indipendentemente dall'ordine con cui le definisci nella configurazione. GitHub e X/Twitter vengono mostrati per primi, seguiti dalle altre piattaforme.
</Tip>

### Colonne di link

Aggiungi gruppi di link organizzati sopra le icone social:

```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 | Descrizione |
|-------|------|-------------|
| `links` | array | Array di oggetti delle colonne di link |
| `links[].header` | string | Intestazione della colonna (facoltativa) |
| `links[].items` | array | Link nella colonna |
| `links[].items[].label` | string | Testo visualizzato del link |
| `links[].items[].href` | string | URL (percorsi interni o URL esterni) |

<Note>
I link esterni (che iniziano con `http`) si aprono automaticamente in una nuova scheda. I link interni portano all'interno della documentazione.
</Note>

### Nascondere il piè di pagina in pagine specifiche

Usa il frontmatter per nascondere il piè di pagina nelle singole pagine:

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

È utile per pagine di destinazione personalizzate o per pagine in cui il piè di pagina risulterebbe distraente.

## Identità visiva di Jamdesk

Per impostazione predefinita, nelle pagine della documentazione viene visualizzato nel piè di pagina un link "Powered by Jamdesk". Questo link aiuta altri team a scoprire Jamdesk. Puoi rimuoverlo, se preferisci.

### Nascondere l'identità visiva

Per rimuovere l'identità visiva di Jamdesk:

1. Vai a **Settings** nel dashboard di Jamdesk
2. Individua la sezione **Build Settings**
3. Disattiva **Show Jamdesk Branding**
4. Avvia una nuova build

<Note>
L'opzione per l'identità visiva è disponibile in tutti i piani. Le modifiche richiedono una nuova build per diventare effettive.
</Note>

## Esempio completo di identità visiva

Ecco una configurazione completa dell'identità visiva:

```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 personalizzato

Aggiungi il tuo dominio nel dashboard di Jamdesk:

1. Vai a **Settings** → **Domains**
2. Aggiungi il tuo dominio (ad esempio, `docs.yourcompany.com`)
3. Configura il DNS come mostrato
4. Attendi la verifica

La documentazione sarà accessibile dal tuo dominio personalizzato con SSL automatico.

## Cosa fare ora?

<Columns cols={2}>
  <Card title="Temi" icon="palette" href="/it/customization/theming">
    Personalizza colori e tipografia
  </Card>
  <Card title="Ottimizzazione SEO" icon="magnifying-glass-chart" href="/it/content/seo">
    Migliora i metadati e le anteprime di ricerca
  </Card>
</Columns>