Le favicon non sono difficili

Sembra che nel mondo della creazione dei siti web ci sia una enorme confusione su come specificare le Favicon, ovvero l'icona di un particolare sito web.

Il mio sito al momento in cui sto scrivendo non ha nessuna favicon, ma in questi giorni ho impostato quella del sito di HackInPovo, un hacklab locale di cui faccio parte. Doveva essere una cosa semplicissima, ma se ci sto scrivendo un articolo a riguardo significa che qualcosa è andato storto.

Il web, infatti, ha fatto un casino. Gente confusa che fa domande, "guru" che danno risposte approssimative, soluzioni che "a me funzionano" sparate un po' qua e là. Ma qual è la causa di questo caos?

Il problema

In breve, il problema è che il web è vecchio. Mi spiego meglio.

Esistono tantissimi web browser, da tantissimi anni, e se oggi la situazione è abbastanza standardizzata, con gruppi di persone che lavorano insieme per far sì che diverse implementazioni funzionino in maniera simile, non è sempre stato così.

In passato i vari autori di browser web hanno aggiunto, ognuno a modo loro, la possibilità per un sito web di comunicare al browser una sua icona "preferita", per dare un riferimento simbolico e visuale al sito. Nonostante l'idea sia generica, le risposte alle domande implementative erano diverse: quali formati immagine supportiamo? Come troviamo l'icona? Di che dimensione dev'essere? Ma se tipo voglio aggiungere un collegamento del sito alla home page del mio telefono che icona uso? E come facciamo per i temi chiaro/scuro? E così via.

È quindi naturale che in un ecosistema dove chi sviluppa dà risposte diverse a domande che cambiano nel tempo, ogni risposta di un "guru" pubblicata da qualche parte nell'internet lascia il tempo che trova.

La soluzione

La soluzione è non ascoltare quello che dicono i guru. Sì, questo articolo compreso.

O meglio: dobbiamo farci dare le risposte da chi sviluppa le tecnologie del web, in quanto sono loro davvero gli unici che conoscono la verità. A questo, non fa mai male aggiungere un po' di buon senso proprio, più un occhio di riguardo per chi utilizza browser vecchi o alternativi.

Ma dove le dobbiamo cercare, quindi, queste risposte? Ci basta sapere chi sviluppa le tecnologie del web come l'HTML, e dove vengono da loro pubblicate le informazioni per noi comuni mortali.

Lo standard HTML viene sviluppato principalmente da un gruppo di persone chiamato "WHATWG", e pubblicato come una grossa specifica nota come "HTML Living Standard". Potete spulciarvi tutto il documento se siete curiosi e avete abbastanza tempo libero, ma se volete semplicemente sapere come cavolo impostare 'ste benedette icone vi rimando direttamente alla pagina che descrive il comportamento dell'elemento link, in particolare la sezione 4.6.6.9 Link type "icon".

Lo standard mostra come per specificare una icona sia necessario creare un elemento link con l'attributo rel impostato a icon, l'attributo type che specifichi il media type dell'immagine, l'attributo sizes che specifichi le dimensioni in pixel dell'immagine e infine l'attributo href che contenga il percorso all'immagine da usare come icona.

Tutte queste informazioni vengono usate dal web browser per capire quale icona scegliere a seconda del contesto. Una immagine vettoriale SVG verrà probabilmente preferita a un PNG, a meno che il PNG non abbia una dimensione in pixel che sia esattamente quella necessaria al browser.

O forse no.

Non ci importa sapere che cosa un determinato browser faccia oggi, perché probabilmente domani agirà in maniera diversa. Quello che ci interessa sapere è come comunicare al browser in maniera efficace tutto quello che gli serve per fare la scelta che questo reputi più giusta.

Il buon senso

Arriviamo quindi alle mie raccomandazioni personali, basate su quello che credo sia un po' di ragionamento e buon senso.

Storicamente i browser web hanno usato una immagine in formato ICO chiamata "favicon.ico" e disponibile nella cartella primaria del sito web. Quindi, se il nostro sito è blog.example.org, dovrebbe essere accessibile dall'URL https://blog.example.org/favicon.ico.

È importante assicurarsi che l'immagine sia effettivamente in formato ICO, e non semplicemente chiamata "favicon.ico". Creare una icona in questo formato è abbastanza semplice usando il programma ImageMagick:

$ magick immagine.png -resize 256x -define icon:auto-resize favicon.ico

L'opzione -define icon:auto-resize ci permette di sfruttare una utile funzionalità dei file ICO, ovvero quella di inserire più dimensioni della stessa immagine all'interno di un unico file. Possiamo averne conferma sempre con ImageMagick usando il suo sotto-comando identify:

$ magick identify favicon.ico
favicon.ico[0] ICO 256x256 256x256+0+0 8-bit sRGB 0.010u 0:00.003
favicon.ico[1] ICO 192x192 192x192+0+0 8-bit sRGB 0.010u 0:00.001
favicon.ico[2] ICO 128x128 128x128+0+0 8-bit sRGB 0.010u 0:00.001
favicon.ico[3] ICO 96x96 96x96+0+0 8-bit sRGB 0.010u 0:00.000
favicon.ico[4] ICO 64x64 64x64+0+0 8-bit sRGB 0.010u 0:00.000
favicon.ico[5] ICO 48x48 48x48+0+0 8-bit sRGB 0.000u 0:00.000
favicon.ico[6] ICO 40x40 40x40+0+0 8-bit sRGB 0.000u 0:00.000
favicon.ico[7] ICO 32x32 32x32+0+0 8-bit sRGB 0.000u 0:00.000
favicon.ico[8] ICO 24x24 24x24+0+0 8-bit sRGB 0.000u 0:00.000
favicon.ico[9] ICO 16x16 16x16+0+0 8-bit sRGB 569494B 0.000u 0:00.000

Essendo che il formato ICO non fa uso di compressione, l'avere così tante immagini di diverse dimensioni può portare a un file di dimensioni eccessive. Il problema è evitabile specificando quali risoluzioni ci interessano all'opzione -define icon:auto-resize, ad esempio con -define icon:auto-resize=128,96,64,48,40,32,24,16.

Infine, questa immagine dovrà essere aggiunta all'intestazione del documento HTML del nostro sito con un elemento link:

<link
	rel="icon"
	type="image/vnd.microsoft.icon"
	sizes="128x128 96x96 64x64 48x48 40x40 32x32 24x24 16x16"
	href="/favicon.ico"
/>

Una icona di più alta risoluzione può essere aggiunta usando una immagine di tipo PNG, che è un formato un po' più moderno ed efficiente dei file ICO di Microsoft. Il mio consiglio è di usare una immagine che abbia una risoluzione maggiore dell'immagine ICO, come 256x256 o 512x512 pixel, ma non più di 1024x1024 pixel.

Il motivo è che tipicamente le favicon vengono rappresentate come piccolissime immagini sul nostro schermo, e diventano più grandi in condizioni particolari (tipo quando aggiungiamo un sito alla pagina iniziale del browser). Non serve quindi che l'immagine abbia risoluzione estremamente elevata. Per i curiosi, i dettagli sul perché del limite di 1024 pixel sono discussi più sotto.

Il secondo elemento link che quindi consiglio è questo qui:

<link
	rel="icon"
	type="image/png"
	sizes="256x256"
	href="/favicon.png"
/>

Ma tutte queste chiacchiere sulle dimensioni sono inutili. La vera soluzione è quella di usare una immagine vettoriale in formato SVG, così che i siano i browser stessi a poter scegliere la dimensione che vogliono, senza dover star lì a impazzire creando mille mila PNG di dimensioni diverse. L'unico motivo per cui non consiglio di usare solo un SVG è che non tutti i browser li supportano.

Il terzo e ultimo elemento link da aggiungere è quindi questo:

<link
	rel="icon"
	type="image/svg+xml"
	sizes="any"
	href="/favicon.svg"
/>

La mela

E anche oggi mi tocca parlar di Apple...

Anche se questo articolo parla delle favicon, non posso fare a meno di parlare anche della icona assegnata alle Web Clip su iOS, meglio nota come "Apple touch icon".

Nonostante Safari di Apple utilizzi le icone specificate con rel="icon" come iconcine dei siti all'interno del browser stesso, quando andiamo ad aggiungere il sito alla schermata Home del telefono (creando quindi una Web Clip) quell'immagine viene totalmente ignorata.

Al suo posto viene invece usata l'immagine specificata attraverso il valore apple-touch-icon dell'attributo rel. Questa immagine ha dei requisiti particolari imposti da Apple, sparsi in diverse pagine di documentazione ufficiale. L'originale (e ormai obsoleto) documento mostra diverse dimensioni come esempi, raccomandando di leggere le iOS Human Interface Guidelines per i valori effettivi. Queste, nella sezione dedicata alle icone raccomandano che le icone siano quadrati di 1024 pixel. E, ancora, in una pagina di documentazione per sviluppatori riguardante le API di gestione del dispositivo, viene raccomandato che l'immagine non superi i 400x400 pixel.

Insomma, un casino.

Per capire effettivamente cosa fare bisogna fare un passo indietro nel tempo, quando la documentazione di Apple conteneva ancora informazioni precise. Nel 2023, infatti, le HIG spiegavano che i dispositivi iOS usano icone a multipli di 60 pixel, a seconda della loro dimensione. Il mio vecchio iPhone SE, ad esempio, usa un fattore di scala "@2x", quindi vuole le icone di 120x120 pixel, mentre l'ultimissimo iPhone 17 Pro Max ha un fattore di scala @3x, con icone della Home screen a 180x180 pixel.

Potremmo quindi voler usare due immagini, una scalata @2x e una @3x. Se proprio sentite che 180 pixel sembrano troppo pochi, potete anche inventarvi un fattore di scala @4x con una immagine di 240x240 pixel, così da essere pronti anche all'iPhone 28 con Diplay Retina Hyper-Dense™.

Ma in termini pratici, questa distinzione non è davvero necessaria. L'icona infatti verrà infatti riadattata automaticamente dal dispositivo se troppo grande o troppo piccola. Per semplicità consiglio quindi di usare un singolo PNG di 180x180 pixel chiamato apple-touch-icon.png. Inoltre, l'immagine dev'essere quadrata, non circolare (così come le icone di iOS).

Ed ecco quindi il vero ultimo elemento link da aggiungere alla nostra pagina HTML:

<link
	rel="apple-touch-icon"
	type="image/png"
	sizes="180x180"
	href="/apple-touch-icon.png"
/>

Trick extra

Se proprio vi piace fare tutto preciso per filo e per segno allora vi consiglio anche l'uso di tre programmini per ottimizzare e semplificare le vostre favicon: pngquant, oxipng e usvg.

I primi due servono per ridurre drasticamente le dimensioni dei file PNG. Il primo ricodifica i PNG in un formato più efficiente, riducendo il numero di colori usati per esprimere l'icona (talvolta con una minima, seppur impercettibile, perdita di dettagli), mentre il secondo rimuove metadati non necessari e ri-comprime l'immagine senza perdita di qualità.

Ad esempio, per creare la favicon di tipo PNG che ho descritto prima potete usare una combo di ImageMagick + pngquant + oxipng in questo modo:

$ magick immagine.png -resize 256x png:- \
| pngquant --speed 1 - \
| oxipng --opt max --strip all --out favicon.png -

usvg, invece, semplifica drasticamente la struttura dei file SVG così che risultino più facilmente gestibili dai vari visualizzatori, risolvendo così eventuali problemi di visualizzazione che alcuni utenti potrebbero incontrare, specialmente su browser vecchi o alternativi. Usarlo è molto semplice:

$ usvg immagine.svg favicon.svg

Conclusioni

Spero che questo articolo abbia fatto un po' di chiarezza!

Non solo: il messaggio più importante che voglio far passare è che importantissimo sviluppare la capacità di individuare da chi andare a prendere le risposte alle nostre domande. Il web, come ogni altra parte del mondo, è pieno di contenuto che ci viene sparato addosso da ogni lato. Spendere un po' di tempo ed energie per andare alla radice della questione e trovare la vera risposta è l'unico modo per trovare quale, tra il mare di dati, è l'informazione corretta.

E se siete dei nerd come me, è anche divertente :D

Dedicato a viirginiax