Nelle scorse settimane abbiamo visto l’importanza della favicon nel caratterizzare un sito web e favorirne la riconoscibilità. In particolare abbiamo poi analizzato il codice HTML che consente di indicare ai browser la posizione dell’icona da utilizzare con funzione di favicon.
Una favicon GIF o PNG
In questa guida vedremo come modificare il codice HTML quando si decide di utilizzare con funzione di favicon una immagine GIF o PNG in sostituzione della più “tradizionale” icona in formato ICO. Come nel caso che abbiamo già analizzato l’indicazione della favicon andrà effettuata all’interno della sezione <head> del codice HTML.
Per usare una favicon in formato GIF utilizzeremo un codice di questo tipo:
<link rel=”icon” href=”/miaicona.gif” type=”image/gif” />
Possiamo osservare che l’unica significativa variazione è rappresentata dall’introduzione dell’attributo type=”image/gif” che indica al browser il fatto che l’icona del sito è costituita da una immagine di tipo GIF.
Analogo è il caso delle favicon in formato PNG per le quali utilizzeremo un codice con questa forma:
<link rel=”icon” href=”/miaicona.png” type=”image/png” />
In questo caso in “type” viene ovviamente indicato il formato PNG.
Piccoli accorgimenti
Nei codici che abbiamo visto il parametro “href” individua il percorso relativo o assoluto dell’immagine da utilizzare come icona. Ovviamente quindi tale indirizzo andrà modificato in funzione di come è stato progetto il sito.
Anche nel caso delle favicon in formato GIF o PNG l’immagine usata può avere qualsiasi nome ma si ottiene una migliore compatibilità con in vecchi browser utilizzando rispettivamente file denominati favicon.gif o favicon.png.
Sempre nell’ottica di una migliore compatibilità con alcuni browser può essere utile collocare una icona “di default” denominata “favicon.ico” nella cartella radice del sito.