Come aggiungere un favicon in HTML (e quali tag rel usare)

Aggiungere un favicon al tuo sito web dovrebbe essere una delle operazioni più semplici nello sviluppo web, eppure mette in difficoltà gli sviluppatori più spesso di quanto ci si aspetti. Tra consigli contrastanti su quali tag <link> usare, valori confusi dell'attributo rel e browser che memorizzano ostinatamente la vecchia icona nella cache, far apparire un favicon può sembrare un gioco di indovinelli.

La verità è che la configurazione del favicon per la maggior parte dei siti web può essere ridotta a un singolo file e un singolo tag HTML. Questa guida taglia il rumore e ti dà esattamente ciò di cui hai bisogno: la configurazione minima pratica, le varianti del tag rel più utili e istruzioni chiare per affrontare i problemi di cache che rendono invisibile il tuo nuovo favicon.

Se non hai ancora un file favicon.ico, creane uno con Any2ICO in meno di un minuto. Accetta PNG, SVG, JPG, WebP e altri formati, e produce un file ICO multi-dimensione che funziona ovunque. Poi torna qui per collegarlo al tuo HTML.

La configurazione favicon più semplice

Prima di addentrarci nelle varianti dei tag e nei casi limite, ecco l'approccio che funziona per la stragrande maggioranza dei siti web. Richiede un file e una riga di HTML.

Posiziona favicon.ico nella radice del tuo dominio. Carica o distribuisci il tuo file favicon.ico in modo che sia accessibile all'indirizzo https://tuodominio.com/favicon.ico. Questo è il percorso che i browser controllano per impostazione predefinita dalla fine degli anni '90. Anche senza tag HTML che lo indichino, la maggior parte dei browser troverà e visualizzerà automaticamente un favicon in questa posizione. Questa convenzione è incorporata nel comportamento dei browser e non cambierà.

Aggiungi un tag link nel head del tuo HTML. Sebbene la convenzione del percorso radice funzioni da sola, aggiungere un tag esplicito elimina ogni ambiguità e assicura un comportamento coerente tra browser, sottodomini e applicazioni a pagina singola in cui la radice del documento potrebbe non corrispondere direttamente alla radice del server.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Page Title</title>
  <link rel="icon" href="/it/favicon.ico" sizes="any">
</head>
<body>
  <!-- your content -->
</body>
</html>

Quel singolo tag <link> è sufficiente per tutti i principali browser: Chrome, Firefox, Safari, Edge e anche le versioni legacy di Internet Explorer. L'attributo sizes="any" indica al browser che il file ICO contiene più risoluzioni e dovrebbe selezionare la più appropriata per il contesto corrente, che si tratti di un'icona di scheda 16x16 o di un'icona di preferiti 32x32.

Questa è la configurazione che consigliamo per la maggior parte dei siti web. È semplice, affidabile e universalmente supportata. Puoi fermarti qui e il tuo favicon funzionerà correttamente in praticamente ogni scenario.

Cache e "favicon non visualizzato"

Hai pubblicato il tuo nuovo favicon, aggiornato la pagina, e la vecchia icona ti fissa ancora dalla scheda del browser. Questo non è un bug nel tuo codice. È quasi certamente un problema di cache, e di gran lunga la ragione più comune per cui gli sviluppatori pensano che la loro configurazione del favicon sia sbagliata quando in realtà funziona perfettamente.

I browser memorizzano i favicon nella cache in modo aggressivo. A differenza delle normali risorse della pagina, i favicon vengono spesso memorizzati separatamente e per periodi molto più lunghi. Chrome, per esempio, archivia i favicon in un database dedicato che non risponde sempre a un normale aggiornamento della pagina. Firefox e Safari hanno un comportamento simile. Questo significa che anche dopo aver sostituito il file sul server, il browser potrebbe continuare a visualizzare la vecchia icona per ore o addirittura giorni.

Aggiornamento forzato: Premi Ctrl+Shift+R (Windows/Linux) o Cmd+Shift+R (macOS) per bypassare la cache e ricaricare tutte le risorse dal server. Questo funziona per la maggior parte delle risorse della pagina ma non sempre svuota specificamente la cache dei favicon.

Finestra in incognito: Apri il tuo sito in una finestra di navigazione privata o in incognito. Questa parte con una cache completamente vuota e caricherà il favicon direttamente dal server. Se vedi il favicon corretto in modalità incognito, la tua configurazione è corretta e la sessione di navigazione normale ha semplicemente bisogno di tempo per recepire la modifica.

Svuota la cache del browser manualmente: Se la modalità incognito conferma il nuovo favicon ma la tua sessione normale mostra ancora quello vecchio, svuota le immagini e i file memorizzati nella cache del tuo browser. In Chrome, vai su Impostazioni, Privacy e sicurezza, Cancella dati di navigazione e seleziona Immagini e file memorizzati nella cache. Dopo aver svuotato, ricarica il tuo sito.

Aggiungi una query string per forzare il rinnovo della cache: Come misura temporanea durante lo sviluppo, puoi aggiungere una query string per forzare il browser a trattare il favicon come una nuova risorsa: <link rel="icon" href="/it/favicon.ico?v=2" sizes="any">. Incrementa il numero di versione ogni volta che aggiorni il favicon. Rimuovi la query string una volta che sei soddisfatto dell'icona, oppure mantienila come strategia di versionamento permanente.

Dimensioni e scelta dei file: ICO vs PNG

Dovresti usare un file ICO, un file PNG o entrambi? La risposta dipende da quanta complessità vuoi nella tua configurazione e quali browser devi supportare.

ICO è la scelta universale. Il formato ICO è stato il formato favicon standard da quando Internet Explorer 5 ha introdotto i favicon nel 1999. Ogni browser che supporta i favicon supporta ICO. Un singolo file ICO può contenere più dimensioni (16x16, 32x32, 48x48 e altre), così il browser ha sempre la risoluzione giusta disponibile senza che tu debba mantenere file separati per ogni dimensione. Per semplicità e massima compatibilità, ICO è la scommessa più sicura.

PNG è un'alternativa moderna. Tutte le versioni attuali di Chrome, Firefox, Safari e Edge supportano i favicon PNG attraverso il tag <link rel="icon" type="image/png">. I favicon PNG sono leggermente più semplici da creare (un singolo file PNG a una dimensione) ma hai bisogno di un file e un tag separati per ogni dimensione che vuoi fornire. Questo può significare due o tre tag link aggiuntivi nel head del tuo HTML.

SVG è l'opzione più recente. I favicon SVG sono supportati in Chrome, Firefox e Edge, ma non in Safari all'inizio del 2025. Un favicon SVG scala perfettamente a qualsiasi dimensione, il che è attraente per i display ad alta risoluzione. Tuttavia, la mancanza di supporto in Safari significa che hai comunque bisogno di un fallback ICO o PNG.

Per la maggior parte dei siti web, consigliamo l'approccio pragmatico: usa un file ICO multi-dimensione come favicon principale e opzionalmente aggiungi un'icona PNG o SVG come miglioramento. Questo ti dà compatibilità universale attraverso il file ICO e ottimizzazione moderna attraverso i formati aggiuntivi. Per un'analisi dettagliata di quali dimensioni includere e perché, consulta la nostra guida dimensioni dei favicon spiegate.