Cos'è un favicon?
Un favicon (favorite icon) è la piccola icona che appare nelle schede del browser, nei preferiti, nelle voci della cronologia e nei collegamenti sul desktop. È uno dei primi elementi visivi che i visitatori notano del tuo sito. Un favicon mancante trasmette l'idea di un sito poco professionale o incompleto.
I favicon sono passati da semplici icone 16x16 pixel a un insieme complesso di dimensioni necessarie per diversi dispositivi e contesti. I siti moderni hanno bisogno di più formati di favicon per coprire tutti i casi d'uso.
Il formato ICO per i favicon
ICO è il formato favicon originale e resta il più universalmente supportato. Un singolo favicon.ico, cioè un file ICO, contiene più immagini in dimensioni differenti (16x16, 32x32, 48x48, ecc.), consentendo a browser e sistemi operativi di selezionare automaticamente la dimensione più appropriata.
Quando un browser richiede /favicon.ico, riceve un unico file contenente tutte le dimensioni necessarie. Non è richiesto alcun markup HTML aggiuntivo — i browser cercano automaticamente favicon.ico nella directory principale.
Requisiti moderni del favicon (2026)
| File | Dimensione | Scopo |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Browser legacy, collegamenti Windows |
| apple-touch-icon.png | 180x180 | Preferito sulla schermata Home iOS |
| icon-192.png | 192x192 | Chrome Android, manifest PWA |
| icon-512.png | 512x512 | Splash screen PWA, finestra di installazione |
| favicon.svg | Scalabile | Browser moderni, scalatura infinita, modalità scura |
Come creare un favicon da PNG
- Parti da un'immagine quadrata — almeno 512x512 pixel. Usa il tuo logo o una versione semplificata.
- Usa PNG con trasparenza — uno sfondo trasparente garantisce che il favicon appaia pulito su qualsiasi tema del browser (chiaro o scuro).
- Caricalo nel convertitore da PNG a ICO — crea un unico favicon.ico con sei dimensioni: 256, 128, 64, 48, 32 e 16 pixel.
- Testa a dimensioni ridotte — visualizza il favicon a 16x16. I design complessi potrebbero richiedere semplificazioni per dimensioni di visualizzazione molto piccole.
Trasparenza nei favicon
Sorgente PNG = favicon trasparente. Se la tua immagine sorgente ha uno sfondo trasparente, l'ICO lo preserverà. È importante per favicon che devono apparire bene sia su temi di browser chiari che scuri.
Sorgente JPG = sfondo pieno. JPG non supporta la trasparenza, quindi un favicon basato su JPG avrà sempre un colore di sfondo pieno. Usa PNG quando possibile. Se il tuo logo esiste solo in JPG, scopri come rendere trasparente lo sfondo di un JPG prima di creare il favicon.
Buone pratiche
- Mantienilo semplice: i favicon vengono visualizzati a 16x16 pixel. I loghi complessi diventano illeggibili. Usa un marchio semplificato o una singola lettera.
- Testa alla dimensione reale: visualizza il favicon in una scheda del browser prima del rilascio. Ciò che appare magnifico a 512x512 potrebbe essere irriconoscibile a 16x16.
- Garantisci il contrasto: testa su temi di browser sia chiari che scuri. Il favicon deve essere visibile su qualsiasi sfondo.
- Usa una sorgente vettoriale: se hai una versione SVG del tuo logo, produrrà risultati più nitidi a tutte le dimensioni.
Implementazione HTML
Aggiungi queste righe al <head> del tuo HTML per un supporto favicon completo:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Avvio rapido: come minimo, posiziona un favicon.ico (con dimensioni 16x16 e 32x32) nella directory principale del tuo sito. I browser lo trovano automaticamente senza alcun markup HTML.
ICO vs PNG vs SVG: quale formato usare per il favicon
| Formato | Funziona in | Usalo per |
|---|---|---|
| favicon.ico | Tutti i browser, anche quelli vecchi; viene trovato in /favicon.ico senza alcun HTML | Il fallback che ogni sito dovrebbe avere |
| PNG | Tutti i browser moderni tramite <link rel="icon" type="image/png"> |
apple-touch-icon (180×180) e icone del manifest della web app (192 e 512) |
| SVG | Chrome, Edge e Firefox; le versioni meno recenti di Safari lo ignorano | Un'icona nitida a qualsiasi dimensione, con colori per la modalità scura tramite CSS |
Un set minimo comune è composto da favicon.ico, icon.svg, apple-touch-icon.png e i due PNG del manifest. Evita l'SVG se il tuo logo ha dettagli fini che a 16 px diventano illeggibili; disegna invece un'icona semplificata.