Una favicon (abbreviazione di Favorites icon), conosciuta anche con il nome di page icon o il nome di favoicon, e' una icona associata ad un particolare sito web o pagina web, che ogni webmaster puo' creare e inserire nel proprio sito, cosi' che i browser grafici come Internet Explorer, Firefox, Mozilla, Opera, Safari, Konqueror, etc... possano farne uso.

Infatti, i browser che supportano le favicon possono visualizzarle:

- nella barra degli indirizzi;
- vicino al nome del sito nella lista dei favoriti (bookmarks);
- vicono al titolo della pagina nei tab.

Inizialmente per utilizzare una favoicon nel proprio sito, bastava inserire un file chiamato favicon.ico nella root del webserver.
Questo file era dunque utilizzato automaticamente da Internet Explorer nella visualizzazione dei favoriti (bookmarks).

In seguito e' stato creato uno standard HTML, piu' flessibile e performante (praticamente compatibile con tutti i browser in commercio), per indicare la locazione dell'icona per ogni singola pagina, che consiste nell'utilizzo di una istruzione HTML nella sezione HEAD di una pagina html.

Come creare la FAVICON

Per creare l'icona che dovra' essere visualizzata e salvata dai browser, si puo' utilizzare un normale programma di grafica o andare in appositi siti che, gratuitamente, mettono a disposizione online dei software appositi per generare favicon, come:

Anti-Favicon (http://antifavicon.com/index-it.html)
Dynamic-Drive (http://tools.dynamicdrive.com/favicon/)
Html Kit (www.htmlkit.com/services/favicon/)

L'icona cosi' creata potra' essere salvata in formato .ico (per essere compatibile con tutti i browser di vecchia e nuova generazione), o in formato .gif o .png (quest'ultimi due formati compatibili, pero', solo con i browser di nuova generazione).

L'icona dovra' avere una delle seguenti dimensioni (a seconda del tipo di file che si e' deciso di utilizzare):

- se in formato .ico
Pixel 16×16 oppure 32×32 (anche 64×64 e 128×128 se si usa Mac OS X) con 256 o 16 milioni di colori.

- se in formato .gif
Pixel 16×16 con 256 colori.

- se in formato .png
Pixel 16×16 con 256 colori o 24-bit.

Cosa fondamentale e' che il file icona cosi' creato dovra' avere necessariamente il nome favicon

Dove posizionare la FAVICON

Di default il file favicon precedentemente creato viene cercato da tutti i browser nella root del proprio web server.

Quindi, per evitare problemi di compatibilita', e' caldamente consigliato inserire il file favicon nella root del proprio web server (ossia nella cartella principale del sito).

Comunque si rammenti che i browser di ultima generazione, riuscendo ad interpretare il comando link (che, come si vedra' nel passo successivo, dovra' essere inserito all'interno delle pagine web del sito), lo andranno a cercare all'indirizzo che gli abbiamo specificato nel comando, e quindi se ne potra' mettere indifferentemente uno interno al sito o anche uno esterno.
I browser di vecchia generazione, invece, non riuscendo a interpretare il comando link, non sapranno che il file e' stato inserito in un'altra posizione, e lo andranno a cercare in quella di default (cioe' nella root del web server), dove, ovviamente, non lo troveranno.

Il codice html per richiamare la FAVICON

Per concludere, ora occorrono inserire, nella sezione < HEAD > di ogni pagina web del proprio sito, le istruzioni HTML che richiamino l'icona.

Se si e' deciso di optare per una immagine .ico (come suggerito), le istruzioni saranno le seguenti (si dovra' modificare soltanto l'indirizzo dove si trova l'icona, che nell'esempio e': www.esempio.com/favicon.ico):

< link rel="shortcut icon" href="http://www.esempio.com/favicon.ico" type="image/x-icon" >
< link rel="icon" href="http://www.esempio.com/favicon.ico" type="image/x-icon" >


Se si e' posizionata l'icona nella root del web server l'indirizzo sara' simile a:
http://www.esempio.com/favicon.ico


NOTA 1:
Se si e' deciso, invece, di utilizzare una immagine .png o .gif le istruzioni saranno le seguenti (si dovra' modificare soltanto l'indirizzo dove si trova l'immagine, che nell'esempio e': www.esempio.com/favicon.png o www.esempio.com/favicon.gif):


- se e' un'immagine .png

< link rel="shortcut icon" href="http://www.esempio.com/favicon.png" type="image/png" >
< link rel="icon" href="http://www.esempio.com/favicon.png" type="image/png" >



- se e' un'immagine .gif

< link rel="shortcut icon" href="http://www.esempio.com/favicon.gif" type="image/gif" >
< link rel="icon" href="http://www.esempio.com/favicon.gif" type="image/gif" >



NOTA 2:
Se si utilizza XHTML anziche' l'html, le istruzioni avranno in piu' il simbolo / posto alla fine. In pratica saranno simili a:

< link rel="shortcut icon" href="http://www.esempio.com/favicon.ico" type="image/x-icon" />
< link rel="icon" href="http://www.esempio.com/favicon.ico" type="image/x-icon" />


Ovviamente stessa cosa se si usano immagini .png o .gif, avendo l'accortezza di modificare l'attributo type come visto nella NOTA 1.