Favicon nei siti web: cos’è e come crearla

Favicon in sintesi

• Definizione: icona quadrata che rappresenta un sito web in schede, preferiti e cronologia del browser.
• Formati accettati: ICO, PNG, SVG e GIF, con PNG e SVG preferiti dai browser moderni.
• Dimensioni di riferimento: da 16×16 px per la scheda del browser fino a 512×512 px per le app web progressive.
• Visibilità in Google: per comparire nei risultati di ricerca la favicon deve essere un multiplo di 48×48 px.
• Inserimento: un tag <link rel="icon"> nella sezione <head> della pagina HTML.
• Creazione: generatori online gratuiti permettono di ottenere tutti i file a partire da un’immagine o da un testo.

Cos’è una favicon

Il termine nasce dall’unione di favorites e icon, cioè “icona dei preferiti”: indica l’immagine quadrata, tipicamente derivata dal logo, che un browser associa in modo univoco a una pagina o a un intero dominio. L’elemento è stato introdotto da Microsoft Internet Explorer 5 nel 1999 e in seguito adottato da tutti i browser principali, diventando uno standard tecnico dei siti web.

A differenza di un’icona generica del sistema operativo, la favicon è legata esclusivamente a un sito web inteso come insieme di pagine pubblicate online e viene richiamata dal browser leggendo un file dedicato o un tag specifico nel codice HTML. Per questo motivo rientra tra gli elementi tecnici di base di qualunque progetto digitale, insieme a struttura delle pagine, meta tag e codice sorgente, ambito più ampio approfondito nella sezione siti web.

Un’icona favicon non va confusa con un logo completo: le dimensioni ridotte impongono una semplificazione grafica, spesso limitata a una lettera, un simbolo o un dettaglio distintivo del marchio, capace di restare leggibile anche a pochi pixel.

Dove si vede la favicon

La favicon compare in quattro punti ricorrenti dell’esperienza di navigazione: nella scheda del browser accanto al titolo della pagina, nella barra o nel menu dei preferiti, nell’elenco della cronologia di navigazione e, su dispositivi mobili, nella schermata iniziale quando il sito viene salvato come collegamento.

Dal 2019 Google mostra l’icona anche accanto all’indirizzo del sito nei risultati di ricerca da mobile e, più di recente, anche da desktop: questo rende la favicon un elemento visibile non solo dentro il browser, ma anche nella pagina dei risultati di ricerca, un ambito diverso da quello del browser inteso come software di navigazione, che va distinto dal motore di ricerca vero e proprio.

Alcuni browser, come Chrome, la mostrano anche nella pagina iniziale tra i siti più visitati, mentre sistemi operativi mobili la utilizzano per generare l’icona dell’app quando un sito viene aggiunto alla schermata home. In assenza del file, il browser sostituisce la favicon con un’icona generica, segnale che l’utente percepisce come incompletezza del sito.

A cosa serve l’icona del sito

La funzione principale è il riconoscimento rapido: con molte schede aperte contemporaneamente, l’occhio individua il sito cercato grazie al colore e alla forma dell’icona, prima ancora di leggere il titolo della pagina. Questo riduce il tempo necessario a ritrovare una scheda e rende la navigazione più ordinata.

Sul piano del marchio, l’icona estende l’identità visiva del sito oltre la singola pagina, comparendo nei preferiti salvati e nella cronologia anche a distanza di tempo dalla visita. Un’icona assente o generica trasmette un’impressione di progetto incompleto, mentre un’icona coerente con i colori e lo stile del sito rafforza la percezione di cura e professionalità.

Rispetto al CTR, la favicon non è un fattore di posizionamento diretto nell’algoritmo di ricerca, ma la sua presenza accanto al risultato nella pagina di ricerca rende l’annuncio più riconoscibile rispetto a un concorrente privo di icona, con un possibile effetto positivo sulla percentuale di clic. L’effetto resta indiretto: non modifica il ranking, ma influisce sulla scelta dell’utente tra risultati simili.

Un ulteriore uso, meno diffuso ma documentato, riguarda la segnalazione di stati particolari del sito: alcuni progetti sostituiscono temporaneamente la favicon per indicare manutenzione, errore o indisponibilità del servizio, sfruttando la visibilità costante dell’icona nella scheda del browser.

Formati e dimensioni della favicon

Una stessa icona deve essere esportata in più risoluzioni per adattarsi a browser e dispositivi diversi.

Il formato storico è ICO, sviluppato da Microsoft: può contenere più risoluzioni in un unico file ed è l’unico formato che i browser riconoscono senza bisogno del tag <link> se collocato nella radice del sito con il nome favicon.ico. I browser moderni supportano anche PNG, leggero e con supporto alla trasparenza, SVG, vettoriale e scalabile senza perdita di qualità, e GIF, oggi poco usato per la scarsa resa a dimensioni ridotte.

Le linee guida di Google Search Central indicano come requisito tecnico un rapporto 1:1 e una dimensione minima di 8×8 px, ma per comparire effettivamente accanto al risultato di ricerca è necessario un file quadrato con lato multiplo di 48 px, nei formati BMP, GIF, ICO, PNG, JPEG, PPM o TIFF. Per approfondire il funzionamento del motore che applica questi requisiti si può consultare la pagina su come funziona il motore di ricerca di Google.

Se la favicon ha uno sfondo trasparente

Se il design prevede uno sfondo trasparente, il file va salvato in PNG con il canale alfa attivato: il formato ICO gestisce la trasparenza in modo meno coerente tra browser diversi, mentre il PNG la mantiene stabile su tutte le piattaforme.

Se il sito ha sia un file ICO sia un file PNG

Se nella root del sito è presente sia favicon.ico sia una favicon in altro formato richiamata via tag, il browser tende a privilegiare la versione ICO: per garantire che venga mostrata l’icona più aggiornata è necessario sostituire entrambi i file o rimuovere quello obsoleto.

Come creare una favicon

La progettazione parte sempre da un’immagine quadrata ad alta risoluzione, da ridurre successivamente.

Il risultato della procedura è un set completo di file immagine, pronti per essere caricati sul server e richiamati dal codice HTML. I passaggi essenziali sono tre: progettare un’immagine quadrata semplice, generare i file nelle dimensioni corrette ed esportarli nei formati richiesti dai diversi dispositivi.

1. Preparare un’immagine quadrata di partenza di almeno 512×512 px, con un design essenziale: poche forme, colori a contrasto netto e nessun dettaglio sottile, perché a dimensioni ridotte linee fini e sfumature diventano illeggibili.
2. Caricare l’immagine, il logo o un testo breve (ad esempio un’iniziale) su un generatore automatico, che produce in automatico le versioni nelle dimensioni standard: 16×16, 32×32, 48×48, 180×180, 192×192 e 512×512 px.
3. Scaricare il pacchetto di file, che comprende tipicamente favicon.ico, una o più PNG per le schede del browser, l’Apple Touch Icon e, per le applicazioni web progressive, un file site.webmanifest con i riferimenti alle icone.
4. Caricare i file ottenuti nella cartella principale (root) dello spazio web, in modo che siano raggiungibili da un indirizzo diretto come /favicon.ico.

Chi parte da zero, senza un logo già pronto, può costruire l’icona partendo da una singola lettera o da un simbolo geometrico: la semplicità resta il criterio guida, perché un’icona con troppi elementi perde leggibilità già a 32 px e diventa indistinguibile a 16 px.

Come inserire la favicon in HTML

Una volta caricato il file sul server, la favicon viene collegata alla pagina tramite un tag <link> inserito nella sezione <head> del documento HTML. La riga minima, valida per il caso più comune con file PNG, è la seguente:

<link rel="icon" href="/favicon.png" type="image/png">

Per il formato ICO storico il tag equivalente è <link rel="icon" href="/favicon.ico" type="image/x-icon">: molti browser riconoscono automaticamente il file se collocato nella root del sito, anche senza il tag esplicito, ma dichiararlo nell’HTML evita ambiguità quando sono presenti più versioni dell’icona.

Varianti per Apple e dispositivi mobili

Per garantire un’icona nitida sulla schermata home di iPhone e iPad si aggiunge un secondo tag dedicato all’Apple Touch Icon, in genere a 180×180 px: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Per le applicazioni web progressive, un file site.webmanifest richiamato con <link rel="manifest" href="/site.webmanifest"> elenca le icone da usare in fase di installazione dell’app, comprese le versioni a 192×192 e 512×512 px richieste da PWA compatibili con Android.

Se la favicon non compare nei risultati di ricerca

Se il file rispetta i requisiti dichiarati ma non viene mostrato nella pagina di ricerca, la causa più comune è una dimensione inferiore al multiplo di 48 px richiesto, oppure un percorso del file non raggiungibile pubblicamente: in questo caso occorre verificare che l’URL dell’icona risponda con codice 200 e che il formato rientri tra quelli accettati.

Favicon su WordPress e altri CMS

Sui sistemi di gestione dei contenuti la favicon, chiamata spesso “icona del sito”, si imposta senza modificare manualmente il codice HTML. Su WordPress l’icona si carica dal pannello di personalizzazione del tema, nella sezione dedicata all’identità del sito, caricando un’immagine quadrata di almeno 512×512 px: la piattaforma genera automaticamente le versioni ridotte per browser e dispositivi mobili. Lo stesso principio, con percorsi diversi, vale per piattaforme come Shopify e Squarespace, dove l’icona si carica dalle impostazioni generali del negozio o del sito.

Quando la favicon fa parte di un progetto più ampio di ottimizzazione tecnica del sito, le indicazioni su come intervenire sugli elementi dell’intestazione delle pagine rientrano nel lavoro più generale descritto in come impostare la SEO su un sito WordPress, di cui l’icona rappresenta un singolo elemento accessorio ma visibile.

Se la favicon non si aggiorna dopo la modifica

Se dopo aver sostituito l’icona dal pannello del CMS il browser continua a mostrare quella precedente, il motivo è quasi sempre la cache: svuota la cache del browser o ricarica la pagina forzando l’aggiornamento (su desktop, combinazione tasti dedicata alla ricarica senza cache) prima di considerare l’icona come non funzionante.

Strumenti gratuiti per creare la favicon

I generatori online gratuiti permettono di ottenere l’intero pacchetto di file partendo da un’immagine, un logo, un testo o un emoji, senza passare per un software di grafica. L’output tipico comprende il file ICO classico, le versioni PNG nelle dimensioni standard, l’Apple Touch Icon e il file di manifest per le applicazioni installabili.

Oltre ai generatori a partire da un’immagine esistente, alcuni strumenti offrono anche editor da zero, con forme, colori e caratteri predefiniti, utili quando non è disponibile un logo già pronto. Esistono inoltre strumenti di verifica che, inserendo l’indirizzo di un sito, controllano quali file favicon sono effettivamente installati e raggiungibili.

Chi vuole generare un’icona partendo da un’immagine creata con strumenti di intelligenza artificiale può farlo normalmente: il punto di attenzione non è il metodo di creazione dell’immagine di partenza, ma l’esportazione finale nei formati e nelle dimensioni descritte in questa pagina, condizione indispensabile perché browser e motori di ricerca la riconoscano.

Verifica e problemi comuni della favicon

Prima di considerare concluso l’inserimento, è utile controllare che il file sia effettivamente raggiungibile all’indirizzo dichiarato nel tag HTML e che risponda con il tipo MIME corretto: un file PNG servito con intestazione errata può non essere riconosciuto da alcuni browser.

Problemi di cache del browser

Il problema più frequente dopo una modifica è la persistenza della vecchia icona in cache: i browser conservano la favicon per periodi relativamente lunghi, quindi la sostituzione del file non sempre produce un effetto immediato senza una ricarica forzata della pagina.

Icona assente o sostituita da un simbolo generico

Se al posto dell’icona compare un simbolo generico (ad esempio un foglio bianco), il file indicato nel tag non è raggiungibile, ha un formato non supportato dal browser in uso oppure il percorso contiene un errore di battitura. La verifica più rapida consiste nell’aprire direttamente l’indirizzo del file dell’icona nel browser: se non si apre, il problema è nel percorso o nel server.

Icona sfocata su schermi ad alta densità

Su schermi ad alta densità di pixel, una favicon pensata solo per 16×16 px appare sfocata se ingrandita dal browser: la soluzione è fornire anche le versioni a 32×32 e 48×48 px, in modo che il browser scelga automaticamente la risoluzione più adatta allo schermo.

Domande frequenti sulla favicon

Cosa vuol dire favicon?

Favicon è la contrazione di “favorites icon”, icona dei preferiti: indica la piccola immagine quadrata che un browser associa a un sito web e che compare in schede, preferiti, cronologia e, in alcuni casi, nei risultati di ricerca.

Come si crea un favicon?

Si parte da un’immagine quadrata semplice di almeno 512×512 px, la si carica su un generatore automatico che produce i file nelle dimensioni standard, quindi si scaricano e caricano i file ottenuti nella cartella principale del sito.

Qual è il formato corretto per una favicon?

Non esiste un unico formato obbligatorio: ICO resta compatibile con tutti i browser senza tag dedicato, mentre PNG e SVG sono oggi i formati più usati per qualità, leggerezza e supporto alla trasparenza o alla scalabilità vettoriale.

Come mettere la favicon su HTML?

Si inserisce un tag <link rel="icon" href="percorso-file" type="tipo-file"> nella sezione <head> della pagina, indicando il percorso del file caricato sul server e il tipo corrispondente al formato scelto.

Come aggiungere una favicon a un sito WordPress?

Si carica l’immagine dal pannello di personalizzazione del tema, nella sezione dedicata all’identità del sito: WordPress genera in automatico le versioni ridotte necessarie per browser e dispositivi mobili.

Qual è un programma gratuito per creare icone?

I generatori online gratuiti permettono di creare l’intero pacchetto di file favicon a partire da un’immagine, un logo o un testo, senza bisogno di software di grafica installato sul computer.

A cosa serve l’icona del sito?

Serve a identificare rapidamente un sito tra più schede aperte, rafforza il riconoscimento del marchio nei preferiti e nella cronologia e rende più riconoscibile il risultato quando compare accanto all’indirizzo nella pagina di ricerca.