24 ottobre 2008

Inserire una FavIcon in un Blog Blogspot

Sapete cos'è una favicon? è la piccola icona che accompagna il vostro sito nei bookmarks, tabs, ecc. del vostro browser. Normalmente in un Blog Blogspot questa è la caratteristica "B" rossa. Niente di male, ma se volete qualcosa di più personalizzato, continuate a leggere questo post e vi spiego cosa fare.

Per prima cosa dovete procurarvi l'icona che desiderate: le strade sono diverse:
  • la realizzate da soli con programmi appositi che permettono il salvataggio in formato .ico
  • la recuperate in qualche sito che distribuisce icone gratuite
  • prendete una immagine che avete in un qualsiasi formato e la convertite in icona .ico


Personalmente ho seguito questa strada ed ho usato IrfanView (freeware) per la conversione: Ho preso la mia immagine (la lampadina di questo post), l'ho aperta con IrfanView , l'ho ridimensionata a 32 x 32 pixel, e l'ho salvata come lampadina.ico
Attenzione alle dimensioni, sebbene qualcuno suggerisca di usare il formato 16 x 16 pixel, non sembra funzionare, il 32 x 32 si! AGGIORNAMENTO!!! Da ieri (29/10/2008) la versione 32 x 32 non funziona più, mentre quella 16 x 16 si!!
A questo punto dovete uplodare l'immagine in un qualsiasi servizio di hosting che permetta l'accesso diretto ai file tramite url, del tipo http://www.serviziohost.com/lampadina.ico
Personalmente ho utilizzato Altervista (200 Mb di spazio web gratuito).
Fatto l'upload, segnatevi da qualche parte l'indirizzo completo della vostra icona.
Ora accedete nella parte di personalizzazione del layout del vostro blog ed andate accedete a "Modifica HTML". Dopo aver fatto, per sicurezza, il backup del vostro modello, cercate nel codice:


<head>

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

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

<b:skin><![CDATA[/*


ed aggiungete dopo </title> e prima di <b:skin> un paio di righe, in modo che il tutto assomigli a:


<head>

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

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

<link href='http.//www.serviziohost.com/lampadina.ico' rel='shortcut icon'/>

<link href='http://www.serviziohost.com/lampadina.ico' rel='icon'/>

<b:skin><![CDATA[/*


dove ovviamente sostituirete ad http.//www.serviziohost.com/lampadina.ico il vero url della vostra icona.
A questo punto salvate ed ammirate il risultato!

Nessun commento:

Posta un commento