Pubblicato il 04/12/08 - aggiornato il  | 4 commenti :

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

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

images         idee per      computer

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.

image

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

image

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

image

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.


4 commenti :

  1. Altra miglioria da aggiungere alla lista delle modifiche che devo fare al mio blog...e lo vuoi sapere la maggior parte sono descritte dai tuoi articoli!!!!
    Per me numero 1!!Uh uh! ;-)

    RispondiElimina
  2. @astasia

    mi fai commuovere se dici così :-)

    RispondiElimina
  3. Ogni tanto si torna a ripetizione dal Maestro.
    Ciao Parsi!

    :-)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy