Adding a Favicon to Blogger

This tutorial tries to effectively explains the steps to add a simple as well an animated favicon to your Blogger blog.

How to add a simple favicon in a Blogger's Blog?

Step 1. Blogger Dashboard > Layout > Page Elements

Login to your Blogger Dashboard if not already logged in. Choose the blog you want to edit if you own mutiple blogs. Locate the Layout option usually present between Ear nings and Templates in the navigation bar. Proceed by clicking it. Now you would be redirected to 'Page Elements' where you could add edit or remove Gadgets.

Step 2. Favicon > Edit >Pop-up Window

Locate the Favicon setting present above the Navbar and click Edit just beside it. Now a pop-up window will appear.

Step 3. Browse > Choose Favicon > Upload & Save

In the pop-up window, there is a form to upload your favicon. Click Browse and choose the favicon from your device. Make sure the favicon ends with a .ico extension else it would show an invalid file. Now upload it and finally press save to close the pop-up window.

Step 4. Preview > Done

Now your favicon could be seen instead of the blogger's one in the Favicon Element. In most cases, it shows up immediately but in some it may take up to a day or two. If it doesn't shows up, the reason could be you unknowingly uploaded a non ico format (though renamed as .ico) favicon, for this try uploading a different one. If it still doesn't work try the below method which is meant for adding an Animated Favicon but can solve your problem too.

How to use an animated favicon in my blog hosted at Blogger.com?

Unlike the .ico favicon, adding an animated favicon requires Template's HTML code editing. Hence, before starting this its adviced to have a Back-Up of your Template. The complete process of favicon addition is explained below :

Step 1. Blogger Dashboard > Templates > Edit HTML

Select the Template option present below Layout in your blog's option menu. Now press the Edit HTML button that appears.

Step 2. Expand Widget Templates > Add Html Code

Select the Expand Widget Template option and Press Ctrl+F to search for

<b:skin>[!CDATA[/*

inside the HTML code. Now add the below code code just above it.

<link rel='shortcut icon' type='image/vnd.microsoft.icon' href='favicon-url-goes-here'/>

Step 3. Replace Url > Preview & Save

Replace Favicon-url-goes-here with your favicon's url from the above code(To obtain url upload the favicon in a new post and copy the image url). Now preview and save the template to complete the steps.
If all the above steps are followed correctly, the favicon would instantly show in majority of the blogspot blogs. It may take up a day or two to show in the rest. If you still wanna ask anything regarding this tutorial, you are welcomed.