GUIDA: Favicon, come inserire una mini icona nell'URL di Blogger

Favicon, contrazione di "favorite icons", letteralmente icone preferite, è il nome delle minuscole icone che trovate prima dell'URL della pagina che state visitando all'interno della barra degli indirizzi del vostro browser.

Ogni sito che si rispetti ha la propria favicon, un simbolo o un logo che permettono all'utente di capire immediatamente su quale sito si trova, google ad esempio ha una g bianca circondata dai suoi 4 colori, youtube ha semplicemente il proprio logo, questo blog infine ha il simbolo 24 su sfondo nero.

Di default tutti i blog sottodomini blogspot hanno come favicon il simbolo arancione di blogger, ora vediamo come poter modificare la favicon per inserire la nostra icona personale.

1) Creare l'icona:
Innanzitutto occorre creare l'icona del nostro blog, la dimensione dell'immagine deve essere tassativamente 16x16 pixel o 32x32 pixel, le icone a 16 pixel hanno il vantaggio di essere compatibili anche con i browser più datati.
Una volta creata, salvate l'immagine con il suffisso .ico al posto di jpg o gif in modo da modificarne l'estensione.

2) Caricarla sul web
Ora caricate il file sul web in modo da mantenere l'estensione .ico, i principali siti di fotografia come flickr non permettono di caricare file di questa estensione, quindi la mia icona l'ho caricata su un sito hostato a netsons.org, ma potete caricarla ovunque purchè l'immagine resti pubblica.

3) Modifcate il template di blogger
entrate su blogger nella scheda design>modifica html e cercate:

<title><data:blog.pagetitle/></title>

subito sotto inserite il seguente testo:


<link href="'URL" rel="'shortcut" type="'image/vnd.microsoft.icon'/">

e

<link href="'URL" rel="'shortcut" type="'image/x-icon'/">


al posto della scritta in URL inserite l'url dell'immagine che avete caricato su internet, salvate il modello et voilla, come per magia avrete un icona personalizzata nel vostro blog, che ora ha un aspetto molto più professionale.

In alternativa se non riuscite a caricare sul web il file con estensione ico rinominatelo .gif o .png e su blogger inserite:

per il file .png

<link href="'URL" rel="'shortcut" type="'image/png'/">

per il file.gif

<link href="'URL" rel="'shortcut" type="'image/gif'/">

sostituendo sempre URL con l'url dell'immagine caricate in internet.


in alcuni casi possono verifacarsi problemi di visualizzazione legati al browser, può capitare a volte infatti che internet explorer non riesca a visualizzare correttamente l'icona, se avete dei problemi con IE provate a visualizzare il blog con firefox, che a caricare le icone è assolutamnete infallibile.