Use a Favicon for Your Blogger Blog: How to Create Favicon for Your Blogger Blog?

faviconDo you know what is favicon? Favicon is just a tiny / small icon (actually an image) which displayed at the beginning of the address bar of any browser (like Mozilla Firefox, Google Chrome, Opera, Internet Explorer or others). Sometimes it is referred as Favorite Icon, Page Icon and Url Icon.

Why Favicon Is Used?

Blogger / Blog owners are interested to add favicon for their blogs for the reasons of:

  • Favicon makes easy to find the blog / web-site when anyone bookmarked the web-site / blog among several other web-sites / blogs.

Size and Extension of Favicon

Favicons are generally 16X16 pixel or 32X32 with a .ico format. However, it can also be in .gif or .png formats as well.

Steps to Use Favicon to Blogger Blog:

Step 1: Create a favicon of your blogger blog and host that to hosting sites.

Step 2: Go to your blogger blog, login to the blog and then go to Design > Edit HTML section and find the code </head> tags in the Edit Template code. Type the following codes and just paste before </head> tag.

Adding Favicon Code

<link href='url-of-the-favicon-image' rel='shortcut icon'/>
<link href='url-of-the-favicon-image' rel='icon'/>



Note: Here url-of-the-favicon-image means the uploaded image / favicon link. For example, for my site the uploaded image link is https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOoF60A0Yhx951ZLbajTKB9CSuGMKJMntq8OKeOZZuiWpt2elm1nR6vr_Bd3vZxGeV-Dwif185X9ZbHhU6XsOdaLbNUttBoaoL_-2WWYEo4Vb_tNfGNQ_EipWoYejFfo9wVmARSMXezeif/s1600/favicon.png. So, the code may look like the following:


<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOoF60A0Yhx951ZLbajTKB9CSuGMKJMntq8OKeOZZuiWpt2elm1nR6vr_Bd3vZxGeV-Dwif185X9ZbHhU6XsOdaLbNUttBoaoL_-2WWYEo4Vb_tNfGNQ_EipWoYejFfo9wVmARSMXezeif/s1600/favicon.png' rel='shortcut icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOoF60A0Yhx951ZLbajTKB9CSuGMKJMntq8OKeOZZuiWpt2elm1nR6vr_Bd3vZxGeV-Dwif185X9ZbHhU6XsOdaLbNUttBoaoL_-2WWYEo4Vb_tNfGNQ_EipWoYejFfo9wVmARSMXezeif/s1600/favicon.png' rel='icon'/>

Step 3: Finally, click on SAVE TEMPLATE button to save your changes of the template.


Following the above steps, you can easily add a favorite favicon for any blogger blog / website.

No comments:

Post a Comment