9 dicembre 2009

60 commenti Condividi il post Facebook Twitter Google+

Come personalizzare la favicon del blog

Dopo numerose richieste su come personalizzare la favicon del blog, in particolare come aggiungerne una animata, ecco il post con tutte le istruzioni.

Innanzitutto cos'è la favicon?

Per tutti i blog su Blogger, di default la favicon è rappresentata da un'immagine arancione con una B bianca (questa per intenderci) che compare nella barra degli indirizzi e nel tab del browser:


Per personalizzare la favicon possiamo utilizzare un'immagine di tipo ico o png; per averne una animata dobbiamo utilizzare un'immagine gif.

L'icona deve avere dimensioni 16x16 px oppure 32x32 px.

Il codice da inserire nel template subito dopo la riga
<title><data:blog.pageTitle/></title> è il seguente:

per file .ico:
<link href='url_favicon.ico' rel='shortcut icon' type='image/x-icon'/>

per file .png:
<link href='url_favicon.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

per file .gif:
<link href='url_favicon.gif' rel='icon' type='image/gif'/>

Ed ecco alcuni link utili per creare una vostra favicon personalizzata:

  • favicon.cc: potrete creare la vostra favicon (anche animata) disegnando nell'editor che il servizio mette a disposizione.
  • Free Online Favicon Generator: vi basta caricare un'immagine e avrete la vostra favicon.
  • www.degraeve.com: potrete creare una favicon disegnando sull'editor o caricando una vostra immagine.
  • Iphone icon generator: potrete creare una favicon in stile I-phone.

Per il mio blog ho utilizzato una favicon fissa e una animata . Come al solito queste modifiche non sono interpretate allo stesso modo da tutti i browser. Infatti se aprite il mio blog con Firefox vedete la favicon animata, con Chrome e Internet Explorer invece vedete quella fissa.


E queste sono le favicon animate che ho realizzato per alcuni miei amici:


Resto a disposizione per ogni dubbio e chiarimento.
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

60 commenti

  1. Bravissima Iole, grazie del tuo aiuto e dei tuoi consigli, sei favolosa.
    Un abbraccio Daniela.

    RispondiElimina
  2. ciao iole, nn lo so perche ma a me nn funziona...ho provato con tutti 3 tipi di file...nn lo so dove sbaglio, ho carricato la foto modificata con favicon.cc in sky drive, ho copiuato l'url e ho incollato nel codice,ma niente....
    mha...

    RispondiElimina
  3. @Daniela: grazie! Vedrò presto sul vostro blog una favicon personalizzata???
    @Ivan: forse hai sbagliato a copiare il link da skydrive; se provo a visualizzare l'icona mi chiede di fare il login. Io l'ho usato pochissime volte skydrive, mi ricordo che per copiare l'indirizzo dei file non era così semplice ed intuitivo, controlla anche se l'icona è in una cartella pubblica o privata.

    RispondiElimina
  4. Io non lo so fare.
    Buona serata, un bacio.

    RispondiElimina
  5. Ciao Iole perché non spieghi ai tuoi lettori come fare a inserire la favicom a fianco del titolo del post come si vede sul mio blog?
    A me avevi spiegato via mail come fare (non a metterla nel post li e stato un caso dovuto ad un mio errore) ma colgo l'occasione di questo post per ringraziarti ancora sia per la spiegazione sia per aver creato per me la favicon su "misura".
    Baci

    RispondiElimina
  6. Fatto!!! grazie Iole, non sapevo si potesse usare anche file gif o png!!

    bacioni
    eli

    RispondiElimina
  7. Con IE la favicon non la vedo. Tu la vedi veramente?
    Allora deve essere un problema del mio browser...

    RispondiElimina
  8. @stella: non preoccuparti, la aggiungerò io al template che ti sto realizzando ;)
    @Sauro: grazie per lo spunto per un nuovo post.
    Sono contenta che la favicon su misura ti sia piaciuta!
    @AbcHobby.it: veramente carina la tua favicon animata ^_^
    @parsifal32: soltanto su IE6 non è visibile, mentre su IE7 e IE8 si vede!

    RispondiElimina
  9. ciao iole, giusto quello che mi serviva! mi scuso con te per tutto il lavoro che mi hai fatto, ma alla fine non era quello che volevo... e poi c'erano altri errori nel mio template che non credo sarei mai riuscito a correggere, quindi ho deciso di cambiar del tutto stile di blog, ed in una settimana ho convertito tutto il blog in una specie di sito statico! grazie e scusami x tutto il tempo perso!
    p.s. come mai su crome non funziona no le gif? pur essendo un browser di ultima generazione?
    ciao e buona serata :-)

    RispondiElimina
  10. Sei mitica Iole! Ci proverò sicuramente! Grazie. Paola

    RispondiElimina
  11. Ciao Iole.
    La favicon animata che mi hai inviato l'ho appena inserita nel blog secondo le tue istruzioni...
    E' stupenda!!!!!
    Ti ringrazio infinitamente per l'aiuto ed il tempo che mi hai dedicato!

    RispondiElimina
  12. @Spyke: sono passata qualche giorno fa sul tuo blog e ho notato che avevi cambiato template... non preoccuparti, non ho perso tempo anzi ho imparato come aggiungere il modulo dei commenti incorporato sotto al post nei template non ufficiali, così la prossima volta che qualcuno me lo chiederà so come fare ;)
    Per quanto riguarda Chrome, anch'io mi sono chiesta perché le favicon animate non sono supportate.
    @paolaotto: provaci e fammi sapere! Per qualsiasi problema, contattami pure!
    @Benzene: sono contenta che ti piace! L'ho appena aggiunta alla lista delle favicon realizzate alla fine del post ;)

    RispondiElimina
  13. Iole ciao,
    anche io vorrei caricare la mia favicon... ma non ho mica capito bene come caricarla in blogger... l'ho creata in Free Online Favicon Generator mi dice di fare il download del file e poi di caricarlo sul mio sito... ma ovviamente in blogger non si pò fare... ritengo debba caricarlo da un servizio di hosting ma quale?
    grazie mille! baci

    RispondiElimina
  14. @Francesca Pazienza: non è possibile caricarla direttamente su Blogger ma devi usare un servizio di hosting.
    Eccone alcuni gratuiti:
    ImageShack e TinyPic: per caricare online le favicon .gif o .png; non permettono di caricare le .ico
    digiland: io lo utilizzo sia per le favicon che per qualsiasi altro tipo di file che metto a disposizione nel blog. Occorre però registrarsi per utilizzare il servizio!

    RispondiElimina
  15. Iole ri-ciao,
    sò di essere il massimo della imbranatagine, ma nonostante le tue indicazioni molto chiare non sono riuscita a far apparire la mia favicon... ho usato digilander ho copiato il collegamento al file che ho caricato e poi copiato come da tue istruzioni e niente. Ho provato anche a caricarlo come gif da flicker ed ho usato l'indirizzo url... l'ho copiato e ancora non è apparso nulla. Cos'è che sbaglio?? :-(

    RispondiElimina
  16. @Francesca Pazienza: ho dato un'occhiata al codice html del tuo blog e non vedo il codice per la favicon. Mandami via email il codice che stai provando ad inserire che ti dico cosa non va.

    RispondiElimina
  17. grazie Iole
    per ora è solo l'icona... vorrei riuscire a fare una cosa tipo la tua favicon... cioè icona più testo!
    ma tu la gif animata te la sei creata a parte, giusto?

    buona giornata
    eli

    RispondiElimina
  18. @AbcHobby.it: sì, la mia favicon e quelle per i miei amici le ho realizzate io. Se vuoi te ne faccio una!

    RispondiElimina
  19. ahhhhhhhhhhhhh cosa sentono le mie orecchie????? davvero mi aiuteresti facendone una per me?????
    ti mando una mail....

    super smack!!!!

    RispondiElimina
  20. Iole... grazie, un grazie grande come una casa!!! mi hai creato una favicon super, bellissima, colorata... proprio come la volevo!!!
    sei grande!!!!

    un bacione
    eli

    RispondiElimina
  21. Brava Iole, sei come sempre utilissima!
    Ehm... realizzeresti una favicon per me???
    Io c'ho provato, ma con risultati più che deludenti!!!

    RispondiElimina
  22. @Favoloso: certo! Te ne realizzo una favolosa!!!
    Mandami un'email con: logo, scritta, font, colori, ecc.
    Dimmi come deve essere fatta e in pochi minuti avrai la tua favicon.

    RispondiElimina
  23. ... visto che sei cosi generosa:-) cosa ne dici di crearne una anche per un piccolo bau..bau?? quello che non riesco a capire e' come fai la scritta tutta colorata?
    grassie e buona serata!
    ps. sai se c'e' un modo x scaricare dal web video flash?? software o convertitori online???

    RispondiElimina
  24. @Spyke: ok ne realizzo anche una per te! Mandami un'email con il tuo logo, la scritta che vuoi, il font e i colori che ti piacciono, ecc.
    Riguardo ai video flash... ti riferisci ai filmati .flv?

    RispondiElimina
  25. Io ho inserito il codice per una immagine png sotto la stringa:
    ().
    L'icona è visibile solamente nella home page, e, non è visibile nella pagina dei singoli post.
    Ho provato varie posizioni, ma niente. Ciao da CS

    RispondiElimina
  26. Ciao IOLE...
    intanto ti devo fare gli auguri per il tuo BELLISSIMO ed UTILISSIMO BLOG! Auguroni..mi sta aiutando tantissimo...
    ho provato questa cose è ci sono riuscita...
    adesso però sto cercando como farle più carine..mi piacierebbe fare una gif animata per i miei 2 blog...che programma hai usato? mi potresti autare per favore...
    Un bacione

    ROBERTA fRONTINI

    www.encroixyable.blogspot.com
    www.flames.blogspot.com

    RispondiElimina
  27. Mamma mia! Non sò quante cose già ho cercato di fare, è non ci riesco :(

    RispondiElimina
  28. Basta...proprio non ce la faccio +...ci ho provato talmente tanto :(
    appena puoi dimmi qualcosa per aiutarmi...grazie..un bacio, buona notte!

    RispondiElimina
  29. Grazie per questo utilissimo tutorial: provo subito!

    RispondiElimina
  30. Mi è stato utilissimo questo post!!
    Grazie mille!

    RispondiElimina
  31. Ciao Iole,
    è da un po' che seguo il tuo blog, ma fin'ora non ti ho mai lasciato un commento. Ogni giorno spulcio e trovo sempre qualcosa di carino da mettere nel mio blog. Sei una grande.
    Grazie mille

    RispondiElimina
  32. Interessante...proverò anch'io...grazie

    RispondiElimina
  33. buonasera a te,ho da poco scoperto il tuo blog,e lo sto scuriosando in lungo e in largo...scoprendo trucchi e dritte really interessanti.
    Ti ho aggiunto sul mio blog e spero di essere segnalata qui.
    GRazIe!

    RispondiElimina
  34. @CS: in genere la favicon è visibile in ogni pagina del blog, sia nell'homepage che nei singoli post.
    @Mariana & Roberta: le favicon animate le ho realizzate con Animation Shop Pro, creando dapprima le gif per ogni singolo fotogramma con Paint Shop Pro.

    RispondiElimina
  35. Ciao, scusa se ti faccio una domanda che potrà sembrarti stupida...ma nel momento in cui carico un file png su Free Online Favicon generator, vedo la mia immagine. Quando cerco di creare la favicon, l'immagine scompare. C'è un motivo? Sto sbagliando qualcosa?

    Grazie mille per gli spunti e per l'aiuto!
    Alessia

    RispondiElimina
  36. @WHITE DREAMS: cosa intendi per "Quando cerco di creare la favicon, l'immagine scompare"?
    Ti riferisci forse ai quadratini grigi che compaiono dopo aver cliccato sul pulsante Generate It!?
    Anche a me compaiono, basta scaricare il file .ico sul pc e caricarlo online per utilizzarlo poi nel blog.

    RispondiElimina
  37. grazie mille come sempre le tue guide sono utilissime :). Finalmente sono riuscito anche io a mettere la mia favicon !

    RispondiElimina
  38. ciao Iole, scusa il disturbo. Io ho seguito le tue indicazioni e sono riuscita a caricare la mia favicon, però questa viene visualizzata solo nella homepage. Se si clicca per espandere un post, o per visualizzare tutti i post con un determinato tag, mi compare la classica favicon di blogger. Sai dirmi se è possibile risolvere il problema?

    RispondiElimina
  39. ciao Iole, sono riuscita a risolvere il problema, adesso la favicon mi compare anche espandendo i post. In pratica ho semplicemente spostato il codice della favicon immediatamente prima del tag
    Chissà, forse era un problema col mio template...in ogni caso ho pensato di dirti che avevo risolto prima che ci perdessi del tempo! e magari può tornare utile a qualcun altro...

    RispondiElimina
  40. ciao iole, io non riesco ad aggiungere il favicon al mio blog XD
    mi sapresti aiutare o dirmi come mai?

    RispondiElimina
  41. @missfeliciti99: hai seguito tutte le istruzioni riportate nel post? Ti compare qualche messaggio d'errore?

    RispondiElimina
  42. Ciao Iole!
    Sono qui su Consiglio di Paola di "La cucina di Paolabrunetti".
    Mi piace molto lo stole del suo blog..le immagini che scorrono in Home Page..la musica e tantissime altre cose...ma nn so da dove rifarmi e molte cose nn le so..mi daresti una mano?

    Grazie anticipatamente,MARZIA

    RispondiElimina
  43. Ciao Iole ...
    son riuscita a fare tutto ma ho un problema ...
    2) perché non mi restano in memoria le icone che carico con http://www.prodraw.net/favicon/index.php ???
    nel senso che son visibili per un pò ... dopodiché spariscono di nuovo ... nonostante il Template sia sempre lo stesso e siano ancora presenti i link relativi a loro ???
    (o_°)

    RispondiElimina
  44. @Marzia: per le immagini che scorrono in homepage prova a leggere questi due miei post:
    - Menu fotografico per il blog
    - Come inserire una scritta scorrevole nel blog
    @The Moon: le favicon generate da quel sito vanno scaricate sul proprio pc e caricate online su un servizio di image-hosting.

    RispondiElimina
  45. Grazie mille per tutti i consigli!
    Ti ho scoperta da poco ma già ho attinto qualcosina di molto utile!

    RispondiElimina
  46. Grazie Iole!
    Non ho molto tempo ultimamente,ma spero di far crescere presto il mio blog.
    Grazie ancora,Marzia.

    RispondiElimina
  47. iole, scusami x l'ignoranza ma non ci ho capito un tubo!potresti spigarmelo con parole + semplici?? grazie

    RispondiElimina
  48. @Lalieli: presto pubblicherò un post con le istruzioni dettagliate per personalizzare la favicon del blog.

    RispondiElimina
  49. @Iole ho provato a farlo scaricando dal secondo sito che dici.sembra ci sia ma poi vedendo il mio sito non lo visualizzo.dove ho sbagliato?uso firefox

    RispondiElimina
  50. @llillith80: ho visitato il tuo blog con Chrome e Firefox e vedo un fiorellino rosa come favicon.
    Ciò significa che è tutto corretto!

    RispondiElimina
  51. @Iole io vedo la B di blogger mentre a te vedo il favicon che si muove,se tu lo vedi,cm mai io no?c'è una spiegazione?
    grazie del tuo immenso aiuto^_^

    RispondiElimina
  52. @llillith80: su Firefox vedo questa icona. Il codice è corretto, non so perché tu non riesci a vederla :(

    RispondiElimina
  53. Grazie anche per questo tutorial che si potrebbe intitolare "favicon for dummies".
    E anche questa è fatta!!!

    RispondiElimina
  54. Ciao Iole, i tuoi tutorial mi stanno aiutando a mettere su il mio blog...anche se ancora molto rudimentale e c'è tanto da imparare. Ma grazie infinite :)

    RispondiElimina
  55. Come si mettono le favicon?
    A me non viene anche quando esco dall'account e visito il mio blog...cos'è un template?Io ho salvato il favicon ma non mi viene lo puoi scrivere in un post?

    RispondiElimina
  56. @stardoll-whit-wow: se vuoi personalizzare la favicon del tuo blog vai in Layout, poi clicca sul link Modifica della sezione Icona preferita e poi carica la tua favicon personalizzata.

    RispondiElimina
  57. Ciao Iole, la mia favicon creata è molto trasparente ed i contorni poco delineati. che posso fare? grazie

    RispondiElimina
  58. @clara muscarella: se mi lasci l'indirizzo del tuo blog passo a controllare come si vede la favicon.

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy