Aggiungere una favicon in HTML

di Michele Costanzo Commenta

favicon in html
La favicon, contrazione dell’espressione inglese favorites icon, è la piccola icona che la maggior parte dei browser associa ad un sito web. Questo elemento ricopre un ruolo importante nel migliorare la riconoscibilità del sito ed allo stesso tempo facilità gli utenti quando cercano una pagina tra i segnalibri o la cronologia.

Le caratteristiche di una favicon

In passato abbiamo visto come personalizzare la favicon sulla piattaforma Blogger. In questa guida generalizziamo il concetto e analizziamo come personalizzare il codice HTML di una pagina in modo che includa anche un riferimento alla favicon. Prima di vedere questo aspetto però soffermiamoci sulla favicon in quanto tale.

Purtroppo negli anni i vari browser hanno gestito in maniera poco omogenea le favicon per cui esistono delle incongruenza nella scelta dei formati e nelle dichiarazioni nel codice. In linea di principio qualsiasi immagine nei principali formati grafici (jpg, png, gif, etc.) può essere utilizzata come favicon. All’atto pratico invece la migliore compatibilità sembra data dalle icone in formato .ico. Anche per quanto riguarda le dimensioni i vari browser seguono scelte diverse, normalmente tuttavia una icona di 16×16 pixel viene correttamente interpretata dai più software di navigazione più diffusi.

Dichiarare la favicon in HTML

Una vecchia regola prevedeva che per associare una favicon ad un sito fosse sufficiente inserire una icona di nome “favicon.ico” nella radice del sito. In realtà attualmente il modo migliore di procedere consiste nel dichiarare la favicon all’interno della sezione <head> della pagina HTML secondo il seguente schema:
<link rel=”icon” href=”/miaicona.ico” />

In questo esempio si presuppone che l’icona “miaicona.ico” sia posta nella directory principale del sito, in caso contrario ne andrà inserito tra gli apici il percorso relativo o completo. E’ da notare infine che per la favicon in generale si può usare qualsiasi nome ma si ottiene una migliore compatibilità con i vecchi browser se si usa in nome standard “favicon.ico”.