Tutorial: How to add a favicon to a Blogger blog

June 17, 2009 22:19 pm by Jal

One of my friend and a blogger asked me how to add a favicon to a Blogger powered blog. So I decided to write a post on it so that many others having the same question can get their answers. A favicon is a small (usually 16×16 pixels) image that appears in the title bar when a webpage is being viewed. It has no information value but looks nice and professional. So here’s what you need to do to make your own favicon for your Blogger powered blog.

1) First create a 16×16 image that represents your blog and upload it to any photo hosting sites like Photobucket, Imageshack, etc. The image can be a little bigger but anyways Blogger will display a 16×16 image only.

2) Now login to your Blogger account and navigate to Layout >> Edit HTML.

3) Now at Tech Explorer, we don’t take any chances. So back up your blog by downloading it. Click ‘Download full template’ link. But if you promise to be extra cautious, you can skip this step.

4) Now locate the following code in the HTML:

<title> <data:blog.pageTitle/> </title>

5) Insert the following code immediately after the above code:

<link href='LINK TO YOUR FAVICON IMAGE' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

6) Replace ‘LINK TO YOUR FAVICON IMAGE’ in the above code with the link to your image.

7) Click ‘Save template’ button and enjoy your new favicon of your blog!

Technorati Tags: how to add favicon to blogger blog,,
Subscribe to TechExplorer, today! You must follow us on Twitter
Advertise here
Post comment as twitter logo facebook logo
Sort: Newest | Oldest

check your blog on this link http://www.getfavicon.org

I am sure you will still see the blogger favicon. If yes, then could you share another article on how to remove the blogger favicon completely ?

Thanks ..