How to add an animated favicon to your Blogger blog

Favicon is a small icon like image which appears just before your site’s name in your browser’s tab. A favicon is a small representative of your blog or website which tells your users that what your site is about, all in all it’s a good way to give a small over look of your site to your users.

Blogger users can also install custom favicons to their blogs, since this small icon has severe significance. But today we will not just learn that how we can install favicons on blogger, well! we all know that.

Today we will focus on installing animated favicons on blogspot blogs. But first, let’s have a small round up of how we normally add normal(non-animated) favicons to blogger:

How to Install Ordinary Favicons on Blogger?

First log-in to your Blogger dashboard, go to Layout where you will find a favicon gadget in the top left of the page as shown below:

Click on edit button, after which a pop-up will appear from where you can choose a favicon for your blog from your hard drive. To do it, click on choose file button, select the favicon image and Click on Save button as shown below:

After clicking on save button, you have done your work on your part. Now wait for a little while, your browser may take few hours to load your new favicon.

Now let’s come back to our topic, Now we will install an animated favicon on our blog. For this follow these steps:

How to install animated Favicons on Blogger?

To install an animated favicon on your blog, first go to your blogger dashboard and then go to New Post as shown below:

Now click on Insert image button after which a pop-up will appear, Click on Choose file button and select your animated image from your hard drive. Now click on Add select button as shown below:

Now go to HTML tab and copy the source URL of your image as shown below:

Now go to Template>Edit Template as shown below:

Now search for <b:skin> tag and paste this code just above it:

1	<link href="<b>your-favicon-link-stays-here"</b> rel="icon" type="image/gif"/>

Now replace “your-favicon-link-stays-here” with your favicon source URL which we copied from the post section in HTML tab.

Now click on Save Template button and you are all done!

P.S: If you have any further query then please let me know in comments, Thanks.