Gestire le favicon del sito con HTML: formato, dimensioni e fallback intelligenti

by Anastasia P.
Add as preferred source on Google
SHARE
Gestire le favicon del sito con HTML: formato, dimensioni e fallback intelligenti
© Guida-HTML5.it

Introduzione

Le favicon sono piccole icone, ma hanno un ruolo importante nell’esperienza utente: aiutano a riconoscere rapidamente un sito tra molte schede aperte, nei preferiti del browser e in alcuni contesti come la cronologia o i collegamenti salvati su mobile. In un progetto moderno, però, non basta aggiungere un solo file favicon.ico e sperare che tutto funzioni. È utile progettare una gestione ordinata delle icone, con più formati, dimensioni corrette e un fallback affidabile.

In questo tutorial vediamo un sotto-argomento molto pratico: come organizzare le favicon in HTML usando formati diversi, dimensioni adatte e una strategia di compatibilità. L’obiettivo è fare in modo che il sito mostri un’icona corretta su browser moderni e su ambienti meno recenti, evitando errori comuni come immagini sfocate, percorsi sbagliati o file troppo pesanti.

Codice completo

<!-- Favicon classica per massima compatibilità -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG standard per browser moderni -->
<link rel="icon" type="image/png" href="/icons/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/icons/favicon-16.png" sizes="16x16">

<!-- Icona per dispositivi Apple / scorciatoie iOS -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" sizes="180x180">

<!-- Manifest per installazione PWA e gestione avanzata delle icone -->
<link rel="manifest" href="/site.webmanifest">

<!-- Tema colore della barra del browser su alcuni dispositivi -->
<meta name="theme-color" content="#1e3a8a">

Spiegazione

Vediamo riga per riga cosa sta succedendo e perché questa struttura è utile in un progetto reale.

1) favicon.ico come base di compatibilità

Il primo tag punta a /favicon.ico. Questo file è ancora molto utile perché molti browser lo cercano automaticamente e lo supportano da anni. L’attributo sizes="any" indica che il file può contenere più risoluzioni oppure che il browser può trattarlo in modo flessibile. È una scelta pratica per garantire compatibilità di base.

2) PNG separati per dimensioni precise

I due tag successivi dichiarano icone PNG da 32x32 e 16x16. Questo approccio è semplice e robusto: il browser può scegliere la dimensione più adatta in base al contesto. Le favicon piccole, se create appositamente, risultano più nitide rispetto a un’immagine grande ridimensionata automaticamente.

In generale, usare file distinti per dimensioni diverse è una buona idea quando vuoi controllare il risultato visivo. Ad esempio, un logo complesso può perdere leggibilità a 16x16 pixel; in quel caso conviene creare una versione semplificata della favicon, con pochi dettagli e contrasto elevato.

3) apple-touch-icon per i dispositivi Apple

Il tag apple-touch-icon è usato soprattutto quando un utente salva il sito nella schermata Home di iPhone o iPad. Qui è consigliato un file da 180x180 pixel, così l’icona resta nitida sui display ad alta densità. Anche se non è una favicon nel senso stretto del termine, fa parte della gestione delle icone del sito e migliora l’esperienza su ecosistemi Apple.

4) manifest per una gestione moderna

Il file site.webmanifest consente di definire icone aggiuntive, nome dell’app, colori e comportamento dell’installazione. È particolarmente utile se il sito può essere aggiunto alla schermata Home o trasformato in una Progressive Web App. Anche se non stai costruendo una PWA completa, il manifest è un buon punto di partenza per centralizzare le informazioni sulle icone.

5) theme-color per coerenza visiva

Il meta tag theme-color non è una favicon, ma aiuta a rendere coerente l’interfaccia del browser su alcuni dispositivi mobili. Impostando un colore vicino al brand, la barra del browser e alcune superfici di sistema possono integrarsi meglio con l’identità visiva del sito.

Best practice

  • Usa un set minimo ma completo: almeno un favicon.ico, un PNG da 32x32 e un apple-touch-icon da 180x180.
  • Prepara icone leggibili in piccolo: a 16x16 pixel i dettagli sottili spariscono. Meglio un simbolo semplice, con contorni chiari e buon contrasto.
  • Organizza i file in una cartella dedicata: ad esempio /icons/. Mantieni i percorsi coerenti e facili da mantenere.
  • Usa nomi espliciti: favicon-16.png, favicon-32.png, apple-touch-icon.png. Evita nomi generici come icon1.png.
  • Comprimi le immagini: una favicon deve essere leggera. Anche se il file è piccolo, una buona ottimizzazione riduce il peso complessivo del sito.
  • Verifica il risultato su più browser: Chrome, Firefox, Safari e browser mobile possono comportarsi in modo leggermente diverso.
  • Non affidarti solo a un formato: l’ICO resta utile per compatibilità, mentre PNG e manifest coprono scenari più moderni.
  • Evita di usare immagini troppo complesse: loghi con testo lungo o molti elementi grafici non funzionano bene come favicon.

Un errore frequente è pensare che basti caricare un’immagine quadrata qualsiasi. In realtà, la favicon è un elemento di interfaccia, non un semplice logo ridotto. Se il simbolo è troppo elaborato, il browser lo renderà poco leggibile. Per questo conviene progettare una variante dedicata, spesso diversa dal logo principale del sito.

Un altro aspetto importante è il fallback. Se un browser non supporta un certo formato o non trova una dimensione specifica, deve poter ricadere su un’alternativa valida. La combinazione di favicon.ico, PNG e manifest rende il sistema più resistente e più facile da mantenere nel tempo.

Riepilogo

Gestire bene le favicon significa pensare a compatibilità, nitidezza e coerenza visiva. La soluzione più solida non si basa su un solo file, ma su una piccola strategia:

  • un ICO per la compatibilità generale;
  • PNG separati per le dimensioni più comuni;
  • un apple-touch-icon per i dispositivi Apple;
  • un manifest per scenari moderni e installazione su home screen;
  • un colore tema coerente con il brand.

Se progetti le icone con attenzione, il sito apparirà più professionale e riconoscibile in ogni contesto. È un dettaglio piccolo, ma nei progetti web i dettagli fanno spesso la differenza.

Approfondisci con risorse ufficiali

Add as preferred source on Google
SHARE