Introduzione
Le favicon sono piccole, ma hanno un impatto enorme sull’esperienza utente. Sono l’icona che appare nella scheda del browser, nei preferiti, nella cronologia e spesso anche nella schermata iniziale dei dispositivi mobili. In un progetto reale, però, limitarsi a inserire un solo file favicon.ico non è sempre sufficiente.
Un approccio più moderno e robusto consiste nel gestire le icone del sito con HTML insieme a un file manifest. Questo permette di controllare meglio il comportamento su browser desktop, Android, iOS e dispositivi che salvano il sito come applicazione. In questo tutorial vedremo un sotto-argomento molto utile: come collegare correttamente le icone del sito usando HTML e manifest, con un set di icone coerente e pronto per più piattaforme.
L’obiettivo non è solo “far vedere un’icona”, ma costruire una configurazione ordinata, scalabile e facile da mantenere nel tempo.
Codice completo
<!-- Favicon classica per browser legacy e compatibilità generale -->
<link rel="icon" href="/icons/favicon.ico" sizes="any">
<!-- Icona PNG moderna per browser che supportano formati più specifici -->
<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 SVG, utile per schermate ad alta densità e scalabilità perfetta -->
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">
<!-- Icona per dispositivi Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<!-- Manifest per installazione su Android e integrazione PWA -->
<link rel="manifest" href="/site.webmanifest">
<!-- Colore della barra del browser su alcuni dispositivi mobili -->
<meta name="theme-color" content="#1d4ed8">{
"name": "Studio Grafico Aurora",
"short_name": "Aurora",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#1d4ed8",
"background_color": "#ffffff",
"display": "standalone"
}Spiegazione
Vediamo cosa fa ogni parte del codice e perché è utile in un progetto ben strutturato.
1. link rel="icon" per la favicon principale
Il primo tag punta al file favicon.ico. Questo formato è ancora molto compatibile, soprattutto con browser più vecchi o con software che si aspettano un’icona standard nel percorso classico del sito. L’attributo sizes="any" indica che il file può essere usato in modo flessibile.
Subito dopo abbiamo due PNG da 32x32 e 16x16. Questa scelta è utile perché alcuni browser preferiscono file espliciti in base alla dimensione richiesta. Avere più versioni riduce il rischio di icone sfocate o scalate male.
2. SVG come icona moderna
Il file SVG è molto interessante perché è vettoriale: si adatta bene a schermi diversi senza perdere qualità. È particolarmente comodo quando il logo del sito è semplice, monocromatico o facilmente rappresentabile in forma vettoriale.
In molti casi, il browser sceglierà automaticamente il formato più adatto. Per questo motivo, dichiarare più icone non è ridondante: è una strategia di compatibilità intelligente.
3. apple-touch-icon per i dispositivi Apple
Su iPhone e iPad, quando un utente aggiunge un sito alla schermata Home, il sistema cerca una icona dedicata. Il tag apple-touch-icon serve proprio a questo. La dimensione più usata è 180x180, sufficiente per una buona resa visiva su dispositivi moderni.
È importante usare un’immagine pulita, con margini adeguati, perché iOS può applicare effetti o maschere in fase di visualizzazione.
4. manifest per installazione e comportamento PWA
Il file site.webmanifest è un JSON che descrive le icone e alcune proprietà dell’applicazione web. Anche se non stai costruendo una PWA completa, il manifest è molto utile per definire il comportamento del sito quando viene “installato” su Android o aperto in modalità standalone.
Nel manifest troviamo:
- name: il nome completo dell’app o del sito;
- short_name: la versione breve, usata in spazi ridotti;
- icons: l’elenco delle icone disponibili;
- purpose: utile per indicare icone maskable, cioè adatte a maschere dinamiche;
- theme_color e background_color: colori usati in alcune interfacce del sistema;
- display: qui standalone fa apparire il sito più simile a un’app.
5. theme-color per una resa più coerente
Il meta tag theme-color non è una favicon, ma completa l’esperienza visiva. Su alcuni browser mobili cambia il colore della barra superiore, rendendo l’interfaccia più coerente con il brand del sito. È un dettaglio piccolo, ma professionale.
Best practice
Quando gestisci favicon e icone del sito, conviene seguire alcune regole pratiche per evitare problemi di compatibilità e manutenzione.
- Usa un set coerente di icone: stessa identità visiva, stessi colori e stessi margini.
- Non affidarti a un solo file: combina ICO, PNG, SVG e manifest per coprire più casi d’uso.
- Ottimizza le dimensioni: non caricare immagini troppo pesanti per un’icona che verrà mostrata in piccolo.
- Conserva i file in una cartella dedicata, ad esempio /icons/, per mantenere ordine nel progetto.
- Usa nomi chiari: favicon-32.png, apple-touch-icon.png, icon-512.png.
- Verifica il comportamento su più dispositivi: desktop, Android, iPhone e schermata Home.
- Aggiorna la cache quando cambi icona: se il browser mostra ancora la vecchia favicon, rinomina il file o aggiorna il percorso.
- Preferisci SVG quando il logo è semplice, ma mantieni anche PNG e ICO come fallback pratici.
Un altro consiglio importante: se il logo contiene dettagli sottili, non usare la stessa versione di un’immagine grande ridotta automaticamente. Crea invece file pensati apposta per le dimensioni richieste. Una favicon troppo complessa diventa illeggibile quando è visualizzata in 16x16 pixel.
Riepilogo
Gestire le icone del sito con HTML e manifest significa creare una configurazione più completa rispetto alla semplice favicon tradizionale. Con pochi tag puoi coprire browser moderni, dispositivi Apple, schermate Home e installazione su Android.
Il punto chiave è la compatibilità: ogni formato ha il suo contesto ideale. L’ICO è utile per la compatibilità generale, i PNG coprono dimensioni precise, l’SVG offre scalabilità, il tag apple-touch-icon migliora l’esperienza su iOS e il manifest rende il sito più vicino a un’app installabile.
Se progetti tutto in modo ordinato, le icone del sito diventano un elemento stabile del brand, non un dettaglio lasciato al caso.
Approfondisci con risorse ufficiali
- MDN Web Docs - documentazione su link rel="icon" e metadati HTML.
- MDN Web Docs - guida al Web App Manifest.
- Google Web.dev - best practice per icone e PWA.
- Apple Developer Documentation - indicazioni su apple-touch-icon e comportamento su iOS.
- W3C - specifiche e standard relativi ai metadati del documento HTML.
Se vuoi, nel prossimo passo posso anche scrivere un tutorial dedicato a come creare un set completo di favicon da un logo SVG, con esportazione delle varie dimensioni e struttura delle cartelle consigliata.