Pubblicato il 19/09/10 - aggiornato il  | 11 commenti :

Come visualizzare una favicon personalizzata di un blog su Blogger anche con Chrome oltre che con Firefox, Opera e Internet Explorer 8.

Le favicon sono quelle piccole immagini che si vedono accanto agli URL nella barra degli indirizzi del browser o che si visualizzano nei Preferiti quando si apre una cartella. Non tutti i siti ne hanno una personalizzata ma quelli che ce l'hanno sono avvantaggiati in quanto a visibilità quando si vanno a cercare tra i Segnalibri

favicon

I blog su Blogger hanno tutti di default una B bianca su sfondo arancio che non è il massimo della esteticità e, quello che è peggio, non si distinguono uno dall'altro

favicon-blogger

Avevo già presentato un metodo per rendere visibile una icona personalizzata per il nostro blog su Blogger. L'espressione favicon infatti non è altro che una contrazione dell'espressione favourite icon. Riepilogo brevemente il procedimento:

  1. Per visualizzare la favicon in IE occorre creare un file in formato ICO che è l'estensione canonica per le favicon. Si può fare attraverso il programma gratuito @icon sushi che converte una immagine del tipo BMP/PNG/PSD (non JPG) in ICO. L'immagine che scegliete dovrà essere quadrata di dimensioni 16x16 o 32x32 pixel. Si possono scegliere anche dimensioni più grandi, l'importante è che sia quadrata.
  2. Si va in Design > Modifica HTML e si incolla il codice nel modo descritto nell'articolo precedente

Con quel procedimento la favicon era visibile su Firefox, Internet Explorer 8 e Opera. Non lo era ancora con Chrome. In un commento su questo blog mi è stato fatto notare che nel Forum di Chrome era stato postato un hack per ovviare all'inconveniente. non posso inserire il credit al blog del commentatore perché non lo ha comunicato e ha un Profilo non disponibile.

Dopo aver generato il file ICO con la vostra immagine, occorre che la carichiate su Skydrive perché Picasa non accetta quel formato di file. Andate su Design > Modifica HTML e cercate questa riga

</head>

Immediatamente sopra incollate il seguente codice:

<!--FAVICON INIZIO-->
<link href='
http://public.blu.livefilestore.com/y1pPDjpYj5ClPF6ZYlGOLH4W9bBBdnargM9dkAbuPsKt_pjlr12l_vp62pLvTLVjLZ7sV7wRe9CVAvkyGPJW8zWEA/parsifal32.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='
http://public.blu.livefilestore.com/y1pPDjpYj5ClPF6ZYlGOLH4W9bBBdnargM9dkAbuPsKt_pjlr12l_vp62pLvTLVjLZ7sV7wRe9CVAvkyGPJW8zWEA/parsifal32.ico' rel='icon' type='image/x-icon'/>
<!--FAVICON FINE-->

Dove al posto degli hotlink alla mia immagine evidenziati di rosso mettete i vostri acquisiti da Skydrive. Come mostrato nel seguente screenshot

favicon-codice

Dopo aver salvato il modello se aprite il vostro blog con un qualsiasi browser sarà visualizzata la favicon che avete personalizzato.

favicon-chrome

Lo screenshot si riferisce a Google Chrome che fino a questo momento non mostrava favicon. Rispetto al precedente codice è stata solo aggiunta la stringa type='image/x-icon'.

Se volete visualizzare una favicon personalizzata nel vostro blog Wordpress seguite le indicazioni di questo tutorial.





11 commenti :

  1. Grazie per questo articolo.
    Prima che ho capito che Picasa non accettasse immagini .ico c'ho messo un po'. Alla fine ho convertito l'immagine .ico in .gif e pare che l'abbia gradita!
    Ciao Veggie

    RispondiElimina
  2. @Veggie
    Si può fare ma in questo caso la favicon non sarà vista con IE

    RispondiElimina
  3. Oh mannaggia! Hai ragione non ci avevo proprio fatto caso, anzi non ci ho proprio pensato. Ho guardato con Chrome e con Firefox e ho dimenticato Explorer.
    Pazienza, dovrei caricare l'immagine da un'altra parte, ma non saprei dove, ancora non me la cavo con queste cose...
    Lo farò quando avrò imparato.
    Grazie Ciao
    Veggie

    RispondiElimina
  4. amo le favicon, sono un ottimo modo per personalizzare e rendere subito riconoscibile il blog. Io ne ho una a forma di ibisco, ovviamente!

    RispondiElimina
  5. @filokalos
    Ti confermo che la tua favicon si vede anche su Chrome

    RispondiElimina
  6. Salve a tutti! Tempo fa utilizzai proprio questo procedimento per cambiare la favicon e riuscii perfettamente! Ora vorrei sostituire la favicon ma da quando blogger ha cambiato la visualizzazione del codice HTML non ci sto a capire più nulla ed il procedimento non funziona su chrome che si ostina a visualizzare la prima favicon. Avete consigli?

    RispondiElimina
    Risposte
    1. Adesso non importa più modificare il modello per la favicon. Procedi in questo modo. Vai su Modello > Modifica HTML e togli il codice che hai inserito con questo tutorial. Se non riesci a trovarlo leggiti questo post
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      Poi vai su Bacheca > Layout > Icona Preferita che si trova in alto a sinistra. Vai su Modifica e carica l'icona che vuoi visualizzare. Deve essere quadrata. Altre informazioni le puoi trovare qui
      http://www.ideepercomputeredinternet.com/2012/01/come-aggiungere-l-preferita-blogger.html

      Elimina
  7. ciao Ernesto volevo divertirmi anche io a configurare l'icona, però la mia favicon la vedo solo sulla stringa del mio nome ma non me l'ha sosituita da nessun altra parte, sono due giorni che l'ho inserita ed aggiornato la pagina più volte ma niente, ho anche individuato la stringa sul modello a cui fai riferimento su "Come modificare la favicon di Blogger da Layout o dal modello"
    lemedichessediclo.blogspot.com

    RispondiElimina
    Risposte
    1. Il post è del 2010 😊, da allora è probabile che molte cose siano cambiate nel codice
      @#

      Elimina

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