Cos'è la Favicon?
Favicon è un termine inglese, contrazione di favorites icon.
In informatica indica un'icona associata ad una particolare pagina web.
Solitamente la favicon è una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato.
La favicon viene visualizzata alla sinistra dell'URL nella barra degli indirizzi di un browser, nel momento in cui si naviga un sito che ne è provvisto.
L'icona è inoltre visualizzata nel menu dei preferiti di un browser.
Come si inserisce la Favicon?
In origine la favicon era semplicemente posta nella directory radice del webserver con il nome favicon.ico e usata direttamente da Internet Explorer.
Più tardi è stato introdotto un apposito tag HTML per specificare la posizione del file.
Il tag viene posto nella sezione head di un file HTML con sintassi:
<link rel="shortcut icon" href="<percorso>/favicon.ico" />
o, in conformità agli standard imposti dal World Wide Web Consortium:
<link rel="icon" href="http://<percorso>/favicon.ico" />
In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 pixel se .ico) può essere usata come favicon. Alternativamente al formato .ico, possono essere usati anche i formati .gif e .png di qualsiasi dimensione.
Sfruttando le potenzialità del formato .gif è possibile creare delle favicon animate, anche se esse sono supportate solo da alcuni browser.
Per usare i formati GIF o PNG i tag rispettivamente necessari sono:
<link rel="icon" href="http://<percorso>/favicon.gif" type="image/gif" />
oppure
<link rel="icon" href="http://<percorso>/favicon.png" type="image/png" />
In pratica...
Ora vediamo come creare un file .ico e questo lo inseriremo come nostra Favicon.
Partiamo da un'immagine .gif e con l'aiuto del sito http://www.html-kit.com/favicon/ generiamo un file .ico.
Possiamo creare direttamente una Favicon con l'aiuto di quest'altro sito http://antifavicon.com/index-it.html.
Ora inseriamo il tag con la nostra Favicon:
<head>
...
<link rel="shortcut icon" href="http://TUO SITO/images/favicon.ico" />
<link rel="icon" href="http://TUO SITO/images/favicon.ico" />
...
</head>
dove nel TUO SITO inserirai il nome completo del tuo sito e images è la cartella dove inserirai la tua Favicon, quest'ultima cartella può anche essere diversa.