Guida definitiva alla Favicon di Blogger. Ossia come cambiare favicon e inserirne una in HD

Come inserire una favicon in HD per schermi retina in Blogger. Guida. MacBook Pro retina display. Change Blogger favicon. 24, 32, 64 pixel.

Prima e dopo

Tutti quelli che usano Blogger credo sappiano come cambiare favicon. In Blogger è semplicissimo: basta andare in Layout e in alto cambiare L’icona preferita cliccando su Modifica. Ricorda di creare un’icona quadrata leggibile (non troppi dettagli quindi, preferibile qualcosa di semplice come un logo, un simbolo).Quello che non sapevo è che Blogger, una volta caricata online l’icona, la converte in un’immagine .ico di dimensioni 16×16 pixel.
Ora, 16×16 va bene quasi per tutti i computer, tant’è che non ho mai avuto problemi... fino a poco fa, quando ho ricevuto un MacBook Pro 15” Retina display.
Sullo schermo retina, ad alta definizione, la mia favicon era un disastro. Sgranata, non ben definita, a fuoco. Ovviamente non ero soddisfatto e ho cercato online una soluzione. Dopo un po’ (come sempre; non trovi mai la soluzione al primo tentativo... ) questa è la soluzione che ho trovato e funzionante.

Come cambiare la favicon di Blogger. 32 pixel o più per schermi Retina

Per quanto la ricerca della soluzione sia stata un’impresa, la soluzione in sé è semplice. Basta copiare e incollare il codice riportato nell'head del nostro tema.

Dove incollare il codice nel template

Prima però, dobbiamo creare e caricare la nostra nuova favicon in Blogger. Ho creato appositamente un altro articolo per non allungare troppo questo: Come creare una favicon in HD per il tuo sito web. Caricata l’icona avremo bisogno del suo url diretto. Se non sai cos’è o da dove prenderlo, dai uno sguardo all’articolo: Link diretto immagini Blogger. Quindi andiamo in Tema > Modifica HTML e cerchiamo </head>. Poi subito sopra questo tag di chiusura incolliamo il codice:

<script type="text/javascript">
(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();
</script>

Al posto del link in rosso dovremo incollare l’url diretto della nostra favicon.
Salviamo e chiudiamo il Tema e visitiamo il nostro Blog per vedere i cambiamenti. Ricorda che, se non vedi subito i cambiamenti ma sei sicuro di aver seguito la guida perfettamente, basta fare un hard refresh della pagina: su macOS basta premere ⌘ ⇧ + R.

Link

• Soluzione con codice da StackOverflow
• Hard Refresh, macOS e Windows – How can I do a Cache Refresh in Google Chrome?

How to Insert an HD Favicon for Retina displays in Blogger. How to for MacBook Pro Retina Display. Change Blogger favicon. 24, 32, 64 pixels.

Before and after

Everyone who uses Blogger knows how to change favicon. In Blogger it's easy: just go to Layout and on the top right change Preferred icon by clicking Edit . Remember to create a readable square icon (not much details, something like a logo , a symbol). What I didn’t know is that Blogger, once uploaded the icon, converts it into a 16x16 pixel image .
Now, 16x16 is fine for almost any computer, so far I've never had any problems... until recently, when I received a MacBook Pro 15" Retina display.
On the retina screen, in high definition, my favicon was a disaster. Grain, not well defined, in focus. Obviously I was not satisfied so I tried a solution on the web. After a while (as always, you never find the solution at first attempt... ) this is the solution I found and working.

How to change the Blogger's favicon. 32 pixels or more for Retina screens

Although the search for the solution has been a business, the solution itself is simple. Just copy and paste the code in the head of our topic.

Where to paste the code into the template

But first, we need to create and upload our new favicon in Blogger. I have created another article specifically to not too lengthen this: How to create a favicon in HD for your website. Once we uploaded the icon we will need its direct url. If you don’t know what it is or where to pick it up, take a look at the article: Direct Link Blogger Images. So let's go to Theme > Modify HTML and look for </head> . Then immediately above this closing tag we paste the code :

<script type="text/javascript">
(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();
</script>

Instead of the red link we will have to paste the direct url of our favicon.
Save and close the Theme and visit our Blog to see the changes. Remember, if you do not see the changes immediately but are sure to have followed the guide perfectly, just make an hard refresh of the page: on macOS just press ⌘ ⇧ + R.

Link

• Solution with code from StackOverflow
• Hard Refresh, MacOS and Windows - How Can I Do Cache Refresh in Google Chrome?