Generatore di favicon | ICO e PNG in più dimensioni in un'unica operazione
Caricate un'immagine, ritagliatela in quadrato e ottenete in un colpo solo il file favicon.ico (con più dimensioni incluse: 16, 32, 48 px) e l'intera serie di PNG. Il ridimensionamento usa l'algoritmo di Lanczos per la massima qualità e l'HTML da incollare nell'head viene generato automaticamente. Tutto avviene nel browser e l'immagine non viene trasmessa.
Come dichiarare la favicon (schemi ricorrenti)
Il modo di dichiarare una favicon cambia a seconda di quanto in là volete spingere il supporto. Abbiamo raccolto le istruzioni necessarie per ciascun caso, dalla configurazione minima fino alle PWA e al tema scuro. Il codice presuppone che i file generati si trovino nella radice del sito.
Schema 1: configurazione minima (solo favicon.ico)
Non serve scrivere nemmeno una riga di HTML: basta collocare /favicon.ico nella radice del documento. Il browser cerca implicitamente quel percorso e l'icona compare.
il-vostro-sito/
└── favicon.ico ← basta metterlo qui (nessuna riga da aggiungere all'HTML)
<!-- Volendo dichiararlo esplicitamente, basta questa sola riga -->
<link rel="icon" href="/favicon.ico" sizes="any">| Adatto a | Siti personali, strumenti interni e casi in cui basta che l'icona compaia |
|---|---|
| Nota | Aggiungendo sizes="any", se in futuro affiancherete un SVG o dei PNG il browser saprà correttamente che l'ICO è l'ultima risorsa. Conviene includere nell'ICO le dimensioni 16, 32 e 48 px. |
Schema 2: configurazione standard (consigliata)
Oltre all'ICO si preparano i PNG e l'Apple Touch Icon: è la configurazione oggi più diffusa e copre tutto, dai browser desktop all'aggiunta alla schermata home di iOS.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">| Adatto a | Siti aziendali, blog, testate e siti web in generale |
|---|---|
| Nota | Nell'apple-touch-icon le aree trasparenti vengono riempite di nero: usate sempre un PNG opaco con uno sfondo. Poiché iOS ne arrotonda gli angoli, lasciate circa un decimo di margine per non perdere i bordi. |
Schema 3: configurazione completa per PWA
In una PWA, che una volta aggiunta alla schermata home si avvia come un'applicazione, le icone si dichiarano in site.webmanifest. Senza entrambe le dimensioni da 192 e 512 px l'app non viene considerata installabile.
<!-- HTML (dentro head) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- site.webmanifest -->
{
"name": "Il mio sito",
"short_name": "Sito",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| Adatto a | PWA, applicazioni web e servizi usati soprattutto da smartphone |
|---|---|
| Nota | iOS non consulta le icone del manifest, quindi l'apple-touch-icon va comunque dichiarato a parte. display: "standalone" nasconde l'interfaccia del browser e avvia il sito come un'applicazione. |
Schema 4: favicon SVG con supporto al tema scuro
Una favicon SVG non dipende dalla risoluzione e, tramite i CSS interni all'SVG, può cambiare colore quando è attivo il tema scuro. Per i browser che non la supportano si affiancano ICO e PNG.
<!-- HTML (dentro head). Viene usato il primo formato leggibile, dall'alto -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg (esempio con inversione del colore nel tema scuro) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| Adatto a | Siti che dispongono del logo in formato vettoriale e vogliono una resa diversa nel tema scuro |
|---|---|
| Nota | Le favicon SVG sono supportate da Chrome, Firefox ed Edge. Safari al momento non legge un SVG dichiarato con rel="icon", quindi il ripiego con PNG e ICO è indispensabile. |
Schema 5: file in una sottocartella e aggiornamento della cache
Come procedere quando le icone non stanno nella radice, oppure quando dopo una sostituzione continua a comparire quella vecchia. Poiché le favicon restano fortemente nella cache del browser, cambiare l'URL è il rimedio più sicuro.
<!-- Se i file stanno in un'altra cartella, indicate il percorso esplicitamente -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- Attenzione ai percorsi assoluti nei siti pubblicati in una sottocartella (per esempio /docs/) -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| Adatto a | Distribuzione tramite CDN, siti con gli asset centralizzati e sostituzioni delle icone |
|---|---|
| Nota | La ricerca implicita di /favicon.ico nella radice non può essere reindirizzata altrove: anche mettendo i file in una sottocartella, conviene lasciarne una copia nella radice per non perdere nessun caso. |
Corrispondenza fra i file e i luoghi in cui compaiono
Ecco dove viene usato ciascun file. Non è necessario prepararli tutti: scegliete in base agli ambienti che volete supportare.
| File | Dimensione | Dove viene usato |
|---|---|---|
| favicon.ico | 16 / 32 / 48 px | Scheda del browser, preferiti e barra delle applicazioni di Windows. La radice viene esaminata anche senza alcuna dichiarazione nell'HTML |
| favicon-16x16.png | 16×16 | Scheda del browser (schermi a risoluzione standard) |
| favicon-32x32.png | 32×32 | Scheda del browser (schermi ad alta risoluzione, per esempio Retina) e barra dei preferiti |
| apple-touch-icon.png | 180×180 | Icona sulla schermata home di iOS e iPadOS. Le aree trasparenti vengono riempite di nero |
| android-chrome-192x192.png | 192×192 | Icona sulla schermata home di Android (tramite il manifest) |
| android-chrome-512x512.png | 512×512 | Schermata di avvio della PWA ed elenco delle applicazioni (tramite il manifest) |
| site.webmanifest | — | File di configurazione della PWA: dichiara icone, colore del tema e modalità di avvio |
| favicon.svg | Variabile | Chrome, Firefox ed Edge. Consente di cambiare colore nel tema scuro |
Consigli
- Partendo da un'immagine quadrata di almeno 512×512 px, i contorni reggono anche riducendo a 16 px. Se l'immagine non è quadrata, la funzione di ritaglio di questo strumento permette di estrarne la porzione desiderata.
- Lanczos3 calcola una media pesata dei pixel vicini e allo stesso tempo, grazie alla parte negativa del nucleo, ravviva i bordi. Conserva i contorni meglio del ridimensionamento predefinito del browser e fa la differenza nelle icone con testo o loghi.
- La caratteristica più importante dell'ICO è che può contenere più dimensioni in un unico file. Includendo 16, 32 e 48 px, scheda, preferiti e barra delle applicazioni sceglieranno ciascuno l'immagine più adatta.
- Nelle Apple Touch Icon le aree trasparenti vengono riempite di nero: conviene indicare un colore di sfondo e produrre un PNG opaco. Un margine intorno al 10% evita che la maschera arrotondata di iOS tagli i bordi.
- Anche sostituendo la favicon, la cache del browser resta molto tenace. Se la modifica non compare, provate ad aggiungere all'URL una stringa come
?v=2oppure a forzare il ricaricamento.
Domande frequenti
/favicon.ico è tuttora quello che i browser cercano implicitamente anche senza alcuna indicazione nell'HTML. Lettori di feed RSS, servizi di segnalibri e alcuni crawler prelevano solo l'ICO dalla radice senza analizzare l'HTML: affiancarlo evita di perdere questi casi.<link rel="icon" type="image/svg+xml">. La soluzione più sicura è affiancargli l'ICO e i PNG generati qui, come ripiego per gli ambienti che non supportano l'SVG.
A proposito — la sfida di disegnare in sedici pixel
Nel 1999 Internet Explorer 5 introdusse la possibilità di mostrare una piccola icona accanto ai siti nei preferiti. Il meccanismo era elementare — bastava mettere un file favicon.ico nella radice del sito — e da lì nacque anche il nome, contrazione di «favorite icon». Il tag <link rel="icon"> entrò nelle specifiche HTML solo in seguito, e la ricerca implicita dell'ICO nella radice sopravvive ancora oggi per retrocompatibilità.
Il fatto che l'ICO riprendesse il formato delle icone di Windows si rivelò decisivo. Potendo contenere più risoluzioni in un solo file, permette di preparare disegni completamente diversi per la scheda a 16 px e per la barra delle applicazioni a 48 px. Non è una semplice comodità: su una tela di 16×16 pixel, ridurre meccanicamente un disegno pensato per 48 px fa sparire le linee sottili e rende il testo illeggibile. Gli illustratori di icone di un tempo ridisegnavano a mano ogni dimensione proprio perché non esisteva altra soluzione.
Nella generazione moderna di favicon, al posto del disegno a mano conta quanto è intelligente la riduzione. La semplice media (bilineare) perde il contrasto dei bordi, mentre il sottocampionamento (nearest neighbor) elimina di netto le linee sottili. Il metodo di Lanczos usa un nucleo ottenuto troncando la funzione sinc a un numero finito di lobi: il lobo principale conserva l'informazione originale, mentre i lobi negativi laterali sollevano i bordi. Proprio questa lieve accentuazione dei contorni è ciò che serve nelle icone piccole.
Le richieste sono poi continuate a crescere. Con l'arrivo dell'iPhone nel 2007 si è aggiunta l'Apple Touch Icon (57 px all'inizio, oggi 180), la diffusione delle PWA ha reso necessari i 192 e i 512 px, e ora entrano in gioco anche le favicon SVG e il supporto al tema scuro. Visto dai tempi in cui bastava un file, sembra esagerato: ma significa anche che quelle poche decine di pixel nella scheda del browser passano sotto gli occhi di moltissime persone.