Basta un solo file favicon.ico?

Di solito sì per i browser desktop, purché contenga le dimensioni 16, 32 e 48 px. Ma la schermata Home dell'iPhone e l'avvio delle app su Android richiedono file PNG separati, quindi è meglio preparare anche quelli.

Perché la mia nuova favicon non compare?

Quasi sempre è colpa della cache. Apri la pagina in una finestra privata, cancella i dati di navigazione, oppure rinomina il file o aggiungi il parametro ?v=2. I motori di ricerca possono impiegare diversi giorni o più per aggiornare la propria copia dell'icona.

Una favicon può essere un JPG?

Alcuni browser lo accettano, ma il JPG non ha la trasparenza e non è la scelta normale. Usa invece PNG, ICO o SVG.

Come creare una favicon: dimensioni, formati e codice HTML

La favicon è la minuscola icona del sito che compare nelle schede del browser, tra i preferiti e nei risultati di ricerca. Sembra un dettaglio, ma un sito che ne è privo dà l'impressione di essere incompiuto, e una dimensione o un formato sbagliati possono rendere l'icona sfocata. In questa guida spieghiamo quali dimensioni servono, quale formato scegliere e quale codice inserire nella pagina.

Cos'è una favicon e dove compare

Una favicon (abbreviazione di favorite icon) è una piccola immagine quadrata che i browser mostrano accanto al titolo della pagina nella scheda, nell'elenco dei preferiti e nella cronologia. Su dispositivi mobili anche i risultati di ricerca di Google mostrano l'icona del sito accanto all'indirizzo, quindi una favicon chiara aiuta le persone a riconoscere il tuo sito.

Se non dichiari alcuna icona, i browser in genere provano a recuperare /favicon.ico dalla radice del sito. Quando manca, mostrano un simbolo generico, come un globo o una pagina vuota.

Quali dimensioni servono

Non esiste una dimensione universale, perché luoghi diversi usano file diversi. In pratica basta un piccolo insieme, e puoi prepararlo tutto a partire da un unico PNG quadrato di almeno 512 px per lato.

Dimensione	Utilizzo
16x16 px	Scheda del browser (schermi a densità standard)
32x32 px	Scheda su schermi ad alta densità, barra delle applicazioni
48x48 px	Alcuni browser e motori di ricerca, collegamenti di Windows
180x180 px	apple-touch-icon, quando un sito viene aggiunto alla schermata Home di un iPhone o iPad
192x192 px	Web manifest, schermata Home di Android
512x512 px	Web manifest, schermate di avvio e icone di app più grandi

ICO, PNG o SVG

L'ICO è un vecchio formato contenitore che può racchiudere più dimensioni (per esempio 16, 32 e 48 px) in un solo file. Tutti i browser lo supportano, quindi /favicon.ico è ancora utile come soluzione di riserva.

Il PNG è semplice e affidabile: è adatto alle versioni da 32, 180, 192 e 512 px e supporta la trasparenza. L'SVG è un formato vettoriale supportato dai browser moderni: un unico file resta nitido a qualsiasi dimensione e può perfino adattarsi alla modalità scura. Tuttavia Safari e alcuni strumenti meno recenti gestiscono le favicon SVG solo in parte, quindi l'approccio più sicuro è combinarli: ICO come riserva, PNG per le icone Apple e per il manifest, e SVG come extra facoltativo.

Come creare una favicon da un PNG

Parti da un'immagine quadrata, idealmente di 512x512 px o più, con un disegno chiaro e semplice. Se hai solo un JPG, puoi convertirlo prima in PNG, così in un secondo momento potrai aggiungere uno sfondo trasparente con un editor di immagini.

Prepara un PNG quadrato con un logo semplice o una sola lettera.
Convertilo in ICO con uno strumento da PNG a ICO e salvalo come favicon.ico.
Salva a parte copie PNG a 180x180 (apple-touch-icon.png), 192x192 e 512x512 per il web manifest.
Carica i file nella radice del sito e aggiungi i tag HTML nell'<head>.

I tag HTML da aggiungere

Inserisci queste righe nell'<head> della tua pagina (adatta i percorsi a dove si trovano i tuoi file):

In site.webmanifest, sotto icons, elenca i file PNG da 192x192 e 512x512. Se non hai un SVG, salta semplicemente quella riga.

Errori comuni

Immagine non quadrata: il browser la schiaccia o la ritaglia e l'icona appare deformata. Parti sempre da un quadrato.
Troppi dettagli: a 16x16 px testi piccoli e ombre diventano una macchia. Usa una forma semplice, colori decisi e un forte contrasto.
Sorgente troppo piccola: ingrandire un'immagine piccola la rende sfocata. Ridurne una grande è molto più sicuro.
Sfondo trasparente su una scheda scura: un logo scuro può sparire. Controlla sia con il tema chiaro sia con quello scuro, oppure aggiungi un colore di sfondo.
Cache: i browser conservano le favicon con ostinazione, quindi dopo la modifica può continuare a comparire la vecchia icona. Prova in una finestra privata, fai un aggiornamento forzato (Ctrl+F5) oppure aggiungi una versione come /favicon.ico?v=2.

Un esempio completo dall'inizio alla fine

Supponiamo di avere un logo PNG di 1024x1024 px e di volere un set completo di icone per il tuo sito. Per prima cosa guarda il logo ridotto a 16x16 px: riconosci ancora la forma? In caso contrario, crea una versione semplificata, per esempio solo la prima lettera su fondo uniforme. Solo dopo esporta le varie dimensioni.

Poi prepara i file: favicon.ico (16, 32 e 48 px in un solo file), apple-touch-icon.png (180x180), icon-192.png e icon-512.png. Sono quattro file, sufficienti per quasi ogni situazione. Caricali nella radice del sito, aggiungi i tag nell'<head> e apri la pagina in una finestra privata per verificare il risultato.

Come verificare che tutto funzioni

Apri direttamente https://tuo-sito/favicon.ico nel browser: devi vedere l'icona, non un errore 404.
Negli strumenti per sviluppatori (F12, scheda Rete) ricarica la pagina e verifica che le richieste dell'icona restituiscano lo stato 200.
Guarda la scheda sia con il tema chiaro sia con quello scuro del browser: il logo deve restare leggibile in entrambi.
Su uno smartphone, aggiungi il sito alla schermata Home e controlla che venga mostrata l'icona da 180 px e non uno screenshot della pagina.
Assicurati che site.webmanifest sia un JSON valido e che i percorsi al suo interno corrispondano a file reali.