Come creare un favicon
Una favicon moderna è più di un'immagine 16×16. Ecco il flusso di lavoro completo per un risultato nitido su ogni browser, sistema operativo e dispositivo.
Cos'è una favicon?
La favicon è la piccola icona che il browser mostra nella scheda, nella barra dei segnalibri e nell'elenco della cronologia. Su mobile diventa l'icona della home screen. Su Windows è l'icona del collegamento.
I siti moderni pubblicano più risoluzioni e formati perché ogni superficie possa avere una resa nitida.
Prepara l'immagine sorgente
Parti da un'immagine quadrata di almeno 512×512 — meglio ancora un SVG con viewBox quadrato. Qualsiasi cosa più piccola risulterà sfocata dopo il ridimensionamento.
Evita linee sottili e testo piccolo: a 16×16 diventano illeggibili.
Genera un .ico multi-risoluzione
Includi 16, 32, 48, 64, 128 e 256 in un unico favicon.ico. I browser selezionano automaticamente la dimensione giusta.
Il nostro generatore esegue tutto lato client in meno di un secondo.
Aggiungi i tag HTML
Metti favicon.ico nella root del sito. Poi aggiungi SVG, apple-touch-icon e icone manifest nel <head> per un setup completo.
Verifica in ogni browser
Esegui una ricarica forzata in Chrome, Safari, Firefox e Edge. Controlla la barra dei segnalibri, la scheda e un'installazione sulla home screen.