Come inserire una favicon in Blogger visibile anche con Internet Explorer.

La favicon è quella piccola immagine che compare accanto all'indirizzo nella barra del browser. Se si mette un sito nei Preferiti si visualizza anche in quel menù e permette di far risaltare meglio i siti e caratterizzarli per un migliore riconoscimento.

Questa personalizzazione è comunque un arricchimento per il blog e fa una buona impressione sui visitatori. I siti che hanno un'immagine al posto della anonima B di Blogger guadagnano già dei punti di primo acchito.

C'era il fatto che questa personalizzazione non era facile visualizzarla con Internet Explorer, anzi era praticamente impossibile per i blog su Blogger. Il problema risiedeva nella mancata conversione dei file immagine in file .ico. Vediamo come procedere per inserire una favicon visibile anche con IE8.

Occorre innanzitutto scaricare il programma @icon sushi che può anche essere fatto da qui nella sua versione Installer. Dopo l'installazione occorre scegliere l'immagine da mettere come favicon. E' meglio che sia quadrata e che abbia una dimensione di 16x16 pixel o, alternativamente, di 32x32 pixel.

Aprire @icon sushi e cliccare su File > Open per selezionare il file immagine da convertire. Supporta molti formati ma non quello GIF. Per la conversione in file .ICO occorre cliccare sulla seconda icona da destra "Save as Single Icon"  e scegliere la cartella di destinazione

Il file salvato sarà del tipo nome-favico.ico e dovrà essere caricato sul web. Non sono molti i servizi che supportano questo formato. Per esempio Picasa non lo accetta. E' invece possibile archiviarlo su Skydrive e acquisirne l'URL.

Adesso bisogna fare una piccola modifica al modello. Andare quindi si Design > Modifica HTML e cercare la riga </head>. Immediatamente sopra incollate il seguente codice

<!--FAVICON INIZIO-->
<link href='http://public.blu.livefilestore.com/y1pPDjpYj5ClPF6ZYlGOLH4W9bBBdnargM9dkAbuPsKt_pjlr12l_vp62pLvTLVjLZ7sV7wRe9CVAvkyGPJW8zWEA/parsifal32.ico' rel='shortcut icon'/>
<link href='http://public.blu.livefilestore.com/y1pPDjpYj5ClPF6ZYlGOLH4W9bBBdnargM9dkAbuPsKt_pjlr12l_vp62pLvTLVjLZ7sV7wRe9CVAvkyGPJW8zWEA/parsifal32.ico' rel='icon'/>
<!--FAVICON FINE-->

Salvate il modello. Alcune considerazioni finali:

1. Al posto dell'indirizzo della mia favicon evidenziato di rosso inserite quello della vostra immagine in entrambe le righe del codice
2. L'indirizzo che dà Skydrive era il seguente e contiene un'altra stringa dopo l'URL vero e proprio
    http://public.blu.livefilestore.com/y1pPDjpYj5ClPF6ZYlGOLH4W9bBBdnargM9dkAbuPsKt_pjlr12l_vp62pLvTLVjLZ7sV7wRe9CVAvkyGPJW8zWEA/parsifal32.ico?psid=1
   Ho testato il funzionamento sia mantenendo la parte finale dopo l'estensione ico che togliendola e la favicon si vede in entrambi i casi. Quindi fate un po' come vi pare
3. Non si possono caricare immagini animate perché il formato ICO non le supporta
4. La favicon sarà visibile in Firefox, Internet Explorer e Opera ma non in Chrome e Safari. In ogni caso i tre browser supportati rappresentano circa il 90% del mercato.
5. Si possono creare ed inserire in un blog su Blogger anche favicon animate o con testo scorrevole ma queste saranno visibili solo con Firefox e Opera.
6. Al posto del programma @icon sushi può essere usato uno dei tanti tool online per creare favicon come, per esempio, Favicon.cc con cui possiamo disegnarcela da soli oppure generarla da una immagine del computer.