Favicon: formato e di­men­sio­ni delle piccole icone

I diversi browser ri­chie­do­no favicon di di­men­sio­ni diverse. Oltre al formato 16 x 16 o 32 x 32 pixel, vi con­si­glia­mo anche altre varianti.

La favicon (parola composta dai termini “favorite” (preferito) e “icon” (icona)) è una piccola grafica che viene vi­sua­liz­za­ta sopra la barra degli indirizzi delle schede, fa­ci­li­tan­do la ricerca di un sito web. Le favicon possono essere il logo di un marchio o di un’azienda, ma poiché le sue di­men­sio­ni sono ridotte, spesso viene uti­liz­za­ta solo un’area parziale o una variante del logo. Sui di­spo­si­ti­vi mobili, la grafica di piccole di­men­sio­ni viene uti­liz­za­ta anche per le icone touch. Tutto quello che c’è da sapere su questo argomento è riportato nel nostro articolo “Cos’è una favicon”.

È con­si­glia­bi­le che ogni sito web includa una favicon. In questo modo la pagina in questione sarà più facile da trovare, apparirà più pro­fes­sio­na­le e avrà pre­sta­zio­ni migliori nell’ambito dell’ot­ti­miz­za­zio­ne SEO. Tuttavia, esistono norme molto severe per quanto riguarda le di­men­sio­ni dell’icona del sito web. Per la maggior parte dei browser, sono adatte le di­men­sio­ni di 16 x 16 o 32 x 32 pixel. È quindi opportuno crearne una in questo formato. Una favicon di di­men­sio­ni maggiori è con­si­glia­ta per gli schermi ad alta ri­so­lu­zio­ne, mentre il formato più piccolo è comune per molti altri scopi. È quindi più semplice includere entrambi i formati nel codice.

Oltre a queste due di­men­sio­ni per le favicon, ci sono formati che sono al­tret­tan­to utili e che ideal­men­te do­vreb­be­ro essere inclusi. Ciò è par­ti­co­lar­men­te im­por­tan­te per Google, perché i risultati di ricerca vengono vi­sua­liz­za­ti tramite una favicon sulla piat­ta­for­ma, le cui di­men­sio­ni do­vreb­be­ro essere di 48 x 48 pixel. In al­ter­na­ti­va, è possibile scegliere un formato che sia un multiplo di queste di­men­sio­ni. Queste misure sono im­por­tan­ti anche per Android. Il sistema operativo utilizza favicon di queste di­men­sio­ni per po­si­zio­na­re i col­le­ga­men­ti nella schermata iniziale. Per i di­spo­si­ti­vi con una ri­so­lu­zio­ne dello schermo elevata, può servire anche il formato per la favicon di 192 x 192 pixel.

La si­tua­zio­ne si complica un po’ con il con­cor­ren­te Apple. A seconda del di­spo­si­ti­vo finale, sono ottimali diversi formati di favicon. Per l’iPhone si utilizza il formato 60 x 60 pixel. Tuttavia, è possibile anche una ri­so­lu­zio­ne si­gni­fi­ca­ti­va­men­te più alta, purché sia un multiplo di questo valore. Ciò consente una vi­sua­liz­za­zio­ne ottimale ad alta ri­so­lu­zio­ne e viene ri­di­men­sio­na­ta per altri scopi. Un’immagine di 180 x 180 pixel è quindi una buona scelta. Le icone su iPad, invece, vengono vi­sua­liz­za­te con 83,5 x 83,5 pixel. Per i moderni display Retina e Super Retina, il formato della favicon di 167 x 167 pixel è una buona scelta.

Per alcuni browser e di­spo­si­ti­vi si applicano ulteriori eccezioni. Per i di­spo­si­ti­vi più vecchi, in par­ti­co­la­re, sono teo­ri­ca­men­te ne­ces­sa­rie misure ag­giun­ti­ve affinché le di­men­sio­ni dell’icona nel browser siano corrette. Qui troverete un elenco chiaro delle di­men­sio­ni più comuni:

Potete uti­liz­za­re vari formati immagine per la favicon. Tuttavia, il formato icona .ico di Windows, sup­por­ta­to da numerosi browser, è uti­liz­za­to molto fre­quen­te­men­te. So­prat­tut­to per le immagini più grandi che possono fun­zio­na­re anche come icone touch, ad esempio, una favicon in formato .png è molto adatta. Altri formati possibili sono .svg o .gif.

Come abbiamo visto, ci sono alcuni punti da prendere in con­si­de­ra­zio­ne quando cercate la favicon della di­men­sio­ne giusta per il vostro sito web. Per questo motivo, il modo più semplice per farlo è quello di uti­liz­za­re un ge­ne­ra­to­re au­to­ma­ti­co. Questo vi guiderà at­tra­ver­so tutti i passaggi e garantirà che il formato della favicon sia adatto a tutti i browser.

Nei seguenti articoli scoprite come inserire una favicon sul vostro sito:

• Favicon su WordPress: come ag­giun­ge­re la favicon in tre modi diversi
• Inserire una favicon con HTML