Pubblicato il 07/10/16 - aggiornato il  | 10 commenti :

Come modificare la favicon di Blogger da Layout o dal modello.

Come personalizzare la favicon di Blogger da Layout o da Modello. La favicon è quella icona che si visualizza nella scheda del browser e nei Preferiti salvati
Quando si apre una pagina web nella scheda del browser, a sinistra del titolo della pagina viene visualizzata una piccola icona chiamata favicon che è una contrazione della espressione inglese favorite icon. Questa funzionalità è stata introdotta dalla Microsoft con Internet Explorer 5 ma adesso è comune a tutti i principali browser. All'inizio la favicon era posizionata nella radice di archiviazione ovvero in quella che viene anche chiamata webroot. In seguito è stato introdotto un apposito tag HTML per aggiungere la favicon nella sezione HEAD della pagina web con questa sintassi

        <link rel="icon" href="http://...../favicon.ico" />

dove si inserisce l'URL diretto della immagine della favicon. All'inizio le favicon erano tutte in formato .ICO ma adesso possono essere aggiunte come favicon anche immagini .GIF o .PNG. Un discorso analogo vale per le dimensioni. Quelle delle immagini in formato .ICO erano comprese tra 16 e 48 pixel mentre le immagini .PNG e .GIF possono essere di qualunque dimensione.

La favicon funziona meglio se l'immagine è quadrata. Le favicon delle pagine verranno visualizzate anche nei Preferiti del browser. È quindi importante avere una favicon riconoscibile per aiutare i lettori nella ricerca delle pagine del nostro sito che hanno inserito nei Segnalibri del loro browser.

LA FAVICON DI BLOGGER


Anche Blogger  ha una sua favicon nativa comune per tutti i blog. Aprite la pagina

http://nomeblog.blogspot.com/favicon.ico

e visualizzerete la favicon associata al vostro sito dopo aver modificato l'URL generico del blog gratuito di Blogger. Anche i siti su dominio personalizzato hanno la loro favicon a questo indirizzo

http://www.esempio.com/favicon.ico 






COME PERSONALIZZARE LA FAVICON DA LAYOUT


Si sceglie l'immagine quadrata da usare come favicon con un peso inferiore a 100KB quindi si va su Bacheca -> Layout -> Icona preferita -> Modifica -> Scegli File e si seleziona l'immagine

favicon-bloggger

che potrà essere nei formati PNG, ICO, JPEG o GIF. Si va poi su Salva per applicare la modifica. La favicon di default di Blogger è che la B bianca su sfondo arancione verrà sostituita da quella aggiunta. C'è la possibilità che la favicon non venga vista immediatamente perché i cookie non sono ancora aggiornati. Basterà fare qualche ricarica della pagina per visualizzarla

favicon-browser

Si possono anche aggiungere immagini animate in formato GIF. Per cambiare una favicon con un'altra si torna su Layout -> Icona preferita -> Modifica, si rimuove l'icona corrente quindi se ne aggiunge un'altra anche animata

favicon-gif

quindi si procede con il salvataggio. L'animazione non sempre viene mantenuta nei browser.

COME VERIFICARE LA PRESENZA DELLA FAVICON NEL MODELLO DI BLOGGER

Si va su Modello -> Modifica HTML e si verifica la presenza di questa riga

<b:include data='blog' name='all-head-content'/>

intorno alla sesta riga. Tale codice permette di visualizzare tutti gli elementi della sezione head . Se utilizzate un modello scaricato da internet e tale riga non fosse presente incollatela sotto la riga <head>. Se questa aggiunta non fosse possibile o se la favicon fosse non funzionante aggiungete sempre sotto <head> questa riga

<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> 

dove il tag colorato di blu è il tag della favicon del sito.




10 commenti :

  1. Ciao Ernesto, ho bisogno di chiderti aiuto per un layout. Ne ho scaricato uno, nello specifico questo: https://gooyaabitemplates.com/beauteous-slider-blogger-template/
    per il mio sito www.antonellagrassia.com
    ma non riesco a trovare la nella modifica del modello la stringa che mi permetta di mettere le mie immagini al posto di quelle che vedo. Di preciso mi riferisco alle immagini in alto, sia quella lunga orizzontale che le tre sotto con il bollino cliccabile(love outdoor e fashion) Mi potresti aiutare tu? e poi vorrei trovare anche la stringa presente subito dopo che dice "showing post with label love" http://beauteous2-yotemplates.blogspot.it/search/label/Love?max-results=6
    Grazie

    RispondiElimina
    Risposte
    1. In linea di massima consiglio di usare template scaricati da internet solo quando sono perfetti perché la loro personalizzazione è sempre complicata.
      In seconda battuta ci si può rivolgere al sito da cui si è installato il modello per avere delle delucidazioni. Spesso però non rispondono.
      Nello specifico per le immagini devi andare nel modello e cercare gli URL delle stesse che si può ricavare con il destro del mouse.
      Vedo però che non lo si trova.
      Dal sorgente pagina si capisce poco. Ci sono molti plugin di Wordpress che rimandano al sito di installazione. Francamente non so come posso aiutarti :(
      @#

      Elimina
    2. Avevo già fatto quello che mi avevi detto tu. Però non sapevo che ci fossero molti codici wordpress. In realtà pensavo anch'io che fosse già completo e non dovessi metterci le mani se non per piccola cose, ma vedo che non è così. Grazie. Proverò a vedere se ci capisco qualcosa, oppure mi troverò un altro template.
      Grazie

      Elimina
  2. Ti chiedo scusa se insisto. Alla fine sono riotnata al layout classico. E' molto meglio, così posso fare tutte le modifiche che voglio. Però vorrei chiederti se per caso tu hai fatto qualche tutorial per creare delle immagini fisse come quelle che ti chiedevo nel primo messaggio. Cioè immagini che poi rimandano a una categoria in particolare per ogni immagine. Qualcosa che sia sempre fisso a ogni pagina che apro.
    E poi, potresti darmi il link del tutorial per il menu? Vorrei metterlo in alto, come hai visto sempre in quel layout che ti ho condiviso. Insomma, cercherò di farmelo da me il layout perfetto.
    Grazie.

    RispondiElimina
    Risposte
    1. Mi sembravano degli slideshow più che delle immagini fisse. Di slideshow ne ho presentati tanti. Guarda se ti piacciono questi
      http://www.ideepercomputeredinternet.com/2016/10/blogger-slideshow.html
      http://demo-blogger-widget.blogspot.it/p/slideshow_11.html

      Per un menù in alto puoi scegliere tra questi
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      Tre interessanti potrebbero essere questi
      http://www.ideepercomputeredinternet.com/2017/01/blogger-menu-responsive-floating.html
      http://www.ideepercomputeredinternet.com/2016/10/blogger-menu-multilivello-css-casella-ricerca.html
      http://www.ideepercomputeredinternet.com/2016/08/responsive-menu-blogger.html

      @#

      Elimina
  3. Allora credo di aver trovato sul tuo blog quello che cerco. Vorrei chiderti dove posso inserire il link dell'immagine e link cliccabile all'interno del codice? Lo metterei in alto sopra il widget post e così sarebbè proprio quello che voglio.
    http://www.ideepercomputeredinternet.com/2013/02/allineare-elementi-div.html

    RispondiElimina
    Risposte
    1. Per metterlo sopra all'area del post basta che tu incolli il codice su Layout -> Aggiungi un gadget -> Base HTML/Javascript per poi salvarlo e trascinarlo con il mouse sopra a tale area sempre da Layout per poi salvare la disposizione
      @#

      Elimina
    2. Quello l'ho già fatto. ^_^
      Vedi www.antonellagrassia.com
      Quello che volevo chiederti è: all'interno del tuo codice dove posso inserire l'url dell'immagine e il link cliccabile?
      Ho provato a fare delle prove da me ma con scarsi risultati -_-

      Grazie

      Elimina
    3. Qui non c'è codice :) Si parla solo di favicon. Hi preso in esame un post sbagliato per fare quello che ti interessa. Prova usando il codice di questo articolo
      http://www.ideepercomputeredinternet.com/2017/02/foto-allineamento-orizzontale-verticale-blogger-wordpress.html
      scritto poche ore fa
      @#

      Elimina
    4. grazie mille. Ho tutto quello che volevo. ^_^

      Elimina

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.