Tuesday 5 May 2015

How to add a favicon - Blogger Tutorial 9


Adding a favicon (Favourite Icon) to your website is indeed critical for its individuality. The favicon of a website is just like your photo in your ID card. Since, your photo classifies the individuality of your ID card, in the same way, favicon helps people to identity your website. Through, favicon a person recognizes your website and remembers it with its unique LOGO. Therefore, today in this article, we will show you How to Add a Favicon in Your Blogger Blog?

Before you could add a Favicon to your website, it is essential that you have a proper favicon image. You can hire designers to develop one for you. However, if you have designing skills then through Adobe Photoshop or illustrator you can easily create a one for yourself without spending a single penny over hiring designers. Else, you can also make your own blog's logo as your favicon image.

If you know how to design images then open your logo in your favorite designing software like Photoshop, and resize its dimensions to 16 x 16px. Save the file in png extension, but if your platform does not support png image extension then, convert it to .ico format. Note: By default, blogger automatically converts your png image into ico format, so it means there is no need to change the extension of your image on your own.

Once you have your favicon ready, go to Blogger.com >> your site >> Layout >> Favicon >> Edit. Now a new window will pop out asking you to upload your favicon image. After selecting the image, press the orange save button. Note: Your image must be less than 100KB otherwise it would display weird errors. 


By default, blogger offers its own image which looks unprofessional and immoral, so by adding a favicon image to your site you are taking your site to the next level. It may look small but to maintain a site with professional outlook these small things means a lot.

After adding a customize favicon to your Blogger site, it may not display it correctly because your old image is saved in the history of your browser, so to be able to see the correct image make sure you either clear the Cache history of your browser or restart your operating system.

You can clearly see that the favicon we are using is Anonymous Mask, Feel free to show yours in the comments. If anyone has any tip regarding this topic then do not hesitate to share it, we will appreciate it.

Written by

is one of the Team Member of Programmer vs Hacker. He has written many articles on this website and is a patner of this website.

0 comments:

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

© 2015 Programmer vs Hacker. All rights resevered.