Il favicon è la piccola icona che appare in una scheda del browser, in un elenco di segnalibri e nei suggerimenti della barra degli indirizzi quando qualcuno visita un sito web. Farlo bene implica più che semplicemente rendere un'immagine piccola. Un favicon che appare nitido richiede le giuste dimensioni in pixel, un design pulito e centrato e il formato corretto per il contesto in cui viene utilizzato. La dimensione standard del favicon è 16x16 pixel per la visualizzazione di base nella scheda del browser, con 32x32 utilizzato per display ad alta densità e 48x48 incluso in pacchetti completi di favicon. Un favicon preparato male appare sfocato o indistinto nella scheda, un piccolo dettaglio che riflette la qualità complessiva di un sito web.
Come ridimensionare un'immagine per Favicon
Per il favicon di base, inserisci 16 sia nel campo larghezza che in quello altezza e disattiva la casella di controllo Mantieni rapporto d'aspetto per un output quadrato forzato. Per una versione ad alta risoluzione, ripeti il processo con 32 in entrambi i campi. Per un pacchetto completo di favicon, elabora la stessa immagine a 16x16, 32x32 e 48x48 separatamente.
La qualità dell'immagine sorgente è più importante nelle dimensioni dei favicon che in quasi qualsiasi altra dimensione. Un logo complesso o un'illustrazione dettagliata perde ogni forma riconoscibile a 16x16. Un'icona semplice e audace con bordi puliti e dettagli minimi regge molto meglio. Inizia dalla versione più grande disponibile dell'icona e ridiscendi per ottenere il risultato più nitido a ogni dimensione. Carica più dimensioni contemporaneamente e scarica come ZIP al termine.
Dimensioni standard del Favicon
16x16 pixel: la dimensione base visualizzata nelle schede del browser su schermi a risoluzione standard. 32x32 pixel: utilizzato da display ad alta densità e scorciatoie desktop di Windows. 48x48 pixel: incluso in pacchetti completi di favicon per una compatibilità più ampia. 180x180 pixel: la dimensione dell'Apple Touch Icon utilizzata quando un sito web viene salvato nella schermata Home di iOS. 192x192 pixel: utilizzato dai dispositivi Android per le icone delle app web nella schermata Home. Un pacchetto completo di favicon include tipicamente tutte queste dimensioni generate dalla stessa icona sorgente.
Formato di output per i Favicon
PNG è il formato più ampiamente supportato per le implementazioni moderne di favicon. La maggior parte dei browser accetta file favicon PNG direttamente tramite il tag link nell'head HTML. Gli sfondi trasparenti sono supportati in PNG e consentono al favicon di posizionarsi pulitamente sul colore della scheda del browser. Il formato ICO tradizionale raggruppa più dimensioni in un singolo file ed è ancora utilizzato per il file favicon.ico root che i browser cercano per impostazione predefinita. PNG nella dimensione corretta è l'approccio più diretto per la maggior parte dei progetti web moderni.