Favicon: cosa sono e perché utilizzare le Favorite Icon

La favicon (da favorite icon, icona dei preferiti) è la piccola icona quadrata che rappresenta un sito: la vedi nelle schede del browser, nei preferiti, nella cronologia e accanto al nome del sito nei risultati di Google. Si indica nell'head della pagina con un elemento <link rel="icon">.

È un dettaglio piccolo, ma è l'unica immagine del tuo marchio che compare in ogni risultato di ricerca. Qui vedi dimensioni e formati, il codice da usare, i requisiti di Google e cosa fare quando la favicon non compare.

Cos'è una favicon e dove si vede#

Di solito è una versione ridotta del logo, o una sua parte: l'iniziale, il simbolo, il pittogramma. Compare in:

• schede del browser, accanto al titolo della pagina, dove di norma si vede a 16 x 16 pixel (32 x 32 sugli schermi ad alta densità);
• preferiti e cronologia;
• risultati di Google, accanto al nome del sito, da mobile dal maggio 2019 e poi anche da desktop;
• schermata Home degli smartphone, quando qualcuno salva il sito come collegamento: su iPhone si usa l'icona indicata con apple-touch-icon.

Con molte schede aperte o in una pagina di risultati piena, è spesso la favicon a far riconoscere il sito prima ancora del nome.

Breve storia delle favicon#

Le favicon nascono nel marzo 1999 con Internet Explorer 5 di Microsoft. Il browser cercava un file chiamato favicon.ico nella cartella principale del sito e lo mostrava accanto ai preferiti. All'inizio il file veniva scaricato solo quando qualcuno salvava il sito tra i preferiti, così dai log del server si poteva stimare quante persone lo avevano fatto. Oggi i browser caricano la favicon a ogni visita e quel conteggio non è più possibile.

Già a dicembre 1999 il W3C ha previsto le icone nella raccomandazione HTML 4.01, e nel 2010 è stato registrato il valore rel="icon" basato su HTML5. Da allora non serve più il nome fisso né la cartella principale: l'icona si dichiara nell'head.

Dimensioni e formati#

Non esiste una misura unica: la stessa icona viene mostrata in contesti diversi. Questi sono i riferimenti che contano:

Il consiglio pratico: disegna l'icona in grande, quadrata, e ricavane le versioni piccole controllando che si legga ancora a 16 pixel.

Quanto ai formati, Google accetta tutti quelli validi per le favicon. Lo storico è .ico, che può contenere più dimensioni in un solo file; vanno bene anche .png, .gif e .svg, che scala senza perdere qualità. Se usi l'SVG, tieni comunque un .ico o un .png di riserva per i browser che non lo supportano.

Come aggiungere la favicon al sito#

Con l'HTML#

Carica i file sul sito e dichiarali nell'head di ogni pagina, o almeno della home:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Se ci sono più icone, il browser sceglie la più adatta in base agli attributi type, sizes e media; a parità, usa l'ultima. La vecchia forma rel="shortcut icon" non è più conforme: MDN scrive che non va più usata, anche se Google la accetta ancora per motivi storici.

Con WordPress#

WordPress la chiama icona del sito: si carica dal Customizer, nella sezione dell'identità del sito, con un'immagine quadrata di almeno 512 x 512 pixel. WordPress genera da solo le versioni ridotte e il codice nell'head. Nei temi a blocchi la voce può trovarsi in un punto diverso a seconda della versione, ma il requisito dell'immagine è lo stesso.

Dopo la modifica, svuota la cache del sito e del browser: le favicon restano in memoria a lungo, e spesso "non cambia" vuol dire solo "vedi ancora quella vecchia".

Come far comparire la favicon su Google#

Le linee guida di Google, aggiornate l'8 marzo 2026, in forma di checklist:

1. La favicon è dichiarata nella home page con un elemento link: rel="icon", apple-touch-icon, apple-touch-icon-precomposed o shortcut icon. Il file può stare anche su una CDN.
2. Googlebot-Image può scansionare il file della favicon e Googlebot la home page: nessuno dei due è bloccato nel robots.txt.
3. L'icona è quadrata, di almeno 8 x 8 pixel, meglio oltre 48 x 48.
4. L'URL del file è stabile e non cambia di frequente.
5. L'icona rappresenta il marchio e non è inappropriata: simboli d'odio o immagini pornografiche vengono sostituiti con un'icona predefinita.

Google mostra una sola favicon per nome host: un sottodominio come shop.example.com può avere la sua, una sottocartella come example.com/shop usa quella della home del dominio. Dopo una modifica possono servire da diversi giorni a parecchie settimane; per accelerare puoi chiedere una nuova scansione della home con lo strumento Controllo URL di Search Console, come spiego nella guida su come indicizzare il sito. Anche con tutto in regola, Google precisa che la comparsa non è garantita.

Perché la favicon non compare su Google#

La favicon conta per la SEO?#

Non è un fattore di ranking: un sito senza favicon non scende di posizione, ma nei risultati compare con un'icona generica, meno riconoscibile. Il suo valore è nella riconoscibilità: in una pagina di risultati piena di blocchi, un'icona chiara aiuta chi ti conosce già a sceglierti. Non ci sono però dati pubblici che misurino l'effetto della favicon sui clic, e diffiderei di chi te ne promette.

Le "penalizzazioni" di cui si parla riguardano l'icona, non il sito. Pochi giorni dopo l'arrivo delle favicon nei risultati da mobile, a fine maggio 2019, Google ha sostituito con l'icona predefinita quella di un sito che usava un simbolo nazista. Un consulente SEO, Bill Hartzer, aveva invece provato a usare come favicon l'etichetta "Ad" degli annunci: poteva confondersi con quella di Google Ads ed è stata sostituita. In entrambi i casi il sito non è stato retrocesso: per tornare a mostrare la propria favicon basta sostituirla con una conforme e aspettare una nuova scansione.

Come disegnare una favicon che funziona#

• Semplifica: a 16 pixel un logo con scritte diventa una macchia. Meglio un simbolo o una o due lettere.
• Contrasto: le schede possono essere chiare o scure. Controlla l'icona su entrambi gli sfondi, oppure usa un fondo pieno.
• Riempi il quadrato: niente margini trasparenti enormi, o l'icona sembrerà minuscola accanto alle altre.
• Coerenza: stessi colori del marchio, la stessa icona su sito, social e Profilo dell'attività.
• Prova sul campo: aprila in una scheda tra altre dieci e guardala nei risultati di ricerca da smartphone.

Con l'SVG puoi anche adattare i colori al tema scuro, con una media query prefers-color-scheme dentro il file; non tutti i browser la applicano alle favicon, quindi scegli comunque colori leggibili su entrambi gli sfondi.

La favicon è un controllo di base in ogni analisi tecnica, e si sistema in pochi minuti. Il resto del quadro, cioè come Google legge e mostra il tuo sito, è nelle guide su come funzionano i motori di ricerca e sulla SERP, e per le basi c'è cos'è la SEO. Se stai rifacendo il sito, favicon e identità visiva fanno parte del nostro lavoro di web design.

Vuoi sapere se il tuo sito ha questo e altri problemi tecnici? Richiedi l'audit SEO gratuito: ti mando le 5 cose da sistemare per prime, entro 2 giorni lavorativi.