Il favicon compie più di vent'anni: Microsoft lo introdusse con Internet Explorer 5 nel 1999, quando bastava mettere un file favicon.ico nella radice del sito. Oggi quello stesso file da solo non basta più a coprire schermata home di iOS, PWA installate e Android Chrome.
Un solo file .ico può contenere più immagini
A differenza di un PNG, un file .ico può racchiudere più risoluzioni bitmap (16x16, 32x32, 48x48) in un unico contenitore, lasciando che sia il browser a scegliere quella più adatta. È un'eredità dell'epoca in cui un'unica icona doveva servire sia come collegamento sul desktop sia come voce nella barra delle applicazioni di Windows.
L'apple-touch-icon: una convenzione tutta di Apple
iOS non ha mai adottato favicon.ico per la schermata home: Apple ha introdotto un proprio tag, <link rel="apple-touch-icon">, che richiede un PNG quadrato di 180×180 senza trasparenza, perché è il sistema stesso ad applicare gli angoli arrotondati.
A cosa serve
- Generare un set completo di icone nelle dimensioni richieste a partire da una singola immagine sorgente.
- Ottenere il codice HTML dei tag <link> pronto da incollare in <head>.
- Assicurarsi che il sito appaia correttamente quando viene aggiunto alla schermata home di un dispositivo mobile.
Il Web App Manifest per le PWA
Le applicazioni web progressive necessitano inoltre di un file site.webmanifest con l'elenco delle icone, il nome del sito e il colore del tema in formato JSON — proprio da lì Android prende l'icona quando un sito viene installato come app a sé stante.