Cercando “dimensioni favicon” si trovano ancora elenchi di quindici file ereditati dal 2014. In pratica, oggi sei dimensioni coprono schede del browser, risultati di ricerca, iOS, Android e PWA. Ecco quali e perché.
Le dimensioni che servono davvero
Ogni riga corrisponde a un utilizzo documentato nel pacchetto proposto. La tabella privilegia un piccolo set interoperabile rispetto a una raccolta di varianti storiche.
| File | Dimensioni | A cosa serve |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Schede, preferiti, browser meno recenti, crawler |
| favicon.svg | vettoriale, quadrato | Browser moderni, nitido a ogni dimensione, supporta la modalità scura |
| favicon-96x96.png | 96×96 | Risultati di ricerca Google su mobile |
| apple-touch-icon.png | 180×180 | Schermata Home di iOS e iPadOS, senza trasparenza |
| web-app-manifest-192x192.png | 192×192 | Schermata Home Android, dichiarata nel manifest web |
| web-app-manifest-512x512.png | 512×512 | Schermata di avvio PWA, versione “maskable” |
Perché 16, 32 e 48 convivono nello stesso .ico
ICO è un formato contenitore: un singolo file può includere più immagini e il browser sceglie quella adatta alla visualizzazione. È proprio ciò che serve, perché la dimensione richiesta cambia in base al contesto.
16×16 serve per una scheda su uno schermo standard. 32×32 offre una variante per schermi ad alta densità e altre interfacce del browser. 48×48 completa il contenitore e rispetta anche la regola dei multipli di 48 documentata da Google per le favicon nei risultati di ricerca.
Fornire un .ico che contiene solo 16×16 è l’errore più comune: su uno schermo Retina l’icona viene ingrandita e appare sempre sfocata.
180×180 per iOS, 192 e 512 per Android
iOS non legge il manifest web per l’icona della schermata Home: cerca un tag apple-touch-icon. Basta una dimensione, 180×180, che copre tutti gli iPhone e iPad recenti. Il sistema la riduce automaticamente per i dispositivi meno recenti.
Android usa invece il manifest web. Bastano due voci: 192×192 per la schermata Home e 512×512 per la schermata di avvio quando il sito viene installato come app. La versione 512 va dichiarata con purpose “maskable”: il disegno deve restare leggibile dopo un ritaglio circolare o quadrato con angoli arrotondati.
Per un’icona maskable, mantieni gli elementi essenziali nell’80% centrale. Tutto ciò che sta fuori può essere ritagliato a seconda del produttore del telefono.
Da quale immagine sorgente partire
Il punto di partenza migliore è un SVG: si adatta senza perdita di qualità a tutte le dimensioni indicate. In alternativa usa un PNG quadrato di almeno 512×512 pixel, così anche l’icona di avvio Android viene prodotta riducendo l’immagine, mai ingrandendola.
Un logo orizzontale con testo non funziona a 16×16: a quella dimensione una parola diventa una macchia di pochi pixel. Estrai il simbolo oppure parti da una o due lettere su uno sfondo contrastante.
Infine, verifica il contrasto sia su sfondo chiaro sia su sfondo scuro: un logo nero scompare in una scheda con tema scuro. È proprio a questo che serve la variante scura della favicon SVG.
Le dimensioni che non servono più
I generatori meno recenti producono ancora file per integrazioni storiche, come i riquadri Windows con mstile-150x150.png e browserconfig.xml. Aggiungili solo se il tuo elenco di compatibilità include esplicitamente queste interfacce.
La lunga serie apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 e 152x152 risale a quando iOS non sapeva ridimensionare. Un’unica immagine 180×180 le sostituisce tutte.
Eliminare dichiarazioni inutilizzate semplifica il repository e l’HTML. Verifica i browser e le piattaforme destinatari prima di rimuovere un’integrazione esistente.
Fonti primarie
Domande frequenti
Serve ancora un favicon.ico?
Sì, ma solo nella radice del sito. I browser moderni preferiscono l’SVG, ma molti crawler, aggregatori e client di posta richiedono ancora /favicon.ico senza leggere l’HTML. Il file pesa pochi kilobyte: conservalo.
Quali dimensioni usa Google per la favicon nei risultati di ricerca?
Google richiede un’icona con lato multiplo di 48 pixel e di solito la mostra a 48×48. Un PNG 96×96 o un SVG sono sufficienti. L’icona deve essere accessibile ai crawler e non bloccata da robots.txt.
La favicon può essere rettangolare?
Tecnicamente sì, visivamente no. Ogni contesto di visualizzazione riserva un quadrato: un’immagine rettangolare viene deformata o centrata con bande vuote. Parti sempre da un quadrato, aggiungendo margini attorno al simbolo se necessario.