Cos'è una Favicon (e quali dimensioni mi servono)?

Una favicon (abbreviazione di "favorite icon") è la piccola grafica che i browser mostrano accanto al titolo della pagina nella scheda, nella barra dei segnalibri, nella cronologia e sempre più spesso nei risultati dei motori di ricerca. Il nome risale a Internet Explorer 5 del 1999, dove l'icona era usata puramente come identificatore di segnalibro. Venticinque anni dopo, lo stesso formato di file e lo stesso markup HTML funzionano ancora, ma il ruolo della favicon si è espanso così tanto oltre quello scopo originale che "carica semplicemente una .ico 16x16" non è più la risposta giusta.

A cosa serve davvero una favicon oggi

I browser e i sistemi operativi moderni attingono al set di favicon per una vasta gamma di contesti, ciascuno con aspettative diverse di dimensione e formato:

• Schede del browser e segnalibri. Tipicamente renderizzata a 16x16 o 32x32 pixel CSS, ma su schermi ad alta densità il browser preleva una versione più grande e la riduce. Un'icona minuscola e pixelata accanto a un titolo nitido appare datata.
• Risultati di ricerca. Google mostra le favicon accanto ai risultati mobile dal 2019 e su desktop dal 2023. L'icona deve essere almeno 48x48, sono consigliati multipli di 48, e il file deve essere scansionabile.
• Schermata home di iOS e Android. Quando un utente sceglie "aggiungi alla schermata home", iOS preleva l'apple-touch-icon (180x180), Android preleva le icone dal web app manifest (tipicamente 192x192 e 512x512). Senza dichiarazioni esplicite, entrambe le piattaforme generano uno screenshot sfocato come fallback.
• Progressive Web App. Le PWA installate come app autonome si affidano al web app manifest per le icone nel launcher dell'app, nel selettore di task e nella splash screen. Dimensioni sbagliate qui significano un sito installabile che appare rotto.
• Schede fissate Safari macOS. Usa un SVG monocromatico separato (mask-icon) per l'aspetto delle schede fissate. Un caso di nicchia, ma banale da supportare.
• Fissaggio tile Windows. Edge e il menu Start di Windows possono fissare i siti come tile, il che richiede un set separato di dichiarazioni msapplication-TileImage.

La conseguenza pragmatica: ti serve un piccolo set di file (tipicamente da quattro a sei), non un singolo .ico, e una manciata di tag HTML link per dichiararli.

Quali formati di file contano

Tre formati sono rilevanti nel 2026, e i giorni in cui servivano tutti contemporaneamente sono finiti.

• PNG. Il default giusto. Supporto universale, senza perdite, gli sfondi trasparenti funzionano ovunque. Un PNG per ciascuna dimensione target.
• SVG. Supportato da ogni browser moderno per le favicon. Un SVG si adatta a qualsiasi dimensione e resta nitido su schermi ad alta densità senza necessità di asset retina separati. Avvertenza: le favicon SVG devono essere autocontenute (nessun riferimento esterno, nessun foglio di stile esterno, nessun font incorporato) e Safari le supporta solo abbinate a un fallback PNG.
• ICO. Il vecchio formato contenitore che può ospitare più dimensioni in un singolo file. Ancora utile per un caso specifico: la richiesta a /favicon.ico nella root del sito, che ogni browser, lettore RSS e crawler fa implicitamente anche se non gli fai link. Restituire un 404 è innocuo ma genera rumore nei log del server. Un piccolo .ico multi-dimensione (16x16, 32x32, 48x48 in un singolo file) lo silenzia.

WebP e AVIF, pur essendo eccellenti per le immagini di contenuto, non sono usati per le favicon perché il supporto dei browser in questo ruolo è inconsistente. Resta con PNG e SVG.

L'elenco effettivo dei file di cui hai bisogno nel 2026

Un set di favicon solido e a prova di futuro copre tutti i contesti sopra con questo minimo:

• favicon.ico — multi-dimensione (16, 32, 48), posizionato nella root del sito
• favicon.svg — scalabile, usato dai browser moderni quando disponibile
• favicon-96x96.png — fallback raster esplicito a una comoda dimensione media
• apple-touch-icon.png — 180x180, senza trasparenza (iOS aggiunge da solo gli angoli arrotondati)
• web-app-manifest-192x192.png — schermata home Android, launcher PWA
• web-app-manifest-512x512.png — splash screen PWA, contesti tile grandi

Sono sei file. L'HTML corrispondente in <head>:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

E un site.webmanifest minimo:

{
  "name": "Nome del Tuo Sito",
  "short_name": "Sito",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Questo copre schede del browser, segnalibri, risultati di ricerca Google, schermata home iOS, schermata home Android e installazione PWA. Tutto oltre questo è territorio di casi limite.

Vincoli di design per una favicon davvero leggibile

La parte più difficile del design di una favicon non è l'esportazione, è creare qualcosa di leggibile a 16x16. Alcune regole pratiche che producono costantemente buoni risultati:

• Semplifica senza pietà. Un logo completo raramente funziona come favicon 16x16. Usa un singolo elemento dominante: una lettera, un simbolo, un marchio astratto. Tutto ciò che ha tratti sottili o dettagli fini si confonde in poltiglia.
• Contrasto forte. La favicon si trova su un chrome del browser chiaro o scuro che non puoi prevedere. Bianco puro su trasparente sparisce nei temi chiari; nero puro su trasparente sparisce in quelli scuri. Usa uno sfondo pieno o progetta per entrambe le modalità (funziona un SVG con media query prefers-color-scheme).
• Rapporto quadrato con margine di sicurezza. Progetta su una tela quadrata ma mantieni circa il 10% di padding dai bordi. Alcune piattaforme (iOS, icone adattive di Android) ritagliano o mascherano l'icona, e un design che arriva fino al bordo viene tagliato.
• Testa a dimensioni reali. Guardare un'icona 16x16 al 200% di zoom è fuorviante. Rendila al 100% accanto ad altre schede per vedere come compete davvero per l'attenzione.

WordPress: come funziona Site Icon

WordPress ha il supporto integrato per favicon dalla versione 4.3. Nell'admin sotto Aspetto, Personalizza, Identità del sito c'è un campo "Icona del sito" che accetta una singola immagine quadrata, minimo 512x512. WordPress poi genera e serve automaticamente le varie dimensioni di favicon da quella sorgente.

La generazione automatica copre favicon.ico, apple-touch-icon a 180x180 e le dimensioni PNG standard nell'head HTML. Non genera un web app manifest di default, quindi l'installazione PWA farà fallback all'apple-touch-icon. Per la maggior parte dei siti è sufficiente.

Le carenze del Site Icon integrato: non può servire file diversi per risoluzione (nessun supporto SVG oltre la conversione raster) e non produce un manifest con la dimensione 512x512 più grande che preferiscono le installazioni PWA e le splash screen Android. Per un sito dove ti interessa davvero l'aspetto PWA, integrare il Site Icon con tag <link> manuali via functions.php di un child theme è la strada più pulita. Plugin come RealFaviconGenerator (anche un ottimo generatore web se vuoi saltare l'esportazione manuale) gestiscono questo da capo a coda.

Come verificare che il tuo setup favicon funzioni

1. Controllo scheda. Apri il sito in una finestra in incognito (per evitare favicon in cache) e conferma che l'icona appaia accanto al titolo. Testa almeno Chrome, Firefox e Safari.
2. Richiesta alla root. Visita /favicon.ico direttamente. Deve restituire un 200 con l'icona, non un 404. Molti siti falliscono in questo anche quando il loro HTML ha un corretto <link rel="icon">.
3. Schermata home iOS. Su un iPhone, tocca il pulsante condividi in Safari e "Aggiungi a schermata Home". L'anteprima deve mostrare la tua icona nitida 180x180, non uno screenshot sfocato della pagina.
4. Ricerca Google. Cerca il tuo sito da un dispositivo mobile. L'icona deve apparire accanto al risultato. Se no, l'URL di Google https://www.google.com/s2/favicons?domain=tuosito.com mostra cosa il crawler ha attualmente in cache.
5. Lighthouse. L'audit PWA di Lighthouse in Chrome DevTools cattura voci di manifest mancanti, dimensioni sbagliate e altri problemi di dichiarazione.

Problemi comuni e cosa li causa

• "La mia favicon non appare." Quasi sempre un problema di cache. I browser memorizzano in cache le favicon in modo molto aggressivo. Svuota la cache delle favicon (Chrome: visita chrome://favicon-cache, Firefox: cancella cache e dati offline) o testa in incognito.
• "Si vede su desktop ma non su mobile." Solitamente un apple-touch-icon mancante o un percorso di manifest sbagliato. I browser mobile danno priorità alle proprie icone specifiche della piattaforma sul generico <link rel="icon">.
• "La ricerca Google mostra un globo generico." O la favicon è troppo piccola (sotto 48x48), o il file non è scansionabile (bloccato da robots.txt, dietro autenticazione, content-type sbagliato), o Google semplicemente non ha ancora ri-scansionato. La latenza di ri-scansione per le favicon è spesso di settimane.
• "L'icona della schermata home ha un riquadro bianco intorno." Le immagini apple-touch-icon non devono avere trasparenza; iOS non appiattisce gli sfondi trasparenti al colore del tema, li lascia bianchi. Salva con uno sfondo pieno che si abbini al tuo brand.
• "L'icona appare sfocata su schermi retina." Viene servita solo la piccola favicon.ico. I browser moderni useranno la versione SVG o PNG 96x96 se la dichiari; verifica che l'HTML includa effettivamente quei tag link.

Cosa controlla InspectWP

La sezione favicon di un report InspectWP verifica che una favicon sia dichiarata nell'head HTML, che l'URL /favicon.ico restituisca una risposta valida e che un apple-touch-icon sia impostato per il supporto della schermata home iOS. Mancare uno di questi è un rilievo a bassa severità, ma l'effetto cumulativo sulle prime impressioni (risultati di ricerca, segnalibri, schermata home mobile) è reale. Un sito che appare curato ovunque tranne che nella favicon trasmette un'impressione di incompiuto. La buona notizia: è una configurazione una tantum che, fatta bene, non ha mai bisogno di essere ritoccata.