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.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
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.
FAQ
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.