Favicon: formato e dimensioni delle piccole icone

I diversi browser richiedono favicon di dimensioni diverse. Oltre al formato 16 x 16 o 32 x 32 pixel, vi consigliamo anche altre varianti.

La favicon (parola composta dai termini “favorite” (preferito) e “icon” (icona)) è una piccola grafica che viene visualizzata sopra la barra degli indirizzi delle schede, facilitando la ricerca di un sito web. Le favicon possono essere il logo di un marchio o di un’azienda, ma poiché le sue dimensioni sono ridotte, spesso viene utilizzata solo un’area parziale o una variante del logo. Sui dispositivi mobili, la grafica di piccole dimensioni viene utilizzata anche per le icone touch. Tutto quello che c’è da sapere su questo argomento è riportato nel nostro articolo “Cos’è una favicon”.

È consigliabile che ogni sito web includa una favicon. In questo modo la pagina in questione sarà più facile da trovare, apparirà più professionale e avrà prestazioni migliori nell’ambito dell’ottimizzazione SEO. Tuttavia, esistono norme molto severe per quanto riguarda le dimensioni dell’icona del sito web. Per la maggior parte dei browser, sono adatte le dimensioni di 16 x 16 o 32 x 32 pixel. È quindi opportuno crearne una in questo formato. Una favicon di dimensioni maggiori è consigliata per gli schermi ad alta risoluzione, mentre il formato più piccolo è comune per molti altri scopi. È quindi più semplice includere entrambi i formati nel codice.

Oltre a queste due dimensioni per le favicon, ci sono formati che sono altrettanto utili e che idealmente dovrebbero essere inclusi. Ciò è particolarmente importante per Google, perché i risultati di ricerca vengono visualizzati tramite una favicon sulla piattaforma, le cui dimensioni dovrebbero essere di 48 x 48 pixel. In alternativa, è possibile scegliere un formato che sia un multiplo di queste dimensioni. Queste misure sono importanti anche per Android. Il sistema operativo utilizza favicon di queste dimensioni per posizionare i collegamenti nella schermata iniziale. Per i dispositivi con una risoluzione dello schermo elevata, può servire anche il formato per la favicon di 192 x 192 pixel.

La situazione si complica un po’ con il concorrente Apple. A seconda del dispositivo finale, sono ottimali diversi formati di favicon. Per l’iPhone si utilizza il formato 60 x 60 pixel. Tuttavia, è possibile anche una risoluzione significativamente più alta, purché sia un multiplo di questo valore. Ciò consente una visualizzazione ottimale ad alta risoluzione e viene ridimensionata per altri scopi. Un’immagine di 180 x 180 pixel è quindi una buona scelta. Le icone su iPad, invece, vengono visualizzate 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 dispositivi si applicano ulteriori eccezioni. Per i dispositivi più vecchi, in particolare, sono teoricamente necessarie misure aggiuntive affinché le dimensioni dell’icona nel browser siano corrette. Qui troverete un elenco chiaro delle dimensioni più comuni:

Potete utilizzare vari formati immagine per la favicon. Tuttavia, il formato icona .ico di Windows, supportato da numerosi browser, è utilizzato molto frequentemente. Soprattutto per le immagini più grandi che possono funzionare 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 considerazione quando cercate la favicon della dimensione giusta per il vostro sito web. Per questo motivo, il modo più semplice per farlo è quello di utilizzare un generatore automatico. Questo vi guiderà attraverso 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 aggiungere la favicon in tre modi diversi
• Inserire una favicon con HTML