Favicon Ico
La Favicon è l'icona grafica di un sito web che compare sulla barra degli indirizzi del browser. Il termine Favicon è l'abbreviazione dei termini inglesi favorites icon ossia icona dei favoriti.
A cosa serve
La Favicon consente di aggiungere una icona accanto all'indirizzo URL del sito o della pagina web.
L'icona grafica viene mostrata nella barra degli indirizzi del browser sulla sinistra dell'indirizzo Url della pagina e sulle schede del browser.
Se l'indirizzo viene aggiunto tra i segnalibri dei preferiti del browser, l'icona grafica viene mostrata anche nella lista dei siti preferiti.
Quest'ultima funzione spiega anche perché l'icona è chiamata Favorites Icon ( icona dei siti favoriti ).
Come creare la Favicon
La Favicon è semplicemente un'immagine in formato Gif o Png. Può essere un'immagine statica ( es. logo ) o animata.
In genere, ha dimensioni molto contenute, ad esempio 16x16 pixel o 32x32 pixel.
L'immagine da usare come Favicon può essere creata con un software grafico di fotoritocco ( es. Gimp, PhotoShop, Fireworks, ecc. ).
Come aggiungere l'icona sull'indirizzo Url del sito
Il file dell'icona deve essere rinominato in Favicon.ico e caricato nella root del dominio.
Cos'è la root? La root è la cartella principale del server dove si trova anche il file index del sito web. E' anche chiamata radice o directory principale del website.
Quando il browser visualizza una pagina del sito web, verifica l'esistenza del file Favicon.ico nella root della cartella principale e la visualizza sul browser.
E' comunque consigliabile indicare il file grafico dell'icona sul documento Html tramite il tag Link Rel Icon:
<link rel="icon" href="http://[percorso]/favicon.ico" >
Il tag Link Rel Icon Va inserito nella sezione Head di tutte le pagine del sito web.
Perché conviene utilizzare il tag Link Rel Icon?
Questo tag riduce gli imprevisti sul browser e consente di utilizzare come Favicon le immagini che non si trovano nella root del sito e utilizzare Favicon diverse nelle pagine web del website.
Inoltre, se due siti web condividono la stessa root, grazie al tag link possono usare Favicon differenti e non la stessa.
Su quali browser funziona la Favicon
La favicon viene mostrata su tutti i brower. Tuttavia, potrebbero esserci delle differenze a seconda del browser.
In particolar modo, potrebbero cambiare le modalità di visualizzazione e le specifiche tecniche da utilizzare per farla riconoscere sul sito web.
Alcuni browser visualizzano l'icona nella barra degli indirizzi URL del browser ( es. Internet Explorer ), altri soltanto nelle schede e nella lista dei preferiti ( Mozilla Firefox e Google Chrome ).
Il tag link rel icon
Per mostrare l'icona grafica sulla barra degli indirizzi è consigliabile indicarla nel documento Html di ogni pagina web del sito tramite il tag link:
<link rel="icon" href="http://[percorso]/favicon.ico" >
L'attributo rel=icon comunica al browser che si tratta dell'icona favorita, mentre l'attributo href indica il percorso o l'indirizzo del file grafico sul sito web, ossia quale immagine utilizzare come icona.
Il tag link deve essere inserito nella sezione Head del documento Html.
<HTML>
<HEAD>
<LINK REL="ICON" href="http://[percorso]/favicon.ico" >
</HEAD>
<BODY>contenuto del documento</BODY>
</HTML>
Questo tag permette di utilizzare come icona anche un'immagine situata in una cartella interna e diversa dalla root del webserver.
Consiglio di usare il tag link anche se l'icona si trova nella directory radice ( root ), per evitare problemi di visualizzazione con i browser.
Inoltre, grazie al tag link si possono associare diverse icone Favicon a due o più siti web che utilizzano la stessa root directory del webserver.
Quali sono i vantaggi dell'icona Favicon
L'icona ha prevalentemente una funzione estetica. Consente a un sito web di personalizzare la grafica della barra degli indirizzi sul browser dell'utente.
Quando l'utente aggiunge l'indirizzo Url della pagina web tra i suoi siti preferiti, l'icona viene mostrata nell'elenco.
Questo permette al sito di spiccare su tutti gli altri e all'utente di trovare più facilmente il sito nella lista dei suoi preferiti.
In conclusione, la Favicon migliora la fidelizzazione degli utenti perché facilita il ritorno degli utenti sul sito web.
Il ritorno degli utenti apporta anche vantaggi dal punto di vista della SEO, perché invia dei segnali di good user experience ai search engine che nel corso del tempo migliorano il posizionamento del sito web sui risultati di ricerca.
