# Design della favicon: icone minuscole che restano riconoscibili

[Canonical HTML page](https://gradiently.design/it/guide/favicon-design)

La tua favicon è il pezzo più ripetuto del tuo brand e il più piccolo. Deve resistere a 16 pixel, su schede chiare e scure, accanto ad altri cinquanta siti. Ecco come farla reggere.

## The short version

- Una favicon è la piccola icona che rappresenta un sito web nelle schede del browser, nei segnalibri, nella cronologia, nelle schermate home e nei risultati di ricerca.
- Un set minimo moderno è una favicon.ico 32×32, un'icona SVG, un'Apple touch icon 180×180 e PNG 192×192 e 512×512 in un manifest di web app.
- Google Search mostra la favicon del sito accanto ai risultati e chiede un'icona quadrata, idealmente più grande di 48×48 pixel.
- Le favicon funzionano meglio come una sola forma o lettera marcata con forte contrasto, perché il dettaglio sparisce a 16 pixel.
- Una favicon SVG può cambiare colori per la modalità scura con una media query dentro il file.

Una **favicon** è la piccola icona quadrata che rappresenta il tuo sito web nelle schede del browser, nei segnalibri, nella cronologia, nelle schermate home del telefono e nei risultati di Google. Spesso viene mostrata a soli 16 o 32 pixel, quindi un buon design della favicon è spietato: una sola forma o lettera marcata, alto contrasto, nessun dettaglio fine. Tecnicamente servono solo pochi file, un ICO 32×32, un SVG, un'Apple touch icon 180×180 e due PNG per il manifest, più qualche riga di HTML.

## Dimensioni e file della favicon che servono davvero

Le vecchie guide elencano venti misure. I browser moderni ridimensionano bene, quindi un set breve copre ogni posto in cui compare una favicon. Questo segue l'approccio consigliato su [web.dev](https://web.dev/articles/add-manifest) per i manifest e il comportamento attuale dei browser per il resto.

| File | Misura | Usato da |
| --- | --- | --- |
| `favicon.ico` | 32×32 | Browser più vecchi e tutto ciò che richiede direttamente `/favicon.ico` |
| `icon.svg` | Scalabile | Browser attuali che supportano le favicon SVG; può adattarsi alla modalità scura |
| `apple-touch-icon.png` | 180×180 | Schermate home di iPhone e iPad e segnalibri di Safari |
| `icon-192.png` | 192×192 | Schermata home di Android, tramite il manifest della web app |
| `icon-512.png` | 512×512 | Schermate iniziali e installazioni di app su Android, tramite il manifest |

Cinque file. Mettili nella radice del sito, o ovunque, purché l'HTML punti a loro.

Anche Google Search mostra le favicon accanto ai risultati. Le sue [linee guida sulle favicon](https://support.google.com/webmasters/answer/9290858) chiedono un'icona quadrata, ne consigliano una più grande di 48×48 pixel e dicono che deve rappresentare il tuo brand. I PNG 192 e 512 sono entrambi adatti; controlla quella pagina prima del lancio, perché Google la rivede.

## Come aggiungere una favicon al tuo sito

```html
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
```

Va nel `head` di ogni pagina. I browser che capiscono l'SVG lo preferiscono; gli altri ripiegano sull'ICO.

```json
{
  "name": "Studio Nine",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}
```

Un `manifest.webmanifest` minimo. L'icona maskable è facoltativa e permette ad Android di ritagliarla nelle sue forme.

> **Le icone maskable vogliono un margine** Android può ritagliare un'icona maskable in un cerchio, uno squircle o un quadrato arrotondato. Tieni la parte importante dentro il cerchio centrale, circa l'80% della larghezza, e riempi il resto con il colore di sfondo.

## Progettare una favicon leggibile a 16 pixel

A 16 pixel hai 256 punti. Un logotipo completo diventa una macchia grigia, i tratti sottili spariscono e due colori simili si fondono. Le favicon che le persone riconoscono all'istante sono quasi sempre una di tre cose: una singola lettera, un simbolo semplice o una forma piena in un colore distintivo.

Un'icona quadrata di app con una sola lettera N in grassetto su sfondo sfumato

Una lettera pesante su uno sfondo forte. Si legge ancora quando il browser la riduce a 16 pixel.

Un'icona quadrata con il nome di uno studio di tre parole, troppo dettagliata per funzionare come favicon

Il nome completo va bene a 512 pixel e a 16 diventa una texture illeggibile. Tienilo per la pagina stessa.

### Da evitare

- Il logo completo con il suo logotipo
- Tratti filiformi e piccoli occhielli
- Due colori vicini che si sfumano insieme
- Dettagli che arrivano fino ai bordi
- Un'icona trasparente che sparisce sulle schede scure

### Da fare

- Una lettera, un monogramma o un simbolo
- Tratti spessi almeno 2 pixel a 32×32
- Un forte contrasto tra forma e sfondo
- Riempire gran parte del quadrato, con un po' di margine
- Provare con temi del browser chiari e scuri

## Colore e gradienti in un'icona minuscola

A questa misura il colore lavora più della forma, perché è ciò che le persone cercano lungo una fila di schede. Un colore di brand riconoscibile batte un simbolo intelligente. I gradienti possono funzionare se sono decisi e brevi: due punti con una chiara differenza di luminosità si leggono come una superficie illuminata, mentre una sfumatura sottile a più punti a 16 pixel appare solo fangosa.

- Indaco e rosa: si legge: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)`
- Verde acqua e lime: si legge: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)`
- Grigi pallidi: sparisce: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)`

Gli sfondi delle favicon vogliono un chiaro cambio di luminosità e una tinta decisa. L'ultimo sparisce su una barra delle schede chiara.

Se il tuo brand ha già uno sfondo distintivo, un suo ritaglio può fare una tessera favicon riconoscibile. I Mark di Gradiently sono utili qui: lo stesso stile che corre dietro i tuoi post può stare dietro una sola lettera a 512×512, così scheda e feed sembrano un unico brand. Assicurati che la lettera mantenga un forte contrasto con la tessera, come spiegato in [logo su sfondo sfumato](https://gradiently.design/it/guide/logo-on-gradient-background).

## Favicon in modalità scura con SVG

Un'icona nera sparisce su una barra delle schede scura, e una bianca su una chiara. Poiché una favicon SVG è un piccolo documento, può portare con sé una propria media query e cambiare colori con il tema del browser.

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1e1b4b; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e7ff; }
      path { fill: #1e1b4b; }
    }
  </style>
  <rect width="32" height="32" rx="7"/>
  <path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>
```

Salvala come `icon.svg`. Una tessera arrotondata con una lettera N che inverte i colori in modalità scura.

Una tessera piena dietro il simbolo è l'assicurazione più semplice: si legge su qualsiasi sfondo, chiaro o scuro, senza affidarsi alla media query. [SVG o PNG](https://gradiently.design/it/guide/svg-vs-png) spiega perché il file vettoriale è quello da conservare.

## Una rapida lista di controllo per la favicon

1. **Parti dalla parte più semplice del logo** Un monogramma, la prima lettera o il solo simbolo. [Varianti del logo](https://gradiently.design/it/guide/logo-variations) spiega come costruire apposta una versione piccola.
2. **Disegnala prima a 32×32** Progetta sulla griglia piccola e ingrandisci, non il contrario. Tratti spessi, spazi generosi.
3. **Esporta i cinque file** ICO a 32×32, SVG, Apple touch icon 180×180, PNG del manifest 192 e 512.
4. **Provala in schede vere** Apri il tuo sito accanto ad altri dieci, con temi chiari e scuri. Se non riesci a trovare la tua scheda in un secondo, semplifica.

La favicon sta accanto alla tua [immagine Open Graph](https://gradiently.design/it/guide/open-graph-image-size) e alle immagini del profilo social come i piccoli segnali costanti di un brand. Tienile coerenti e vedi [dimensioni del logo](https://gradiently.design/it/guide/logo-sizes) per il kit completo.

## FAQ

### Che dimensioni deve avere una favicon?

Fornisci una favicon.ico 32×32, un SVG, un'Apple touch icon 180×180 e PNG 192×192 e 512×512 in un manifest. I browser scelgono e ridimensionano da questi.

### Come aggiungo una favicon al mio sito web?

Carica i file dell'icona e aggiungi i tag `link rel="icon"` e `link rel="apple-touch-icon"` nel `head` di ogni pagina, più un link al manifest per Android.

### Perché la mia favicon non compare su Google?

Google richiede una favicon quadrata, idealmente più grande di 48×48 pixel, collegata dalla tua home page e scansionabile. Dopo una modifica può servire un po' di tempo per l'aggiornamento.

### Una favicon può essere un SVG?

Sì, i browser attuali che supportano le favicon SVG la useranno e resta nitida a ogni misura. Tieni una favicon.ico come ripiego.

### La mia favicon deve essere il logo completo?

Di solito no. Usa una lettera, un monogramma o il simbolo del logo, perché un logotipo completo è illeggibile a 16 pixel.