How To Change Your Favicon Using the New Blogger Favicon Option

Blogger has just recently added a quick way to change your favicon for your blog.

A favicon (also known as shortcut icon, web site icon, URL icon, or bookmark icon) is a 16x16 pixel image, which appears in most browsers in the address bar; or in tabbed browsing next to the title of the website. 

For all blogs hosted on Blogger, the default favicon is the Blogger logo (as shown in the right). The favicon is saved as a .ico file. You can find your website's favicon using the following site URL: "your website URL"/favicon.ico (replace "your website URL" with the root address of your blog). For example, this blog's favicon can be found under the following URL: http://flippy-doodle.blogspot.com/favicon.ico

Most people who use Blogger find the default orange Blogger logo very boring to use, or that their blog does not have an unique identity. Even people who have bought their own URL are still stuck with the default icon, which they find annoying.

Before, changing the favicon was a longer process, in which you had to go and edit the template code. And that was also only a quick hack, since the favicon would still not appear in RSS feeds, etc.

But just a few days ago, Blogger made it much easier to edit your favicon, simply by using the "Edit Template" under the design section. Here is a simple step-by-step on how to change your favicon on a Blogger blog.

The good thing about this option is that even in the RSS feeds of subscribers, your new favicon will appear. Even when someone displays a RSS feed to your blog on their website, and choses the "display icon" option, your new favicon will appear. This is much better than the old HTML code hacks.

1) Create a favicon

__________________________________________________

The good thing about this new option is that you don't need to go around making a favicon for yourself. Just pick the image you want to use, and when you try to install it, the widget will automatically re-size it for you as a 16x16 pixel image, as well as convert it to .ico type. You can use a PNG, ICO or JPEG file. The only limit is that the file has to be less than 100kb in size and that it should already be in a square shape.

Alternatively, you can also pick any square image, and adjust it's dimensions to be 16x16 pixel in most photo editing software. 

If you do not have a good photo editing software, there are also online favicon generating tools, where you can edit and make your own favicon, like this one. 

For this tutorial, I am using the following image to be used as my favicon: 

2) Change your favicon on Blogger

__________________________________________________

a) Go to your Blogger Dashboard. Under your blog name (the blog for which you want to change your favicon), click on "Design"

Click on "Design"

b) Go under the "Page Elements" tab. Here, you will find a field called "Favicon", at the very top (above "Navbar")

The "Favicon" option is at the very top. 

c) Click on "Edit" (next to that Favicon option)

d) In the pop-up window that comes up, click on "Choose File", and select the file which which you created in step (1). Then click "Save".

Choose the file you want to use as your favicon.

Then click "Save"

e) Now after the pop-up window has closed, you must click on the main orange "Save" button in "Page Elements" as well.

3) Extra details and then you are done!

__________________________________________________

Note that, at first you will not be able to see that your favicon has changed. The old Blogger one will still appear. This is probably due to stored cache of your blog on your browser. 

Try deleting your cache and see if it appears. 

For me, even after I deleted about 3 weeks worth of cache, I still couldn't see my new favicon. This will probably happen to you too, just be patient. Two days after I had changed my favicon, I opened my blog to find that I could now see my favicon.

Also note that Chrome only displays favicons in the tab, not in the address bar. Firefox displays favicons both in the tab and the address bar. 

Hope this helps. If you have any more questions, you can comment below.