How To Add Animated Favicon To Your Blogger Blog

Favicon is actually the icon (16 x 16 in pixels) that appears next to your Website URL in the browser address bar. It is usually your blog logo. I have used an animated favicon for my blog as you can see in the address bar. It actually consists of a logo and then my blog title as text. The image and text together makes a more beautiful combination. In this tutorial, I will show the steps on how to add  an animated favicon to blogger's blog. Don't worry because I'm gonna make it more easy than you  could imagine.

How To Add Animated Favicon To Your Blogger Blog

Please folllow the steps below:

Step 1. Go to  favicongenerator  to  upload your blog logo or any icon you wish to make as your favicon and you may also add your blog title as the scrolling text (optional).
Step 2.  Hit the Generate Favicon Button
Step 3. Select (right click) the favicon icon that has an animation effect.
Step 4. Save or download it to your computer.

Step 5. Go to  Blogger Dashboard  >> Template >> Edit HTML (if needed, click on Proceed button)
Step 6. Search (CTRL + F) for:

<b:skin>

Step 7. Paste the code below just above the code in step 6.

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif/>

Note: Replace your-favicon-links-goes-here with your own favicon URL
Now get or upload your favicon icon which have you downloaded at your computer  (in step 3) through using the blogger editor's post it must be in HTML mode.

 Sample.

If your favicon link is this one:

 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA_kh3sFRT5Pj_cOGV6tAQolxTSZP3JBbR0njTxvj6GIe45qms20c64S2jNFn2jg7aM-fVccMmDSi2IFm_yWWIOBnURicrPIcS2cvvwjCX3BxADGrht5zodi1YsaO-oHK0mN-s4TDWmmI/s1600/c7b0a11294aef873f7e3f99901ca3f4d_extra_animated_favicon.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA_kh3sFRT5Pj_cOGV6tAQolxTSZP3JBbR0njTxvj6GIe45qms20c64S2jNFn2jg7aM-fVccMmDSi2IFm_yWWIOBnURicrPIcS2cvvwjCX3BxADGrht5zodi1YsaO-oHK0mN-s4TDWmmI/s320/c7b0a11294aef873f7e3f99901ca3f4d_extra_animated_favicon.gif" /></a>

         
Your edited favicon link would be the highlighted one in red. Ignore the proceeding codes.

Step 8. Save your Template. Enjoy! :-)