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 file favicon.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).
- Carica sul nostro convertitore — seleziona ICO come formato di uscita. Il convertitore genera automaticamente un ICO multi-risoluzione.
- 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.
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.