Pubblicato il 11/01/12e aggiornato il

Come aggiungere l'Icona Preferita a Blogger.

Da molto tempo i più esperti avevano inserito la favicon per mostrare una immagine diversa dalla B bianca di Blogger su sfondo arancione nella barra del browser. Poi Blogger ha introdotto questa funzionalità prima su Blogger in Draft e successivamente nella Bacheca normale.

Nella versione italiana all'inizio c'erano dei problemi di grafica visto che la scritta del widget era parzialmente coperta da Modifica. Da qualche settimana è tutto perfettamente funzionante. Ho potuto testare questa feature su Chrome, Firefox, Internet Explorer 9 e Safari e funziona con tutti i browser. Per vedere correttamente l'icona potrebbe essere necessario rinfrescare un paio di volte la pagina per acquisire i nuovi cookie.

Vediamo come procedere per inserire la favicon o Icona Preferita direttamente dalla Bacheca di Blogger. Per prima cosa bisogna procurarci una immagine perfettamente quadrata nei formati JPG, PNG, GIF. In teoria si potrebbero anche caricare immagini animate ma non ho testato se si animano effettivamente e dovrebbero essere comunque di peso inferiore ai 100kB.

Per rendere una immagine perfettamente quadrata si può usare un programma di grafica quale Photoshop o Gimp. Se nel computer non ne abbiamo installato nessuno, possiamo procedere a un ritaglio e a un eventuale ridimensionamento con l'ottimo editor Pixlr che è uno strumento online. Si apre Pixlr, si clicca su Apri immagine dal computer e si seleziona il file da modificare. Successivamente si può ritagliare la foto e ridimensionarla

ridimensionare-immagine Ho provato con immagini di 100x100 pixel e di 150x150 pixel in tutti i formati elencati in precedenza e ha sempre funzionato. Nel caso l'immagine non fosse perfettamente quadrata, all'atto del suo caricamento, si genererebbe un messaggio di errore.

Si va su Layout > Icona Preferita > Modifica > Scegli file e si seleziona quello preparato nel computer

icona-preferita 

Si clicca su Salva e si visualizzerà l'icona caricata direttamente nel layout

icona-preferita[4]

Aprendo con un qualsiasi browser una pagina del nostro blog visualizzeremo tale immagine nella barra degli indirizzi e nei Segnalibri nel caso mettessimo una nostra pagina nei Preferiti. Come detto questa immagine sarà visibile con tutti i browser e aiuterà i navigatori a visualizzare immediatamente le nostre pagine.

tre-favicon 

Come vedete dallo screenshot precedente preso da Firefox l'immagine della Icona Preferita viene visualizzata nella scheda del browser, nella barra degli indirizzi e nella barra del browser perché vi ho salvato il Segnalibro della home di questo blog. Concludo ricordando che dopo aver inserito l'icona (o favicon) con questa modalità è opportuno eliminare il codice relativo che eventualmente avevamo inserito nel modello. 





19 commenti :

  1. Buonasera ernesto. E chi come me aveva già personalizzato la favicon con il vecchio metodo, come si va ad eliminarla? Grazie

    RispondiElimina
  2. @francesco_qci_
    Si toglie il codice che avevamo precedentemente inserito nel modello

    RispondiElimina
    Risposte
    1. Potresti ricordarmi dove trovarla? Grazie

      Elimina
  3. Io invece ho creato un icona touch per smartphone, il problema è che non mi funziona per la versione mobile, invece se apro il mio blog da smartphone in versione web appare l'icona correttamente.

    Io ho aggiunto questo codice sotto head
    link href='http://img24.imageshack.us/img24/234/iphoneiconb.png' rel='apple-touch-icon'/

    Sapresti dirmi quale modifica devo fare perche funzioni anche sulla versione mobile? Penso che qusta cosa interessi a molti

    RispondiElimina
  4. Ciao Ernesto. Questa personalizzazione nel mio blog non funziona, e questo malgrado abbia prima tentato con un'immagine formato 150x150 in formato GIF e successivamente con un'immagine 100x100 Jpeg. Il modello che utilizzo è un Awesome modificato…Non è che devo tentare con un formato .ICO?

    RispondiElimina
  5. @Massimiliano Materazzi
    Non so neppure se sia supportato il formato ICO. Mi sembra strano che non ti funzioni.

    RispondiElimina
    Risposte
    1. Ernesto, e al mio problema c'è una soluzione?

      Elimina
    2. @lissus
      Onestamente non saprei dirti nulla sulle favicon delle versioni mobili. Non so se siano supportate in Blogger e se sì che codice si deve inserire.

      Elimina
    3. Con questo codice sotto head
      link href='http://img24.imageshack.us/img24/234/iphoneiconb.png' rel='apple-touch-icon'/

      compare anche su smartphone ma solo se fai visualizza versione web, invece con blogger mobile non è possibile. Non si può modificare qualcosa nel codice mobile di blogger.

      Elimina
    4. Non so se sia possibile e non saprei come posso aiutarti ...

      Elimina
  6. Ciao Ernesto,
    ho creato un blog con un template dinamico, ma mi sono accorta che non è prevista né la modifica dell'html e né la scheda layout... suggerimenti per modificare la favicon?

    RispondiElimina
  7. @Silvia
    Con il template a Visualizzazione dinamica non si può fare nulla, non c'è neppure la scheda Layout e non si può andare su Modello > Modifica HTML.

    RispondiElimina
  8. Me l'ero immaginato... Grazie mille Ernesto!

    RispondiElimina
  9. Salve Francesco ho un problema con la favicon. Non visualizzo né la foto da me scelta, né il logo blogger nel caso torni al template di base. Premettendo che ho nascosto la navbar con questo codice (funzionante):#navbar-iframe, #navbar, .navbar {height:0px; visibility:hidden; display:none; margin: 0 !important;} pensi che il problema possa dipendere da questo? Grazie anticipatamente. Luca.

    RispondiElimina
    Risposte
    1. @ Non so da cosa possa dipendere. Prova a togliere e rimettere l'icona più volte. Per nascondere la navbar prova questo codice più semplice
      #navbar-iframe { display: none !important; }

      Elimina
    2. grazie per la solerte risposta e scusa per il lapsus (ti ho chiamato Francesco convinto di aver digitato Ernesto!). Ti farò sapere sviluppi. Luca.

      Elimina
  10. Ciao Ernesto.
    Ho seguito quanto scritto nel post ma la favicon è ancora quella vecchia sebbene mi visualizzi, nel layout, quella nuova appena inserita.
    Come posso risolvere?

    RispondiElimina
  11. Tra un paio di giorni vedrai quella nuova. Se non voi aspettare puoi cancellare i cookie ma ti consiglio di aspettare
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.