Introduzione
Le favicon sono piccole icone che identificano un sito nel browser, nei preferiti, nelle schede e in alcuni contesti del sistema operativo. Anche se sembrano un dettaglio, una gestione corretta delle icone migliora la riconoscibilità del brand e riduce problemi pratici come icone vecchie che restano in cache, formati non supportati o percorsi errati.
In questo tutorial ci concentriamo su un aspetto molto utile e spesso trascurato: come gestire in modo affidabile la favicon principale del sito e il suo aggiornamento nel tempo. Vedremo come dichiararla in HTML, come organizzare i file, come evitare conflitti tra versioni diverse e come comportarsi quando il browser continua a mostrare un’icona obsoleta.
Questo approccio è particolarmente utile quando lavori su siti in evoluzione, redesign o ambienti con CDN e cache aggressive. L’obiettivo non è solo “mettere una favicon”, ma far sì che venga caricata in modo coerente e prevedibile.
Codice completo
<!-- Favicon principale in formato ICO -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Favicon moderna in PNG, utile per browser recenti -->
<link rel="icon" type="image/png" href="/assets/icons/favicon-32.png" sizes="32x32">
<!-- Icona ad alta risoluzione per dispositivi moderni -->
<link rel="icon" type="image/png" href="/assets/icons/favicon-192.png" sizes="192x192">
<!-- Icona Apple per schermata home su iPhone/iPad -->
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" sizes="180x180">
<!-- Manifest per ambienti PWA e gestione coerente delle icone -->
<link rel="manifest" href="/site.webmanifest">
<!-- Colore della UI del browser su alcuni dispositivi -->
<meta name="theme-color" content="#0f172a">Spiegazione
Il codice qui sopra mostra una configurazione pratica e robusta. La prima riga punta a favicon.ico, che resta una scelta molto utile perché è supportata praticamente ovunque. Anche se oggi molti browser leggono PNG e SVG, il file ICO è ancora un ottimo fallback per compatibilità generale.
1. favicon.ico come base solida
<link rel="icon" href="/favicon.ico" sizes="any"> indica al browser di usare il file ICO come icona principale. L’attributo sizes="any" comunica che il file può contenere più dimensioni interne, una caratteristica comune del formato ICO. Questo aiuta il browser a scegliere la variante più adatta.
Un vantaggio importante del file ICO è che può includere più risoluzioni nello stesso file, ad esempio 16x16, 32x32 e 48x48. In questo modo il browser ha una buona base per adattarsi alle varie situazioni.
2. PNG separati per chiarezza e controllo
Le righe successive dichiarano file PNG specifici. Per esempio:
- 32x32 per la maggior parte delle schede browser;
- 192x192 per contesti moderni e dispositivi ad alta densità;
- 180x180 per Apple touch icon.
Questa separazione è utile quando vuoi controllare con precisione il rendering dell’icona. Il PNG è semplice da generare, mantiene trasparenza e si comporta bene nella maggior parte dei browser moderni.
3. Apple touch icon per iOS
<link rel="apple-touch-icon" ...> non è una favicon nel senso stretto usato nelle schede del browser, ma è fondamentale per la schermata Home dei dispositivi Apple. Se un utente salva il sito su iPhone o iPad, questa icona viene usata come rappresentazione dell’app o del sito.
Una dimensione molto comune è 180x180. Anche se iOS può adattare l’immagine, partire da questa dimensione è una scelta pratica e diffusa.
4. Manifest per coerenza e manutenzione
Il file site.webmanifest è molto utile perché centralizza informazioni come nomi, colori e icone. Anche se il tutorial si concentra sull’HTML, il manifesto aiuta a gestire il sistema di icone in modo ordinato, specialmente quando il sito cresce o diventa una web app.
In un progetto reale, questa combinazione riduce il rischio di avere file sparsi e configurazioni incoerenti tra browser, dispositivi mobili e installazioni progressive.
5. Il problema della cache: perché la favicon non cambia subito
Uno dei problemi più comuni è questo: aggiorni il file della favicon, ma il browser continua a mostrare la vecchia icona. La causa è quasi sempre la cache. Le favicon vengono memorizzate in modo aggressivo, quindi il browser può riutilizzare una versione precedente anche dopo il deploy.
Per gestire questo problema in modo pulito, puoi usare una strategia di versionamento del file, ad esempio:
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" href="/assets/icons/favicon-32.png?v=2" sizes="32x32">Il parametro ?v=2 cambia l’URL percepito dal browser e forza il caricamento della nuova risorsa. È una soluzione semplice e molto efficace durante redesign o aggiornamenti grafici.
Best practice
- Usa un fallback affidabile: mantieni sempre un
favicon.iconella root del sito. - Versiona le icone: se aggiorni il logo, modifica anche il nome file o aggiungi un query string per evitare cache stale.
- Non affidarti a un solo formato: combina ICO, PNG e, se serve, manifest per coprire più scenari.
- Usa percorsi assoluti o coerenti: evita ambiguità tra ambienti di sviluppo e produzione.
- Controlla il peso dei file: una favicon deve essere leggera; evita immagini enormi inutili.
- Verifica il contrasto: il logo deve restare leggibile anche in dimensioni molto piccole.
- Testa su più browser: Chrome, Firefox, Safari e browser mobile possono comportarsi in modo diverso.
- Non cambiare troppo spesso il nome dei file senza motivo: una strategia stabile riduce gli errori di deploy.
Riepilogo
Gestire bene le favicon non significa solo aggiungere un’icona al sito, ma costruire una configurazione affidabile nel tempo. La soluzione più pratica è partire da un favicon.ico nella root, affiancarlo con PNG moderni e aggiungere l’icona Apple per i dispositivi iOS. Se il sito cambia spesso, il versionamento dei file è essenziale per evitare che la cache mostri una vecchia icona.
In sintesi, una buona gestione delle icone del sito deve essere:
- compatibile con più browser e dispositivi;
- chiara nella struttura dei file;
- aggiornabile senza problemi di cache;
- coerente con l’identità visiva del progetto.
Con poche righe di HTML ben pensate puoi evitare molti problemi futuri e garantire un’esperienza più professionale.
Approfondisci con risorse ufficiali
- MDN Web Docs - <link>: documentazione completa sull’elemento link e sui suoi attributi.
- MDN Web Docs - favicon: panoramica pratica su formati e comportamento nei browser.
- Web App Manifest: specifica utile per gestire icone e metadati delle web app.
- Apple Human Interface Guidelines: indicazioni per le icone usate su iOS e macOS.
Se vuoi, nel prossimo passo posso anche scrivere un tutorial dedicato a come creare un file favicon.ico corretto e multi-risoluzione oppure a come risolvere i problemi di cache delle favicon nei browser.