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.
All those who use Blogger believe they know how to change favicon. In Blogger it's very simple: just go to Layout and at the top change the favorite icon by clicking on Edit. Remember to create a square, readable icon (not too many details, so something as simple as a logo or symbol is preferable).What I didn't know is that Blogger, once the icon is uploaded online, converts it into a. ico 16×16 pixel image.
Now, 16×16 is good for almost all computers, so much so that 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. Grainy, not well defined, in focus. Obviously I wasn't satisfied and I searched online for a solution. After a while (as always, you never find the solution at the first attempt....) this is the solution that I found and worked on.
First, however, we need to create and upload our new favicon into Blogger. I've specially created another article to make sure you don't stretch 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 take it from, take a look at the article: Direct Link Blogger Images. Then go to Theme > Modify HTML and search for
Then save and close the Theme and visit your Blog to see the changes. Remember that if you don't see the changes right away but are sure to have followed the guide perfectly, just make an hard refresh of the page: on macOS just press ⌘ ⇧ + R.
 |
| Before and after |
Now, 16×16 is good for almost all computers, so much so that 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. Grainy, not well defined, in focus. Obviously I wasn't satisfied and I searched online for a solution. After a while (as always, you never find the solution at the first attempt....) this is the solution that I found and worked on.
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 |
</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 link in red we will have to paste the direct url of our favicon.Then save and close the Theme and visit your Blog to see the changes. Remember that if you don't see the changes right away 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?
