Inserire una favicon animata in GIF in Blogger.

Solo se avete Firefox la potete vedere mentre con Explorer vedrete solo un'immagine fissa.

Ma cosa è una favicon? E' quella immagine piccola che sta a sinistra dell'URL o del nome del sito nei Browser ed è un po' la caratteristica o, se volete, il logo del blog. Dico subito che avevo fretta e non ho fatto un lavoro di fino, mi ripropongo quindi di migliorarlo decisamente nei prossimi giorni. Adesso voglio solo mostrarvi il procedimento che è semplicissimo.

In questo articolo avevo spiegato come inserire una favicon in Blogger. Adesso facciamo un ulteriore passo avanti e creiamola animata. Dico subito che ci sono dei siti in cui si può fare gratuitamente e sono

• Animated Favicon
• Favicon from Pics

Questi siti però con Blogger fanno un po' i difficili o forse sono io che ho sbagliato qualche procedura. Allora ho deciso di fare da solo e vi dico brevemente la linea che ho seguito. Apriamo un programma di grafica tipo Photoshop e creiamo delle immagini che vogliamo animare perfettamente quadrate. Oppure si possono scegliere immagini qualsiasi senza testo e senza usare programmi di grafica. Non bisogna mettere freni alla fantasia. Ho quindi acquisito queste tre immagini 100x100 pixel

              

Quindi sono andato sul sito GifMake.com e ho inserito le tre immagini attraverso Sfoglia, Upload quindi ho messo un intervallo di 60 tra immagine e immagine. Infine ho cliccato su Generate GIF e scaricato il file in formato GIF pigiando su Download.

Adesso ho fatto una furbata senza sapere se andava a buon fine oppure no. Ho cioè rinominato il file in GIF che avevo scaricato in file ICO. Cioè ho cambiato l'estensione. Il computer mi ha detto che potevo perdere il file ma ho continuato; al posto di favicongif.gif ho sostituito favicongif.ico

In questo file non si vede per niente l'animazione ma questa è presente in forma latente. L'ho quindi caricato su Google Page Creator ma si può usare anche SkyDrive. Ho quindi acquisito l'indirizzo cliccando sul destro del mouse

Sono andato su Layout>Modifica HTML e immediatamente sopra al tag </head> ho incollato questo codice.

<link href='indirizzo-favicon' rel='shortcut icon'/>
<link href='indirizzo-favicon' rel='icon'/>

Dove al posto di indirizzo-favicon ho inserito quello che avevo acquisito su Google Page Creator per la mia immagine GIF rinominata.

Il risultato come potete vedere non è eccellente perché in uno spazio così piccolo è meglio inserire parole più corte o, magari, nessuna parola ma solo immagini. Penso per esempio ad un logo che cambia più volte di colore o si deforma. Io ho utilizzato 3 immagini ma naturalmente se ne possono usare anche di più.

P.S. Lo potete vedere solo se avete Firefox!

 

Ti è piaciuto l'articolo? Vota Ok oppure No. Grazie Mille! Puoi votare le mie notizie anche in questa pagina.