La favicon ha smesso di essere un solo quadrato da 16 pixel anni fa. Oggi un sito ha bisogno di una manciata di misure per schede, collegamenti Windows, schermate Home di iPhone e richieste di installazione Android, più il markup che le richiama. Questa pagina crea tutto da un’unica immagine, nel tuo browser.

Come si usa

1. 1 Trascina un’immagine quadrata, meglio se da 512 px o più.
2. 2 Controlla ogni misura nell’anteprima e imposta uno sfondo se la tua immagine è trasparente.
3. 3 Scarica lo zip, estrailo nella radice del sito e incolla l’HTML.

Progetta per 16 pixel, non per il logo

Alla dimensione di una scheda, una favicon è larga più o meno come un punto fermo di questa pagina. I logotipi diventano macchie grigie e le linee sottili spariscono del tutto. Una singola lettera, una forma semplice o il frammento più riconoscibile del logo sopravvive a quella scala; il logo intero quasi mai.

Il PNG basta; l’ICO è un residuo

Ogni browser oggi in uso legge le favicon PNG, quindi una pila di file PNG e i giusti tag link coprono il web. Il contenitore .ico esiste perché Internet Explorer lo cercava nella radice del sito; se non devi supportare qualcosa di antico, puoi farne a meno.

La trasparenza si comporta diversamente su un telefono

In una scheda del browser un’icona trasparente si appoggia bene su ciò che offre il tema. Sulla schermata Home di un iPhone lo stesso file riceve dietro un quadrato nero pieno, perché iOS lì non compone la trasparenza. Imposta un colore di sfondo e l’icona sembra voluta in entrambi i casi.

Perché il browser mostra ancora la vecchia

Le favicon vengono messe in cache in modo aggressivo e a lungo, a volte oltre un normale ricaricamento. Apri direttamente il file dell’icona per confermare che la nuova sia davvero lì, poi controlla in una finestra privata. Cambiare il nome del file, o aggiungerci una versione, è il modo affidabile per forzare l’aggiornamento.