Dimensioni della favicon: formato e misure delle piccole immagini
Le favicon moderne devono essere disponibili in più dimensioni e formati: da 16×16 px per i browser fino a 512×512 px per le PWA. In questo contesto, PNG e SVG sostituiscono sempre più il vecchio formato ICO, definito nel file manifest.json per le web app.
Favicon: a cosa serve questa grafica?
Una favicon (una combinazione delle parole “favorite” e “icon”) è una piccola grafica visualizzata sopra la barra degli indirizzi nelle schede del browser. Contribuisce alla riconoscibilità di un sito web, gli conferisce un aspetto professionale e lo fa risaltare tra i concorrenti considerando i diversi aspetti SEO. Ogni sito dovrebbe integrare una favicon.
Le favicon possono essere il logo di un marchio o di un’azienda, ma poiché le sue dimensioni sono molto limitate, spesso si utilizza solo una parte del logo o una sua variante. Sui dispositivi mobili, queste piccole grafiche vengono utilizzate anche come touch icon.
Quali dimensioni della favicon sono consigliate?
Browser e dispositivi diversi utilizzano dimensioni diverse per le favicon. In genere, 16 × 16 pixel e 32 × 32 pixel sono i formati più importanti, perché vengono usati nelle classiche schede del browser.
Per le web app progressive, cioè i siti web che funzionano più come app, dovrebbero essere disponibili anche favicon in formato 192×192 px e 512×512 px. Questi formati vengono definiti nel manifest per le icone dell’app e utilizzati da browser come Chrome o Edge durante l’“installazione” di un sito web.
Altre dimensioni importanti: Google e Apple
La dimensione delle favicon per Google è particolarmente importante, perché Google utilizza le favicon non solo nel browser, ma anche nei risultati di ricerca. Lì vengono visualizzate con una dimensione di 48 × 48 pixel. Per Android dovresti inoltre fornire una variante da 192 × 192 pixel: serve come icona dell’app quando le persone salvano il tuo sito web nella schermata Home.
Per Apple, a seconda del dispositivo finale sono ottimali diverse dimensioni di favicon. Per l’iPhone si utilizza il formato 60 x 60 pixel. È però possibile anche una risoluzione decisamente più alta, purché sia un multiplo di questo valore. Ciò consente una visualizzazione ottimale ad alta risoluzione e, per altri scopi, l’immagine viene ridimensionata verso il basso. Un’immagine di 180 x 180 pixel è quindi una buona scelta. Le icone su iPad, invece, vengono visualizzate a 83,5 x 83,5 pixel. Per i moderni display retina e super retina, il formato favicon consigliato è 167 x 167 pixel, ossia il doppio di tale valore.
Le icone vengono salvate come icone Apple Touch e integrate tramite il seguente tag HTML nella sezione <head> della pagina:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Le dimensioni più importanti delle favicon in sintesi
Per alcuni browser e dispositivi finali si applicano eccezioni. Soprattutto con i dispositivi più datati, in teoria potrebbero essere necessarie ulteriori dimensioni per garantire che la dimensione dell’icona del browser sia corretta. Qui trovi le misure più comuni elencate di nuovo in modo chiaro:
| Browser o dispositivo | Dimensione |
|---|---|
| La maggior parte dei browser moderni | 16 x 16 o 32 x 32 pixel |
| Google e Android | 48 x 48 o 192 x 192 pixel |
| iPhone (modelli più recenti) | 60 x 60 oppure 180 x 180 pixel |
| iPad (modelli più recenti) | 83,5 x 83,5 o 167 x 167 pixel |
| Chrome Web Store | 128 x 128 pixel |
| Google TV | 96 x 96 pixel |
| Internet Explorer 9 | 24 x 24 pixel |
| Schermata Home di iPad | 72 x 72 pixel |
| iPhone (modelli più vecchi) e iPod Touch | 57 x 57 pixel |
| Schermata iniziale di iPhone 4 | 114 x 114 pixel |
| Opera | 195 x 195 pixel |
Estensioni dei file: quali formati di favicon sono possibili?
Puoi utilizzare diversi formati grafici per la tua favicon. Il classico formato .ico è ancora compatibile, ma è considerato obsoleto. I browser moderni preferiscono favicon in PNG o SVG. Per le PWA, ad esempio, nel file manifest si utilizza il formato PNG, perché può essere scalato senza perdita di qualità.
Di seguito una panoramica dei formati di file:
- .ico: massima compatibilità, ma scalabilità limitata
- .png: visualizzazione nitida su tutti i display, trasparenza possibile
- .svg: alternativa vettoriale, perfetta per favicon scalabili e design scuri
- .gif: solo in casi eccezionali (ad esempio icone animate)
Assicurati che il tuo server invii il tipo MIME corretto (ad esempio image/png o image/svg+xml) per garantire una visualizzazione corretta in tutti i browser.
Creare una favicon con un generatore
Ci sono quindi alcuni aspetti da considerare quando cerchi la dimensione giusta della favicon per il tuo sito web. Per questo motivo, il modo più semplice è utilizzare un generatore di favicon adeguato, che ti guida attraverso tutte le fasi di lavoro e garantisce che il formato dell’immagine sia adatto a tutti i browser più importanti.