Home
Blogger

Add or change usual and animated Favicon in Blogger site

tutorial to add common favicon and animated favicon in blog site
favicon

Favicon is short form of Favorite icon. We can say shortcut icon or website, tab or bookmark icon generally we use for identifying the site on browser's address bar through small icon. Suppose we have open several site in one browser and sites are showing on tab basis. In that case we can easily identify the site by focusing on small icon.  Beside of this if someone bookmarked your site but there are huge site that has already bookmarked on users browsers in that case favicon will represent your site and help the user to quickly find your site link.

The ideal size of favicon is 16×16 pixels which is most commonly used over the net. However you can use any resolution favicon with less than 100kb file  but the precondition is that it should be a square image otherwise it won't work.

 In Google blogging platform we are able to favicon (Favorite icon) easily from layout section at the backend. I am sharing the tutorial for better understanding thus any new user can easily add favicon in their blog site.

First of all you have to find an attractive icon over the net by searching or you can create an icon by using Photoshop or other photo editing software. Beside of this you can also add your own image in favicon section. Though I have mentioned before that image must be square size, so don't worry about the image resolution. If you already have the image then resize it 16×16 pixels for better view as well as compress it if the image size is more than 100 kb. Because Blogger accept only less than 100 kb image file in case of favicon. And after that follow the below steps for adding favicon.

How to Add Usual favicon in Blog site

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->Settings -> Layout

Step 3 Now Look through the Favicon gadget in Layout section. Generally you will find it at the top of the layout section.
favicon gadget


Step 4 By default Blogger will display their favicon icon on gadget. So Edit link from the Favicon gadget.
choose favicon

Step 5 From popupo window click on Choose File and locate your Favicon image on PC. After that 

 select image and click on Open button. Finally hit the Save button.


remove favicon

Step 6 Now open your site in a browser and check the tab. That your favorite icon (Favicon) is displaying there.

browser

It will take few times to display recently added favicon so be patient. And check your site after few minutes.

How to Add animated favicon in Blog site

We can also add animated favicon in our blogger template. For animated favicon we have to find a animated image. Remember that animated image will be in .gif extension but in case of usual favicon we can use .ico or .png extension image file.  So I am assuming that you have an animated image. And you have to upload this image in any image hosting server like -
  • Tiny Pic    http://tinypic.com/
  • Picasa      http://picasa.google.com
Or you can host image on Google server. You can read the below tutorial about image hosting on Google server. After hosting image get the image URL for further use. Now paste the image URl where written Favicon Image URL Here.

<link href="Favicon Image URL Here" rel="icon" type="image/gif"/>

For example

<link href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqr6DVKbmdDKpyw3kF-tAbUH65MyXKHbUUvRnHgNUL5JK6vdDN69Iv9s3hKygPfC7-mSE_56DQrxTMZxKAoSuHo0CtlN5MOAEgIRZZqm-ZSscOySRl_8cTCAqg3e5N5rCB1rsjV-nHX6w/s1600/BS+Loading+sprite.gif" rel="icon" type="image/gif"/>

Now copy the whole code line for further use.

Readmore: 

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->Template -> Edit HTML

Step 3 Now find the <b:skin> by pressing Ctrl+F

Step 4 Paste the image code above <b:skin> and hit the Save template button.

<link href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqr6DVKbmdDKpyw3kF-tAbUH65MyXKHbUUvRnHgNUL5JK6vdDN69Iv9s3hKygPfC7-mSE_56DQrxTMZxKAoSuHo0CtlN5MOAEgIRZZqm-ZSscOySRl_8cTCAqg3e5N5rCB1rsjV-nHX6w/s1600/BS+Loading+sprite.gif" rel="icon" type="image/gif"/>

Don't forget to replace the image URL from the code.

 Now check your blog to see the effect. However recently animated favicon is working only at Mozila Firefox browser. I have tested on Internet Explorer, Google Chrome and Opera browser also but there is not supporting. So after applying the code test your blog in Mozila Firefox browser.

2 comments

  1. A favicon is a graphic image (icon) associated with a specific web page and / or many recent user agents (such as graphical browsers and news readers) that appear in their address bar or as a visual reminder of the website's identity. Or tabs. Thank you for writing neatly
    • I am very glad to hear that this content helped you. Thanks for commenting.
Go Up