Favicon:
cos’è, a cosa serve e quali caratteristiche ha

La favicon è una piccola icona che identifica visivamente un sito o una pagina web. Compare nelle schede del browser, il programma usato per navigare, e nei segnalibri; può apparire anche nei risultati di ricerca, aiutando a riconoscere il sito.

Cosa significa favicon e quali sono le sue origini?

Il termine favicon deriva dall’unione delle parole inglesi favorite e icon, cioè “icona dei preferiti”. Il nome custodisce la funzione originaria: distinguere i siti salvati nell’elenco dei preferiti chiamati anche segnalibri.

Nel 1998 l’ingegnere Microsoft Bharat Shyam mostrò a Ray Sun, allora nel gruppo di Internet Explorer, un prototipo in cui l’aggiunta di un sito ai preferiti faceva comparire un’icona accanto al suo nome. È lo stesso Ray a ricordarlo nel suo racconto delle origini della favicon.

La funzione entrò in Internet Explorer 5, la cui versione finale fu distribuita il 18 marzo 1999.

Come si è evoluto l’uso delle favicon?

Dai preferiti, la favicon si estese alle schede e alla barra degli indirizzi.

Questi usi sono descritti nella guida in bozza sulle favicon che Karl Dubost avviò il 24 ottobre 2005 per il W3C (World Wide Web Consortium), l’organizzazione che sviluppa gli standard del web.

Il 22 maggio 2019 Google annunciò le favicon nei risultati da dispositivi mobili, accanto al nome del sito. Nel gennaio 2020 la novità raggiunse i computer e nello stesso mese Google avviò ulteriori sperimentazioni sulla presentazione dei risultati.

L’8 marzo 2023 ha annunciato il nuovo design con nome del sito e favicon nella ricerca da computer. La piccola icona guadagna così il suo posto in prima fila nelle SERP aiutando così a riconoscere il sito prima ancora di aprire la pagina.

Oggi è presente nei risultati di ricerca sia da desktop che da mobile.

Dove compare la favicon e a cosa serve?

La favicon è facoltativa, ma diventa utile quando molte schede aperte del browser lasciano poco spazio ai titoli: il simbolo aiuta a ritrovare la pagina desiderata. Nei segnalibri e nella cronologia dei browser che la mostrano, permette di riconoscere le pagine già visitate.

In Chrome l’icona può comparire accanto ai siti suggeriti nella barra degli indirizzi, mentre digitiamo. Accanto all’indirizzo della pagina già aperta troviamo invece controlli e informazioni sul sito e sulla connessione. La favicon, pur rappresentando un’immagine del marchio, non certifica la sicurezza del sito.

Una persona può riconoscere lo stesso sito nei risultati di Google e ritrovarlo, in seguito, fra i preferiti. La favicon collega visivamente questi momenti del customer journey, il percorso delle interazioni fra una persona e un’azienda, e contribuisce all’e-branding, la costruzione dell’identità del marchio online.

Che differenza c’è tra favicon, logo e icone delle app?

Uno stesso marchio può comparire in immagini simili, destinate però a spazi diversi. Per distinguerle conviene considerare la funzione che svolgono sullo schermo.

Favicon e logo del sito

Il logo, il segno grafico che identifica un marchio, può comparire su una confezione come su un sito.

La favicon rappresenta il sito negli spazi di navigazione: se il logo è compatto, le immagini possono coincidere; un nome lungo può invece lasciare posto a un’iniziale.

Una favicon originale può diventare un segno distintivo autonomo con implicazioni per la tutela del marchio. Lo studio AJ Park, specializzato in proprietà intellettuale, esamina questo aspetto in un’analisi su favicon e brand protection, riferita all’Australia.

Per lo studio, una favicon che semplifica un marchio già registrato, potrebbe giovare già della registrazione esistente del marchio, ma, viste le oltre 16 miliardi di ricerche giornaliere che vengono effettuate su Google e l’inevitabile esposizione visiva offerta grazie alla favicon, potrebbe essere opportuno, in ottica brand protection, valutare una registrazione dedicata.

Favicon, Apple touch icon e icone delle web app

L’Apple touch icon è l’immagine con cui un sito si presenta sulla schermata principale, detta Home, di iPhone o iPad. Può identificare un collegamento alla pagina oppure una web app (un’applicazione basata sulle tecnologie del web).

Le web app installabili hanno icone per l’avvio, per esempio sulla schermata principale di Android. Queste immagini possono riprendere il disegno della favicon; quest’ultima identifica invece il sito nelle schede e negli altri spazi di navigazione.

Quali caratteristiche rendono riconoscibile una favicon?

Le dimensioni ridotte rendono particolarmente evidenti i limiti del disegno. Leggibilità e coerenza visiva, fra le caratteristiche di un sito web efficace, devono conservarsi anche in questo piccolo spazio.

Semplicità e leggibilità in piccolo

Nel momento in cui il campo pittorico si riduce e il disegno viene inevitabilmente rimpicciolito, linee troppo sottili possono scomparire e dettagli vicini possono confondersi.

Conta quindi la forma complessiva: è come osservare un’insegna da lontano quando i particolari si perdono ma il profilo rimane distinguibile.

Anche il margine libero attorno al segno contribuisce a separarlo dagli elementi vicini.

La riconoscibilità dipende poi dai tratti che collegano il segno a uno specifico marchio: una lettera nitida ma generica può assomigliare alle icone di molti altri siti.

Quando un restyling, il rinnovamento del sito web, modifica l’identità visiva, anche la favicon rientra nell’aggiornamento.

Colori, contrasto e sfondo trasparente

I colori richiamano il marchio mentre il contrasto permette di distinguere il disegno dallo sfondo. Un simbolo chiaro può risaltare su una scheda scura e quasi scomparire su una bianca.

Lo sfondo trasparente lascia vedere la superficie sottostante: il colore che circonda il simbolo dipende così dallo sfondo della scheda. La trasparenza, quindi, richiede attenzione al contrasto sia nella modalità chiara sia in quella scura del browser.

Quali dimensioni e formati ha una favicon?

Per descrivere un’icona occorre distinguere quanto spazio occupa sullo schermo dalle caratteristiche del file. Dimensioni e formato rispondono a esigenze diverse, legate alla destinazione.

Dimensioni della favicon: pixel e proporzioni

Le misure 16 × 16 e 32 × 32 pixel sono comuni: indicano quanti punti compongono l’immagine in larghezza e in altezza.

Un’immagine da 32 × 32 pixel può occupare sullo schermo lo stesso spazio di una da 16 × 16. I pixel aggiuntivi permettono di conservare più dettagli sugli schermi ad alta densità che concentrano più punti nella stessa area: è come comporre un mosaico con tessere più piccole.

I requisiti dell’immagine cambiano secondo la destinazione:

• WordPress, la piattaforma per creare e gestire siti, richiede almeno 512 × 512 pixel per l’”icona del sito”, da cui ricava versioni ridotte.
• Ricerca Google: occorre un’immagine quadrata di almeno 8 × 8 pixel anche se si raccomandano dimensioni superiori a 48 × 48.

Il file quadrato può subire un ritaglio circolare nell’interfaccia. John Mueller di Google raccomanda favicon adatte a questo ritaglio: i dettagli vicini agli angoli rischiano altrimenti di essere tagliati.

Favicon.ico: nome del file e formato ICO

favicon.ico è il nome convenzionale del file storicamente associato all’icona di un sito.

L’estensione .ico indica un formato che può contenere più dimensioni della stessa icona fra le quali il browser sceglie quella più adatta.

“Favicon” descrive la funzione dell’immagine; ICO il modo in cui viene salvata.

Il file può avere anche un altro nome o formato. La pagina può indicarlo esplicitamente attraverso il suo URL (Uniform Resource Locator), cioè l’indirizzo dell’immagine nel World Wide Web (WWW). Questo riferimento compare nell’HTML (HyperText Markup Language), il linguaggio che descrive la struttura della pagina, e può rimandare anche a un file ICO.

In assenza di questo riferimento, lo standard HTML consente al browser di cercare il file all’indirizzo /favicon.ico del sito.

Favicon PNG e SVG: formati e compatibilità

PNG e SVG sono formati di immagine che rappresentano il disegno in modi diversi:

• PNG (Portable Network Graphics) è un formato raster, basato su una griglia di pixel. Supporta la trasparenza e comprime il file senza scartare informazioni dell’immagine. Un ingrandimento non aggiunge dettagli: oltre una certa misura i contorni possono apparire sfocati o a scalini.
• SVG (Scalable Vector Graphics) è un formato vettoriale: descrive il disegno attraverso forme geometriche come ad esempio un cerchio tramite il centro e il raggio. Il browser può così ricostruirle alla dimensione richiesta.

La compatibilità delle favicon dipende anche dal browser: Safari 26, pubblicato il 15 settembre 2025, ha introdotto il supporto alle favicon SVG.

Nel confronto seguente il dettaglio è ingrandito per mostrare la differenza tra una griglia di pixel e una forma vettoriale. La resa del PNG dipende dalla risoluzione del file di partenza.

Il confronto riguarda il modo in cui il file rappresenta il disegno. La compatibilità di un formato nel browser va distinta dai requisiti previsti per la favicon nei risultati di ricerca.

Per la ricerca Google, PNG e ICO sono ammessi; SVG non compare nell’elenco dei formati compatibili. La documentazione aggiornata ad agosto 2026 ha reso esplicito l’elenco dei formati supportati:

• BMP,
• GIF,
• ICO,
• PNG,
• JPEG,
• PPM,
• TIFF.

Favicon su Google: risultati organici, annunci e SEO

La SEO (Search Engine Optimization) riguarda l’ottimizzazione per i motori di ricerca. In questo ambito, il ruolo della favicon va compreso distinguendo la presentazione dei risultati dal posizionamento e dai contenuti pubblicitari.

La favicon del sito nei risultati organici

Nei risultati organici, quelli non pubblicitari, Google ricava il riferimento alla favicon dalla homepage, la pagina iniziale del sito.

Ammette una sola favicon per hostname, il nome che identifica il sito nell’indirizzo:

• example.com e shop.example.com sono hostname diversi e possono avere icone differenti.
• example.com/blog è una sezione dello stesso sito e condivide la favicon di example.com.

Nel browser, singole pagine dello stesso sito possono avere icone differenti: ciascuna pagina può indicare la propria nell’HTML. Il limite descritto sopra riguarda quindi la presentazione nei risultati di Google.

Le linee guida di Google richiedono un indirizzo stabile dell’immagine e l’accesso dei programmi automatici del motore di ricerca: Googlebot deve poter leggere la homepage e Googlebot-Image raggiungere la favicon.

Per recepire una modifica, Google deve rileggere la homepage: prima della nuova scansione possono trascorrere diversi giorni o settimane. Anche rispettando i requisiti, la visualizzazione non è garantita.

Favicon e logo negli annunci Google Ads

Negli annunci di Google Ads, la piattaforma pubblicitaria di Google, può comparire il logo dell’attività insieme alle informazioni sull’inserzionista. Il disegno può coincidere con quello della favicon; la sua visualizzazione segue però requisiti specifici per gli annunci.

Favicon, SEO e CTR

Il CTR (Click-Through Rate), o tasso di clic, esprime il rapporto percentuale fra clic ricevuti e visualizzazioni del risultato: 5 clic su 100 visualizzazioni corrispondono a un CTR del 5%.

Una favicon familiare può aiutare a riconoscere il sito, ma da ciò non consegue una matematico aumento automatico dei clic o del posizionamento.

Per un consulente SEO, un’eventuale variazione del CTR va interpretata considerando anche altri fattori come il posizionamento nei risultati di ricerca, la capacità attrattiva espressa da meta title e meta description e dalla tipologia di risultato organico restituito in base alla ricerca fatta dall’utente: attribuirla alla sola icona richiederebbe una verifica specifica.

Esempi di favicon

Alcune favicon condensano l’identità di un marchio in un’iniziale o in un simbolo. Altre aggiungono informazioni sul servizio, aggiornandosi mentre lo usiamo.

Favicon con iniziali e simboli del marchio

La G di Google rappresenta il marchio negli spazi in cui il nome completo sarebbe ingombrante. Nel progetto d’identità visiva del 2015, Google aumentò lo spessore della lettera per renderla leggibile in piccolo. Ravvivò inoltre il rosso, il verde e il giallo: accostandosi, i colori tendevano ad apparire più scuri.

Il 29 settembre 2025 Google ha annunciato l’adozione di una G con colori sfumati come icona aziendale, mantenendo la lettera e i quattro colori caratteristici.

Alla Columbia University, la maggior parte delle scuole del campus di Morningside usa la corona moderna dell’ateneo. Columbia College e Columbia Engineering mantengono varianti storiche: il simbolo può così esprimere l’appartenenza all’università e l’identità di una sua componente.

Favicon dinamiche: l’esempio storico di Gmail

Il 25 gennaio 2011 Gmail presentò Unread message icon, una funzione sperimentale che mostrava nella favicon il numero dei messaggi non letti. Era utile soprattutto nelle schede fissate di Chrome, ridotte alla sola icona: il conteggio si poteva leggere senza passare alla scheda della posta.

Questo esempio illustra il significato di favicon dinamica: un’icona che si aggiorna quando cambia un’informazione del servizio.

Una favicon animata riproduce invece una sequenza di immagini, anche senza nuovi dati da mostrare. Nei browser compatibili può usare il formato GIF (Graphics Interchange Format), che può contenere più fotogrammi in un solo file.