Personalizzare la favicon su Blogger.

Le favicon sono quelle piccolissime immagini che appaiono accanto all'indirizzo del browser quando si apre un sito. Il nome deriva dalla contrazione dell'espressione favorite icon (o favourite) ed è diventato di uso comune anche in italiano. Poche ore fa con un post sul blog Blogger in Draft è stato annunciato che sarà possibile caricare la nostra immagine preferita senza mettere mano al codice. L'operazione è già possibile anche per i blog in lingua italiana e per poterla effettuare occorre loggarci nella Bacheca di Blogger in Draft. La cosa è ancora talmente in fase sperimentale che anche il layout ne risente visto che il Modifica viene a sovrapporsi a Icona preferita

In Design > Elementi pagina sarà visibile in alto a sinistra il link per inserire la nostra icona. Cliccando su Modifica si aprirà una nuova finestra in cui selezionare una immagine in formato ICO. E' consigliata una dimensione di 16x16 pixel.

Si termina cliccando su Salva. L'icona sarà visibile su Design > Elementi pagina e si potrà visualizzare anche nei browser dopo che si è operato un rinfrescamento della pagina (andando su F5). Se non comparisse si può procedere alla rimozione dei cookie per vedere di risolvere. Nel caso si avesse un template fortemente personalizzato o anche del vecchio tipo, questi sforzi sarebbero spesso vani e l'icona non comparirebbe. Elenco una serie di strumenti gratuiti che possono essere usati per convertire una immagine in formato JPG, PNG o GIF in ICO per poi poterla caricare su Blogger:

1. GenFavicon -
2. Dynamic Drive -
3. Favikon -
4. Favicon from Pics -
5. Favicon.cc -
6. Antifavicon -
7. Degraeve Favicon Editor -
8. Favicon Generator -
9. Graphics Guru -

Con alcuni di questi strumenti si può creare la favicon senza caricare l'immagine di partenza ma utilizzando gli strumenti di disegno online. Dopo che si è inserita la nostra icona su Blogger con il procedimento appena descritto, in Design > Modifica HTML comparirà questa linea di codice

<link href='http://nomeblog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>

sotto all'altra riga (anche non immediatamente)

<b:include data='blog' name='all-head-content'/>

Se non vediamo una tale riga vuol dire che il nostro modello non è in grado di supportare questa funzionalità. Dovremo quindi utilizzare il vecchio metodo manuale che consiste nel generare un file ICO con gli strumenti appena elencati, nel caricarlo su hosting che supportino questa estensione come DropBox, ImageShack o SkyDrive e nell'acquisirne il link diretto. Si va quindi su Design > Modifica HTML, si cerca la riga </head> e si incolla il seguente codice

<!--FAVICON INIZIO-->
<link href='http://dl.dropbox.com/u/2574553/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://dl.dropbox.com/u/2574553/favicon.ico' rel='icon' type='image/x-icon'/>
<!--FAVICON FINE-->

Si salva il modello e la favicon sarà visibile su Internet Explorer, Firefox e Chrome. Al posto dell'URL in rosso, ripetuto due volte, va inserito il link diretto del file ICO caricato sul servizio di hosting prescelto. Anche in questo caso potrebbe essere necessario rinfrescare la pagina.