Le dimensioni favicon che browser e dispositivi vogliono davvero

Una favicon un tempo significava una sola piccola immagine 16×16. Ora una scheda del browser, la scorciatoia sulla schermata home di un telefono, una barra dei preferiti e un'icona touch Apple si aspettano ciascuna la propria dimensione, e fornirne solo una lascia alcuni di questi contesti sfocati o mostra un'icona generica di riserva al posto della tua.

Perché una sola dimensione non basta

Un'icona 16×16 ingrandita per riempire uno spazio icona schermata home di 180×180 appare esattamente altrettanto pixelata di qualsiasi piccola immagine allungata a grande dimensione — non c'è modo di aggiungere dettaglio che non era nella sorgente. Ogni contesto in cui compare una favicon ha la propria risoluzione attesa, e la prassi moderna è fornire un insieme di dimensioni invece di affidarsi a un browser che ingrandisce male un singolo file piccolo.

Le dimensioni che vale la pena coprire

• 16×16 e 32×32 — le dimensioni classiche della favicon, usate nelle schede del browser e negli elenchi dei preferiti sulla maggior parte dei browser desktop.
• 180×180 — la dimensione attesa da Apple per l'icona della schermata home quando una pagina viene aggiunta alla schermata home di un iPhone o iPad.
• 192×192 e 512×512 — usate da Android e dai manifesti delle app web per le icone della schermata home e le schermate di avvio nelle app web installabili.

Mantenere il design leggibile a 16px

Generatore di favicon prende un'immagine sorgente e produce in una volta l'intero set di dimensioni standard, interamente nel tuo browser — ma nessun generatore può correggere un design che di per sé non funziona a piccole dimensioni. I dettagli fini, le linee sottili e il testo piccolo scompaiono completamente a 16×16; una forma o una lettera semplice e marcata che resta riconoscibile una volta rimpicciolita è ciò che davvero si legge chiaramente in una scheda del browser, indipendentemente da quante dimensioni vengano generate da essa.