Come visualizzare una favicon personalizzata di un blog su Blogger anche con Chrome oltre che con Firefox, Opera e Internet Explorer 8.

Le favicon sono quelle piccole immagini che si vedono accanto agli URL nella barra degli indirizzi del browser o che si visualizzano nei Preferiti quando si apre una cartella. Non tutti i siti ne hanno una personalizzata ma quelli che ce l'hanno sono avvantaggiati in quanto a visibilità quando si vanno a cercare tra i Segnalibri

I blog su Blogger hanno tutti di default una B bianca su sfondo arancio che non è il massimo della esteticità e, quello che è peggio, non si distinguono uno dall'altro

Avevo già presentato un metodo per rendere visibile una icona personalizzata per il nostro blog su Blogger. L'espressione favicon infatti non è altro che una contrazione dell'espressione favourite icon. Riepilogo brevemente il procedimento:

1. Per visualizzare la favicon in IE occorre creare un file in formato ICO che è l'estensione canonica per le favicon. Si può fare attraverso il programma gratuito @icon sushi che converte una immagine del tipo BMP/PNG/PSD (non JPG) in ICO. L'immagine che scegliete dovrà essere quadrata di dimensioni 16x16 o 32x32 pixel. Si possono scegliere anche dimensioni più grandi, l'importante è che sia quadrata.
2. Si va in Design > Modifica HTML e si incolla il codice nel modo descritto nell'articolo precedente

Con quel procedimento la favicon era visibile su Firefox, Internet Explorer 8 e Opera. Non lo era ancora con Chrome. In un commento su questo blog mi è stato fatto notare che nel Forum di Chrome era stato postato un hack per ovviare all'inconveniente. non posso inserire il credit al blog del commentatore perché non lo ha comunicato e ha un Profilo non disponibile.

Dopo aver generato il file ICO con la vostra immagine, occorre che la carichiate su Skydrive perché Picasa non accetta quel formato di file. Andate su Design > Modifica HTML e cercate questa 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' type='image/x-icon'/>
<link href='http://public.blu.livefilestore.com/y1pPDjpYj5ClPF6ZYlGOLH4W9bBBdnargM9dkAbuPsKt_pjlr12l_vp62pLvTLVjLZ7sV7wRe9CVAvkyGPJW8zWEA/parsifal32.ico' rel='icon' type='image/x-icon'/>
<!--FAVICON FINE-->

Dove al posto degli hotlink alla mia immagine evidenziati di rosso mettete i vostri acquisiti da Skydrive. Come mostrato nel seguente screenshot

Dopo aver salvato il modello se aprite il vostro blog con un qualsiasi browser sarà visualizzata la favicon che avete personalizzato.

Lo screenshot si riferisce a Google Chrome che fino a questo momento non mostrava favicon. Rispetto al precedente codice è stata solo aggiunta la stringa type='image/x-icon'.

Se volete visualizzare una favicon personalizzata nel vostro blog Wordpress seguite le indicazioni di questo tutorial.