TRENDING »
Loading...

How To Fix Blurry Favicon On Blogger

Favicons are important for your brand. A high quality crisp favicon is the finishing touch for many bloggers, tying together the style and identity of a great-looking blog. Your users remember your blog through this favicon.

How To Fix Low Resolution Favicon On Blogger


Today, I added a high quality favicon to my blog. To my surprise I saw my favicon is very blurry. 


Why does my favicon look blurry? 

So I decided to know more about this problem. Because I know that when you know why the problem occurs, you know how to fix it.

Why is my favicon blurry?

The main problem is with resolution of favicon image. Some Content Management System like Blogger reduces the size of the favicon which affects its resolution.

And sadly there is no way to stop Blogger from doing this. Also, Blogger does not support PNG icons yet.


How do I make my favicon clear?

Yes. there is a way to fix all these problems and to tell you it is very simple.

I want to share this method with you so that you can add a high quality favicon to your blog.

Follow the steps below:

How to fix low resolution favicon on blogger?

By following the steps below you will be able to override Blogger favicon and even use PNG icons for your blog.

1. Create a high quality favicon png image of size 64 by 64 and upload it to any server where you can access it through a URL. Keep thi URL handy.

2. To get started, first, you need to backup your Blogger template: Go to Blogger.com

3. Click on ‘Theme’. Then click on the Customize dropdown button.

Edit HTML


4. Click on Backup
Blogger Interface


5. Click on Download to save the offline copy of the backup.

Blogger Interface



6. Again click on the Customize dropdown button. Then click on ‘Edit HTML’
Edit HTML
Blogger Interface


7. Then use Ctrl + F to find '<body>'. Just after the body tag, you should insert the below code. 


8. Replace the 'https://www.example.com/favicon.png' to the URL where you have your favicon uploaded in Step 1.

9. Save the theme template.

10. Open your blog in the browser and you would see a high quality favicon.


If you encounter any problem, let me your questions in the comments below.

Share with your friends

Add your opinion
Notification
You can subscribe to our blog or follow us on social media to get notified about the new posts.
Done
Title
Text Content
Close
Cookies used on the website!
We and our partners use cookies to personalize content and ads, to provide social media features and to analyze our traffic.
You consent to use of these cookies if you continue to use this website.
Learn more »