Come funziona
L'immagine o le lettere vengono disegnate su un canvas in tutte le dimensioni richieste da browser e telefoni, poi salvate come file PNG. Le versioni da 16, 32 e 48 px vengono riunite in un unico favicon.ico. Tutto viene creato nel tuo browser e non viene caricato nulla.
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
A cosa serve ogni file
- favicon.ico: la classica icona della scheda del browser. Tutti i browser e Windows la cercano ancora nella radice del sito.
- apple-touch-icon.png: l'icona che iPhone e iPad usano quando qualcuno aggiunge il tuo sito alla schermata Home. Ha sempre uno sfondo pieno.
- icon-192.png, icon-512.png: Android e le web app installabili (PWA) le prendono dal manifest.
- site.webmanifest: un piccolo file JSON con il nome del sito, i colori e l'elenco delle icone.
Consigli
- Metti tutti i file nella cartella principale del sito, accanto a index.html, e incolla il codice nell'head di ogni pagina.
- A 16 px si leggono meglio forme semplici e marcate; testi piccoli e linee sottili spariscono.
- I browser memorizzano a lungo le favicon nella cache. Per vedere una modifica, apri direttamente l'URL dell'icona o usa una finestra privata.
- Il tag theme-color colora la barra del browser su Android con il tuo colore di sfondo.
Standard e fonti
- HTML Standard — link rel="icon" · WHATWG
- Web Application Manifest · W3C
- Configuring Web Applications (apple-touch-icon) · Apple Developer
Ultima revisione 15 ottobre 2026
Domande frequenti
Quali dimensioni di favicon mi servono?
Un favicon.ico con 16, 32 e 48 px, un apple-touch-icon da 180 px e icone da 192 e 512 px per Android coprono i browser e i telefoni attuali.
Il mio logo viene caricato?
No. Le icone vengono disegnate e assemblate nel tuo browser.
Posso usare un SVG?
Sì. Sono accettati SVG, PNG, JPG, WebP e GIF; un'immagine quadrata di almeno 512 px dà il risultato più nitido.
Perché l'icona Apple non è trasparente?
iOS riempie di nero le aree trasparenti, quindi l'icona da 180 px usa sempre il tuo colore di sfondo.
La mia nuova favicon non compare.
I browser memorizzano le favicon nella cache a lungo. Apri direttamente l'indirizzo dell'icona, svuota la cache o prova una finestra privata.