Introduzione
Le favicon sono piccole, ma hanno un impatto enorme sull’identità visiva di un sito. Compaiono nella scheda del browser, nei preferiti, nella cronologia e, in molti casi, quando una pagina viene salvata nella schermata home o condivisa su dispositivi mobili. Per questo motivo, gestirle bene non significa solo “mettere un’icona”, ma progettare una strategia coerente per più contesti e più dispositivi.
In questo tutorial ci concentriamo su un aspetto molto pratico: come definire correttamente le icone del sito in HTML usando i tag <link>, con particolare attenzione all’ordine, ai formati e alla compatibilità. È un sotto-argomento utile perché spesso i problemi non dipendono dall’icona in sé, ma da come viene dichiarata nel documento, da un percorso errato o da una scelta poco chiara tra più file disponibili.
L’obiettivo è costruire una configurazione pulita e moderna, adatta a un sito reale, senza complicazioni inutili.
Codice completo
<!-- Favicon principale in formato SVG per browser moderni -->
<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml">
<!-- Fallback PNG per browser che non supportano SVG come icona -->
<link rel="icon" href="/assets/icons/favicon-32.png" type="image/png" sizes="32x32">
<!-- Favicon classica ICO per massima compatibilità -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Icona per dispositivi Apple -->
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" sizes="180x180">
<!-- Manifest per PWA e integrazione avanzata con il sistema -->
<link rel="manifest" href="/site.webmanifest">
<!-- Colore della barra del browser su alcuni dispositivi mobili -->
<meta name="theme-color" content="#1e3a8a">Spiegazione
Il blocco di codice sopra rappresenta una configurazione realistica e ben bilanciata. Vediamola pezzo per pezzo.
<link rel="icon"> con SVG
La prima riga usa un file SVG come favicon principale:
<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml">SVG è una scelta eccellente perché è vettoriale, quindi resta nitido anche su schermi ad alta densità. Inoltre, pesa spesso meno di un PNG equivalente. Tuttavia, non tutti i browser o i contesti lo gestiscono allo stesso modo, quindi è prudente affiancargli un fallback.
Fallback PNG
La seconda riga introduce un PNG da 32x32 pixel:
<link rel="icon" href="/assets/icons/favicon-32.png" type="image/png" sizes="32x32">Questo file è utile per browser che non interpretano l’SVG come icona oppure per ambienti in cui è preferibile un formato raster tradizionale. Il valore sizes="32x32" aiuta il browser a capire la dimensione disponibile.
ICO per compatibilità estesa
La terza riga punta al file ICO:
<link rel="icon" href="/favicon.ico" sizes="any">Il formato ICO è storico ma ancora molto utile. Può contenere più immagini al suo interno e viene riconosciuto bene da moltissimi browser. Il valore sizes="any" segnala che il file può adattarsi a varie dimensioni, una soluzione pratica quando vuoi mantenere la massima compatibilità.
Icona Apple
La riga seguente serve per i dispositivi Apple:
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" sizes="180x180">Questa icona viene usata quando l’utente aggiunge il sito alla schermata Home. In questi casi, il browser non si limita alla favicon standard, ma cerca un’icona più grande e più adatta all’interfaccia del sistema operativo. Un file da 180x180 pixel è una scelta comune e sicura.
Manifest e theme-color
Il file manifest è fondamentale se il sito ha una logica da Progressive Web App o vuole offrire un’integrazione più ricca con il sistema:
<link rel="manifest" href="/site.webmanifest">Nel manifest puoi definire altre icone, dimensioni multiple, tipo di visualizzazione e nome dell’app. Anche se il tutorial è centrato su HTML, è importante ricordare che il manifest completa il lavoro iniziato con i tag <link>.
Infine, il meta tag theme-color permette di personalizzare il colore di alcune barre del browser su mobile:
<meta name="theme-color" content="#1e3a8a">Non è una favicon, ma fa parte della stessa esperienza visiva del sito e contribuisce alla coerenza del brand.
Best practice
- Usa percorsi chiari e coerenti: preferisci percorsi assoluti dal root del sito, come /assets/icons/..., per ridurre errori quando cambi cartelle o pagine.
- Definisci un ordine intelligente: metti prima il formato più moderno e poi i fallback. In questo modo il browser sceglie il file più adatto tra quelli supportati.
- Non affidarti a una sola icona: una configurazione robusta include almeno un formato moderno, un fallback PNG e, se possibile, un file ICO.
- Ottimizza le dimensioni reali: evita immagini troppo grandi o non proporzionate. Le favicon devono essere leggibili anche a dimensioni minime.
- Controlla la trasparenza: se il logo lo richiede, usa sfondi trasparenti per evitare bordi strani su temi chiari e scuri.
- Verifica la cache del browser: le favicon vengono spesso memorizzate a lungo. Dopo una modifica, può essere necessario svuotare la cache o cambiare nome file per vedere subito l’aggiornamento.
- Non duplicare inutilmente i file: crea una strategia ordinata, con pochi asset ben pensati, invece di caricare molte icone quasi identiche.
- Testa su più dispositivi: controlla il risultato in browser desktop, mobile e, se possibile, su iOS e Android.
Riepilogo
Gestire bene le icone del sito in HTML significa andare oltre il semplice inserimento di una favicon. Una configurazione efficace prevede una gerarchia di file: un formato moderno come SVG, un fallback PNG, un file ICO per compatibilità e le icone dedicate ai dispositivi Apple. A questo si può aggiungere il manifest per una gestione più completa, soprattutto se il sito si avvicina al comportamento di una web app.
Il punto chiave è la compatibilità progressiva: ogni browser prende ciò che supporta meglio, senza rompere l’esperienza degli altri. Se il markup è ordinato, i percorsi sono corretti e le dimensioni sono ben scelte, la gestione delle icone diventa semplice e affidabile.
In pratica, una buona favicon non è solo un dettaglio estetico: è un elemento di usabilità, branding e qualità tecnica del progetto.
Approfondisci con risorse ufficiali
- MDN Web Docs — documentazione su <link rel="icon"> e sui metadati HTML.
- WHATWG HTML Standard — specifica ufficiale del comportamento dei link rel e dei metadata del documento.
- Apple Developer Documentation — indicazioni sulle apple-touch-icon e sull’integrazione con iOS.
- Web App Manifest — specifica ufficiale per definire icone, nome e comportamento delle applicazioni web installabili.
- Google Web Fundamentals — guide pratiche su icone, manifest e ottimizzazione dell’esperienza mobile.