Articolo

Creare una favicon da un PNG

Una favicon è un piccolo grafico che i browser mostrano nelle schede, nei segnalibri e negli elenchi della cronologia. Ottenerla correttamente implica più del semplice ridimensionamento di un logo: il formato .ico raccoglie più risoluzioni in un unico file, i browser moderni preferiscono PNG, i dispositivi mobili hanno il loro apple-touch-icon e i manifest delle app web hanno bisogno del proprio set di icone. Questo articolo copre ogni aspetto e spiega come produrre l'intero set da un singolo PNG sorgente.

Scritto da Bastien Sulyan · Pubblicato il 29 giugno 2026

Cos'è una favicon e dove la usano i browser

La parola favicon è una contrazione di "favorite icon" (icona preferita). I browser l'hanno mostrata per la prima volta nella barra degli indirizzi in Internet Explorer 5 (1999), poi l'hanno adottata per i segnalibri. Oggi appare nelle schede del browser, nella barra degli strumenti dei segnalibri, nella cronologia di navigazione, nella pagina delle nuove schede di alcuni browser e nelle barre delle applicazioni del sistema operativo quando un sito viene aggiunto ai preferiti. Su mobile, se un utente aggiunge un sito alla propria schermata iniziale, il dispositivo usa un'immagine correlata ma distinta chiamata apple-touch-icon piuttosto che la favicon standard. I motori di ricerca a volte mostrano le favicon accanto ai risultati nella loro interfaccia. Il grafico è piccolo per design, il che lo rende efficace per l'identificazione visiva rapida ma anche impegnativo da produrre bene: a 16x16 pixel, un logo dettagliato diventa una macchia indistinta. Il file favicon ha attraversato diversi formati nel corso dei decenni, con .ico che rimane il più compatibile e PNG ora il predefinito moderno per la maggior parte dei browser.

Il contenitore .ico: più risoluzioni in un unico file

Il formato .ico è un contenitore, non una singola immagine. Un singolo file .ico può contenere più immagini bitmap a risoluzioni diverse, ognuna memorizzata come voce separata in un indice all'inizio del file. Le tre dimensioni più comuni sono 16x16, 32x32 e 48x48 pixel. Quando Windows mostra una favicon in Explorer o nella barra delle applicazioni, sceglie la voce che corrisponde meglio al contesto di visualizzazione. Le versioni precedenti di Windows avevano bisogno di una voce 48x48 per gli slot della barra delle applicazioni ad alta densità. I browser richiedono la favicon a 16x16 per le schede, ma possono usare una voce più grande se viene rilevato un display ad alta densità. Raggruppare tutte e tre le dimensioni in un unico file .ico significa che una singola richiesta HTTP copre ogni caso d'uso. Distribuirle come PNG separati è valido ma richiede tag link aggiuntivi e aggiunge richieste HTTP. Le immagini interne all'interno di un file .ico sono dati BMP o PNG standard, quindi il contenitore aggiunge solo un piccolo overhead dell'intestazione per voce.

Progettare per dimensioni minuscole: semplificare il segno

A 16x16 pixel si hanno 256 pixel in totale. Un logotipo tipico con un wordmark o dettagli fini diventa illeggibile a quella dimensione. L'approccio standard è creare un segno semplificato: una singola lettera, una forma astratta o un'icona che rappresenta il brand senza fare affidamento sui dettagli. Alcuni problemi specifici da anticipare: i tratti sottili scompaiono completamente alle dimensioni piccole, specialmente su schermi non retina. Le coppie di lettere e i dettagli dello spazio negativo si fondono in rumore grigio. Le sfumature diventano quasi invisibili. Il contrasto elevato tra il segno e il suo sfondo è il fattore singolo più importante nella leggibilità. Una forma solida su uno sfondo semplice si legge quasi sempre meglio di un'illustrazione dettagliata a 16x16. Le dimensioni 32x32 e 48x48 sono più permissive e possono supportare un po' più di dettaglio, ma la versione 16x16 dovrebbe essere trattata come il vincolo vincolante. Se il segno non si legge ancora a 16x16, il design ha bisogno di ulteriore semplificazione.

Il set moderno: .ico, icone PNG, apple-touch-icon, manifest e tag HTML link

Una configurazione favicon completa per un sito pubblico richiede attualmente cinque elementi. Primo, un favicon.ico nella root del sito (i browser richiedono /favicon.ico direttamente senza un tag link come fallback). Secondo, un PNG 32x32 per i browser desktop moderni, dichiarato con un tag link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Terzo, un PNG 16x16 per la dimensione della scheda: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Quarto, un apple-touch-icon a 180x180 pixel per i segnalibri sulla schermata iniziale iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Quinto, un manifest dell'app web (site.webmanifest) con un PNG 192x192 e un PNG 512x512 per Android e le progressive web app. La trasparenza è supportata in PNG e nelle voci codificate PNG all'interno di .ico, anche se l'apple-touch-icon dovrebbe avere uno sfondo opaco perché iOS ignora il canale alpha e riempie le aree trasparenti con il nero.

Farlo localmente: favicon-generator mantiene l'immagine sul dispositivo

Il favicon-generator su questo sito prende un PNG e produce il set completo: un favicon.ico multi-risoluzione compresso con voci 16x16, 32x32 e 48x48, le singole dimensioni PNG per l'uso diretto con tag link e l'apple-touch-icon 180x180. Tutto questo avviene nel browser usando l'API Canvas e un encoder .ico in JavaScript. L'immagine sorgente non viene mai caricata da nessuna parte; rimane sul dispositivo. Questo è importante quando il file sorgente è il logo di un'azienda o qualsiasi asset che non dovrebbe lasciare la macchina prima che si controlli dove va. Ogni file generato viene offerto come download separato, con i nomi di file convenzionali. Si copiano nella root del sito e si aggiungono i tag link corrispondenti all'intestazione HTML. Se il logo sorgente ha dettagli fini che non sopravvivono al rendering 16x16, è possibile ritagliarlo o semplificarlo prima di inserirlo nel generatore, o fornire un'immagine sorgente diversa preparata specificamente per la favicon.

Strumenti citati in questo articolo

Domande frequenti

Ho ancora bisogno di un favicon.ico se dichiaro tag link PNG?

Sì, per due ragioni. Prima, i browser che non leggono l'HTML (web crawler, lettori RSS, alcuni vecchi browser mobili) cercano /favicon.ico direttamente nella root del dominio. Se quel file è assente, generano una richiesta 404 a ogni caricamento di pagina, che aggiunge rumore ai log del server e un piccolo round trip non necessario. Seconda, le versioni precedenti di Internet Explorer riconoscono solo il formato .ico e ignorano i tag link PNG. Fornire entrambi copre tutti i casi.

Posso usare un SVG come favicon?

Chrome e Firefox supportano le favicon SVG tramite `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari non supporta le favicon SVG. Poiché le favicon SVG sono indipendenti dalla risoluzione, appaiono nitide su qualsiasi densità di visualizzazione, compresi gli schermi retina, senza aver bisogno di più varianti di dimensione. La raccomandazione pratica è di dichiarare il tag link SVG per i browser che lo supportano e includere comunque il fallback .ico per una copertura completa. Le favicon SVG possono anche includere una media query `prefers-color-scheme` per passare automaticamente tra una versione chiara e una scura.

Da quale immagine dovrei partire per ottenere il miglior risultato?

Un PNG quadrato a 512x512 o più grande con sfondo trasparente offre la massima flessibilità. Partire da grandi dimensioni e ridurle preserva più dettagli che partire da un'immagine piccola. Se il logo principale include un wordmark, valutare la preparazione di una versione semplificata separata che mostra solo l'icona o il segno, perché il testo non sarà leggibile a 16x16 indipendentemente dalla risoluzione sorgente. Il contrasto elevato tra il segno e il suo sfondo è il predittore più affidabile di quanto bene si leggeranno le dimensioni piccole.