Le dimensioni della favicon oggi si riducono a cinque file: un favicon.ico da 32×32, un'icona SVG, un'Apple touch icon da 180×180 e due PNG nel web app manifest da 192×192 e 512×512, uno dei quali maskable. Tutto il resto, come le icone Apple da 57×57, i riquadri di Windows o le altre dimensioni PNG, è legacy e si può togliere.
La tabella delle dimensioni
| File | Dimensioni | Usato da | Note |
|---|---|---|---|
favicon.ico | 32×32 (può contenere anche 16 e 48) | Tutti i browser, lettori RSS, qualsiasi client che richiede /favicon.ico | Tienilo nella radice del sito, anche se l'HTML dichiara altre icone. |
favicon.svg | Qualsiasi, viewBox quadrato | Schede di Chrome, Edge e Firefox | Nitida a ogni dimensione e può cambiare colori in modalità scura. |
favicon-96x96.png | 96×96 | Ricerca Google | Facoltativo se l'Apple touch icon è dichiarata; Google legge entrambe. |
apple-touch-icon.png | 180×180 | Schermata Home di iPhone e iPad, Ricerca Google | Sfondo opaco. iOS arrotonda gli angoli da solo. |
| Icona del manifest | 192×192 | Schermata Home di Android | Elencata in icons nel web app manifest. |
| Icona del manifest | 512×512 | Richiesta di installazione, schermata iniziale | I criteri di installazione di Chrome richiedono un'icona da 192 e una da 512. |
| Icona maskable | 512×512 | Icone adattive di Android | "purpose": "maskable", logo dentro il cerchio centrale dell'80%. |
Schede del browser: favicon.ico e SVG
Una scheda mostra l'icona a 16 pixel CSS, cioè 32 pixel del dispositivo su uno schermo ad alta densità. Per questo l'immagine 32×32 dentro favicon.ico è la più importante. Se vuoi, aggiungi 16 e 48 allo stesso file: i browser scelgono la più vicina.
Un'icona SVG copre tutte le dimensioni in una volta. Può anche contenere una media query prefers-color-scheme, così un logo scuro diventa chiaro sulle schede scure. Dichiara prima l'ICO con sizes="32x32" e dopo l'SVG: i browser che supportano l'SVG lo usano, gli altri ripiegano sull'ICO.
Ricerca Google
Le linee guida di Google sulle favicon richiedono un'icona quadrata di almeno 8×8 pixel e ne consigliano una più grande di 48×48. I formati supportati sono BMP, GIF, ICO, PNG, JPEG, PPM e TIFF. L'SVG non è nell'elenco, quindi un sito con solo SVG non offre a Google nulla da usare. Google legge sia rel="icon" sia rel="apple-touch-icon", quindi un'Apple touch icon da 180×180 dichiarata rispetta già il consiglio sulla dimensione. Se vuoi un file dedicato, va bene un PNG 96×96.
iPhone e iPad
iOS usa l'Apple touch icon quando qualcuno aggiunge il tuo sito alla schermata Home. 180×180 è la dimensione per gli iPhone attuali (60 punti a scala 3×); gli iPad la riducono senza problemi, quindi un solo file basta. Le aree trasparenti diventano nere nella schermata Home, quindi dai all'icona uno sfondo pieno. Senza l'icona, iOS usa uno screenshot della pagina o una lettera su un riquadro semplice.
Android e web app installabili
Android e Chrome leggono le icone dal web app manifest. L'icona 192×192 va nella schermata Home; quella 512×512 compare nella finestra di installazione e nella schermata iniziale.
Un'icona maskable è un'immagine 512×512 a parte, la cui grafica riempie tutto il quadrato. Android la ritaglia nella forma usata dal telefono: cerchio, squircle o quadrato arrotondato. Tieni il logo dentro un cerchio centrato con un diametro pari all'80% dell'immagine e resisterà a ogni maschera. Senza un'icona maskable, Android rimpicciolisce l'icona normale e la mette su un cerchio bianco.
L'HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">E la parte icone di site.webmanifest:
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Servi il manifest come application/manifest+json e ogni icona con il suo vero tipo di immagine. Un server che risponde a /favicon.ico con una pagina HTML e stato 200 rompe l'icona, anche se la scheda Rete degli strumenti per sviluppatori sembra a posto. Le single-page app lo fanno spesso.
Dimensioni che puoi eliminare
- Apple touch icon da 57, 60, 72, 76, 114, 120, 144 e 152 px. iOS ridimensiona quella da 180 px.
mstile-*.png,browserconfig.xmle i tagmsapplication-*. Servivano ai riquadri della schermata Start di Windows 8 e 10.- Il
mask-icondi Safari. Da Safari 12 le schede fissate usano la favicon normale. - Link separati a PNG 16×16 e 32×32 quando
favicon.icocontiene già entrambi.
Controlla il tuo set
Favicon Checker scarica dal tuo sito tutti i file elencati sopra, misura la dimensione e il formato reali e mostra come appaiono le icone nelle schede, su Google, iOS e Android.