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
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
Si clicca su Salva e si visualizzerà l'icona caricata direttamente nel layout
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.
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.
Buonasera ernesto. E chi come me aveva già personalizzato la favicon con il vecchio metodo, come si va ad eliminarla? Grazie
RispondiElimina@francesco_qci_
RispondiEliminaSi toglie il codice che avevamo precedentemente inserito nel modello
Potresti ricordarmi dove trovarla? Grazie
EliminaIo 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.
RispondiEliminaIo 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
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@Massimiliano Materazzi
RispondiEliminaNon so neppure se sia supportato il formato ICO. Mi sembra strano che non ti funzioni.
Ernesto, e al mio problema c'è una soluzione?
Elimina@lissus
EliminaOnestamente non saprei dirti nulla sulle favicon delle versioni mobili. Non so se siano supportate in Blogger e se sì che codice si deve inserire.
Con questo codice sotto head
Eliminalink 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.
Non so se sia possibile e non saprei come posso aiutarti ...
Eliminava bene grazie comunque
RispondiEliminaCiao Ernesto,
RispondiEliminaho 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?
@Silvia
RispondiEliminaCon 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.
Me l'ero immaginato... Grazie mille Ernesto!
RispondiEliminaSalve 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@ Non so da cosa possa dipendere. Prova a togliere e rimettere l'icona più volte. Per nascondere la navbar prova questo codice più semplice
Elimina#navbar-iframe { display: none !important; }
grazie per la solerte risposta e scusa per il lapsus (ti ho chiamato Francesco convinto di aver digitato Ernesto!). Ti farò sapere sviluppi. Luca.
EliminaCiao Ernesto.
RispondiEliminaHo seguito quanto scritto nel post ma la favicon è ancora quella vecchia sebbene mi visualizzi, nel layout, quella nuova appena inserita.
Come posso risolvere?
Tra un paio di giorni vedrai quella nuova. Se non voi aspettare puoi cancellare i cookie ma ti consiglio di aspettare
RispondiElimina@#