Avrete sicuramente notato che inserendo tra i Preferiti di Internet Explorer alcuni siti web essi vengano identificati non dalla solita icone di "pagina web" ma da una particolare icona personalizzata in base al sito. Tale icona è proprio la favicon.ico.
Iniziamo con un po’ di storia: il nome "favicon" è una contrazione di "favorits icon" ("icona dei preferiti"). Lo scopo originario dell’icona era infatti identificare il sito grazie ad un’icona personalizzabile. Successivamente la favicon fu utilizzata anche come icona per la barra degli indirizzi. E’ importante notare che la favicon.ico è una caratteristica introdotta dal browser Internet Explorer 5. Il che significa che tutte le versioni di IE precedenti alla 5 e tutti gli altri browser (Netscape, Opera, ecc…) non supportano tale caratteristica.
Vediamo come creare l’icona favicon per il proprio sito web. Per prima cosa bisogna ricordare alcune caratteristiche necessarie della favicon:
- deve essere un’immagine di dimensione 16×16 pixel
- deve avere una profondità massima del colore di 8 bit (256 colori)
- deve avere formato icona e estensione ".ico" e nome "favicon" (quindi "favicon.ico")
- deve trovarsi nella cartella principale del sito web (root)
La procedura di creazione è semplice: per prima cosa utilizziamo il nostro programma di grafica preferito, ad esempio Adobe Photoshop, per creare l’immagine di 16×16 pixel che vogliamo utilizzare come icona per il sito web. Una volta creata salviamola come formato bitmap (".bmp") alla minore profondità di colore possibile, di solito 16 bit (65536 colori). Il consiglio è di prestare attenzione ai colori che volete usare nell’icona. Devono essere pochi e soprattutto evitate sfumature, obreggiature, sfocature o simili, in quanto ad una bassa profondità di colore il risultato potrebbe essere pessimo.
Una volta creata l’immagine bitmap dobbiamo convertirla in formato icona. A tale scopo esistono numerosi software di conversioni ed editing, noi utilizzeremo Icon Cool Studio, poichè è molto potente e preciso ma anche estremamente semplice da usare. Aprite l’immagine bitmap che avete creato con questo software usando la funzione "Apri" oppure "Importa". Si apre la finestra "Import from…". Nel riquadro "Image Size" lasciate selezionata solamente la casella "16×16 pixels", che corrisponde alla dimensione dell’icona da creare. Nel riquadro "Colors" lasciate spuntata solo la casella "8 bit", che è la profondità di colore dell’icona finale. Cliccate quindi su "Import now".
A questo punto il software visualizza l’icona nel dettaglio distinguendo pixel per pixel. Potete apportare all’icona tutte le modifiche che volete utilizzando gli strumenti a disposizione nel programma, molto simili a quelli dei comuni software di grafica. Una volta terminato l’editing (che potrebbe anche non essere necessario) è possibile salvare l’icona. Usando il comando "Save as…" scegliamo dove salvare l’icona. Il nome deve tassativamente essere "favicon.ico".
A questo punto potete fare l’upload della vostra favicon.ico nella cartella principale del sito web. Se provate ad inserire il sito tra i preferiti di IE notate che il nome del vostro sito è ora accompagnato dall’icona che avete creato.
Approfondendo un po’ l’argomento è necessario dire che in realtà l’icona non deve chiamarsi tassativamente favicon.ico, nè tantomeno deve essere collocata obbligatoriamente nella cartella principale del sito. Possiamo infatti cambiare nome e path dell’icona, a patto che però questo sia indicato in tutte le pagine web del sito aggiungendo tra i tag <head></head> del codice HTML la seguente riga:
<LINK REL="shortcut icon" HREF="http://www.miosito.com/miacartella/miaicona.ico">
Ovviamente bisogna inserire nell’attributo HREF il giusto path dell’icona. In questo modo è anche possibile definire icone diverse per le singole pagine, in quanto ogni paginadeve possedere questa riga di codice e il path dell’icona può essere scelto liberamente.