Avrete senz'altro notato che, quando si salvano i siti nei preferiti, cominciano a comparire nella barra degli indirizzi, delle simpatiche icone che di solito riportano il logo dell'azienda o del sito.
Come si crea l'icona per il proprio sito?
Ecco alcune semplici istruzioni.
Per prima cosa crea una immagine o si copia da un sito salvandola nel formato che si vuole. Va bene il png, ma vanno altrettanto bene anche immagini in GIF o BMP o Jpeg;
Poi bisogna convertire l'immagine in un apposito file che si chiamerà "favicon.ico". Per farlo si può usare una pagina online, che contiene un piccolo convertitore di icone.
Eccolo il link alla pagina:
Quindi si carica sul server il file favicon.ico (che contiene l'icona) Normalmente, il file contenente l'icona (favicon.ico) va posizionato nella root del proprio sito.
Riporto la descrizione completa tratta da Wikipedia:
Favicon è un termine inglese, contrazione di favorites icon. In informatica indica un'icona associata a 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. Nata come funzionalità di Microsoft Internet Explorer versione 5, in seguito è stata integrata su molti altri browser tra cui: Firefox, Mozilla, Opera, Safari, e Konqueror.
In origine la favicon era semplicemente posta nella directory radice del webserver con il nome favicon.ico e usata direttamente da Internet Explorer. Anche se questo metodo rimane funzionante, è 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à alle specifiche definite 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 ma anche 48×48 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 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" />
o
<link rel="icon" href="http://<percorso>/favicon.png" type="image/png" />
Se si carica una favicon per la prima volta, oppure si sostituisce
una precedente, per visualizzarla nel browser può essere necessario
cancellare la cache, non essendo a volte sufficiente ricaricare la pagina.
Supporto dei tipi di favicon
| Browser | ICO | PNG | GIF | GIF animato | JPEG | APNG | SVG |
|---|---|---|---|---|---|---|---|
| Google Chrome | Sì | Da 4.0 | Da 4.0 | No | Da 4.0 | No | No |
| Internet Explorer | Da 4.0 | Da 8.0 | No | No | Da 8.0 | No | No |
| Mozilla Firefox | Sì | Sì | Sì | Sì | Sì | Da 3.0 | No |
| Opera | Sì | Sì | Sì | No | Sì | Sì | Da 9.6 |
| Safari | Sì | Da 4.0 | Da 4.0 | No | Da 4.0 | No | No |
