Favicon deriva da "favorite icon" — l'icona che i browser salvavano insieme ai preferiti. Oggi il concetto è andato molto oltre: il favicon appare nelle schede del browser, nella barra degli indirizzi, nei collegamenti sul desktop, nella schermata home di cellulari iOS e Android, nei risultati di Google, e come icona delle Progressive Web App (PWA). Ogni contesto richiede una dimensione diversa.
L'errore più comune è creare un solo file favicon.ico da 16×16 pixel e considerare il lavoro finito. Su un monitor Retina o su un iPhone, questa icona apparirà sfocata. La soluzione è generare un set completo di dimensioni — cosa che sembra complicata, ma può essere fatta in pochi secondi con lo strumento giusto.
Cos'è il file .ico e quando usarlo
Il formato .ico è il formato originale del favicon, creato da Microsoft negli anni '90. Ha una caratteristica speciale: può contenere più dimensioni all'interno di un unico file — ad esempio, 16×16 e 32×32 contemporaneamente. Il browser sceglie la dimensione più adatta per ogni contesto.
Il favicon.ico è ancora necessario nel 2026 per un motivo specifico: browser vecchi e alcuni crawler dei motori di ricerca provano ad accedere automaticamente al file in /favicon.ico nella radice del sito. Se non esiste, generano un errore 404 non necessario nei log del server. Per questo, anche se usi PNG moderni per tutto, è consigliabile avere un favicon.ico nella radice.
Tabella completa delle dimensioni del favicon
Ecco l'elenco di tutte le dimensioni che un favicon completo dovrebbe coprire nel 2026:
| Dimensione | Formato | Dove viene usato |
|---|---|---|
| 16 × 16 px | .ico / PNG | Scheda del browser (predefinita) |
| 32 × 32 px | .ico / PNG | Collegamento sul desktop (Windows), schede su schermi HiDPI |
| 48 × 48 px | .ico / PNG | Collegamento in Esplora File Windows |
| 57 × 57 px | PNG | iPhone (iOS 1–6, schermi non-Retina) |
| 60 × 60 px | PNG | iPhone (iOS 7+, schermi non-Retina) |
| 72 × 72 px | PNG | iPad (iOS 1–6, schermi non-Retina) |
| 76 × 76 px | PNG | iPad (iOS 7+, schermi non-Retina) |
| 96 × 96 px | PNG | Collegamento in Chrome (Android) |
| 114 × 114 px | PNG | iPhone Retina (iOS 1–6) |
| 120 × 120 px | PNG | iPhone Retina (iOS 7+) |
| 144 × 144 px | PNG | iPad Retina (iOS 1–6), tile Windows 8 |
| 152 × 152 px | PNG | iPad Retina (iOS 7+) |
| 167 × 167 px | PNG | iPad Pro (iOS 9+) |
| 180 × 180 px | PNG | iPhone 6 Plus e versioni più recenti |
| 192 × 192 px | PNG | Android Chrome, PWA (manifest.json) |
| 512 × 512 px | PNG | Splash screen Android Chrome, PWA ad alta risoluzione |
💡 Buona notizia: non devi creare ogni dimensione manualmente. Il Generatore Favicon di ImageTools genera automaticamente tutti questi file a partire da una singola immagine — incluso il .ico con più dimensioni e uno ZIP con tutti i PNG.
Quale immagine usare come base per il favicon
L'immagine di partenza deve avere almeno 512×512 pixel — questa è la dimensione massima necessaria, e partire da un'immagine grande garantisce che le dimensioni minori vengano generate con qualità. Usare un'immagine piccola come base produce icone sfocate nelle dimensioni maggiori.
Formati accettati come input
- PNG con sfondo trasparente — ideale. L'icona resta pulita su qualsiasi colore di sfondo di scheda o schermata home.
- PNG con sfondo pieno — funziona bene se il colore di sfondo si abbina al design del tuo sito.
- JPG — accettato, ma senza supporto alla trasparenza.
- SVG — il miglior punto di partenza se disponibile. Vettoriale, qualsiasi dimensione senza perdita.
Consigli di design per i favicon
Il favicon è uno spazio molto piccolo — la versione 16×16 ha solo 256 pixel in totale. Questo impone restrizioni di design che molti ignorano:
- Usa l'elemento più semplice del tuo marchio. Il logo completo generalmente non funziona a 16px. Preferisci solo l'iniziale, un simbolo isolato o una versione semplificata dell'icona.
- Evita testo sottile. Qualsiasi testo sotto i 32px diventa illeggibile.
- Usa un alto contrasto. Il favicon compete con decine di altre schede aperte — un'icona a basso contrasto scompare visivamente.
- Uno sfondo a colore pieno funziona meglio di uno trasparente in molti casi. Questo garantisce che l'icona risalti sia su schede chiare che scure.
- Testa il risultato a 16px prima di considerare il lavoro concluso. Un design che sembra ottimo a 512px può risultare irriconoscibile a 16px.
Genera il tuo favicon ora — tutte le dimensioni in una volta
Carica la tua immagine e scarica uno ZIP con il .ico e tutti i PNG necessari per browser, iPhone, Android e PWA. Gratis, senza registrazione.
Crea favicon gratisCome installare il favicon sul tuo sito
Dopo aver generato i file, devi referenziarli nell'<head> dell'HTML. Il codice completo consigliato per il 2026 è:
<!-- Favicon di base per i browser -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon (iPhone e iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android e PWA -->
<link rel="manifest" href="/site.webmanifest">Il file favicon.ico deve stare nella radice del sito (la stessa cartella dell'index.html). Gli altri file PNG possono stare nella radice o in una sottocartella, purché i percorsi nell'HTML siano corretti.
Il file site.webmanifest
Per le PWA e perché Android Chrome riconosca correttamente la tua icona, serve un file site.webmanifest nella radice del sito. Il contenuto di base è:
{
"name": "Nome del Tuo 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"
}📦 Lo ZIP del Generatore di Favicon include già il file site.webmanifest preconfigurato con i percorsi corretti — basta scompattarlo e caricare i file nella radice del tuo sito.
Come installarlo su piattaforme specifiche
WordPress
In WordPress, il favicon è chiamato "icona del sito". Per configurarlo: vai su Aspetto → Personalizza → Identità del Sito e clicca su "Seleziona Icona del Sito". WordPress genera automaticamente le dimensioni necessarie a partire dall'immagine che carichi — basta usare un'immagine quadrata di almeno 512×512 pixel.
Shopify
In Negozio Online → Preferenze, scorri fino a "Icona del negozio" e carica un'immagine quadrata di almeno 512×512 pixel in PNG o JPG.
Wix
In Impostazioni → Identità del Marchio → Favicon. Usa un'immagine quadrata in PNG o JPG.
Squarespace
In Design → Stile del Browser, sezione "Favicon". Consigliato: PNG quadrato da 100×100 pixel (Squarespace fa il resto).
HTML/CSS puro o framework
Metti tutti i file generati nella radice del progetto e aggiungi i tag <link> mostrati sopra nell'<head> di ogni pagina — o nel layout di base, se usi un framework come Next.js, Nuxt o simili.
Verificare se il favicon funziona
Dopo l'installazione, apri il sito in una scheda del browser e verifica se l'icona appare nella scheda. Se non compare subito, prova a:
- Svuotare la cache del browser (Ctrl+Shift+R su Windows, Cmd+Shift+R su Mac).
- Aprire in una scheda in incognito — che non usa la cache.
- Attendere qualche minuto, poiché i browser tendono a mettere in cache i favicon per periodi variabili.
- Verificare che il percorso del file nell'HTML sia corretto e che il file esista davvero sul server.