Wednesday, July 20, 2011

How to Add Favicon to Blogger Blogspot (Works with Chrome, Safari and Firefox)

Sponsored Ads
Tutorial guides to add favicon to Blogger's blog can be found easily all over the Internet but most of the tutorials only teach you how to add favicon that can work in Firefox only but will not work in Google Chrome and Safari. In this post, I am going to teach you how to add your own blog favicon that can work in Google Chrome, Safari and Firefox.

In order to make your blog favicon appear properly in Google Chrome, Firefox and Safari, you just need to make a slight changes to your codes. Read on to learn the tutorial.


Adding Favicons to Blogger's Blog that will work in Google Chrome, Safari and Firefox

I try to make this tutorial as simple as possible. So, just follow the step-by-step below to add favicon to your blog.

1. Login to your Blogger's account and go to "Design" then go to "Edit HTML".
2. Copy the following codes and change the YOUR FAVICON LINK to the URL of our favicon.
<link href='YOUR FAVICON LINK HERE' rel='shortcut icon' type='image/x-icon'/>
<link href='YOUR FAVICON LINK HERE' rel='icon' type='image/x-icon'/>
3. After copying and add change your favicon image URL into the codes above, go to find </head>.
4. Paste all the codes just before the </head> code.
 Your final codes will look like:
<link href='YOUR FAVICON LINK HERE' rel='shortcut icon' type='image/x-icon'/>
<link href='YOUR FAVICON LINK HERE' rel='icon' type='image/x-icon'/>
</head>
That is it. You have successfully added a favicon to your blog. You can look at my blog, the favicon will appear properly in Chrome, Firefox and Safari.

So far, I think that this post will be the most complete tutorial to add favicon to your blogger's blog or blogspot's blog that will work in Google Chrome, Firefox and Safari.

About the Author: This Post is written by William Lee (Nickname: Greenleaf). Make money blogging and work from home is the best job I ever experienced.