How to Add a Favicon | Blogger Tips

Today I am going to tell a Blogger Tip on How to add a Favicon to your blog or website. Before starting I will expose Favicon before Beginners in Blogging world. First of all what is Favicon? Favicon stands for favorite icon. It is a small image which is associated with website or blog. It is shown next or before site name in the URL bar of the most browsers.Look at following image:

what is Favicon



Now why use a Favicon? It looks fine. You can show your website logo or products image in the URL bar. After all it is very easy to setup favicon in your blog or website. Lets start how to add a favicon on Blogger blog.

To add a favicon you need to have a favicon. There are many ways to create favicon. You can search for "Online favicon generator" in Google. You will find a lot of sites where you will can create free favicon. I use http://www.animatedfavicon.com/ to create animated favicon for my Blogger Blog.
Since you can't upload .ico files in Blogger you need to find free image hosting sites which let you to upload .ico file. I use Google page creator which allows to upload ico file. If you still are stuck what to do then try http://www.iconj.com/generator.php for both generating favicon and free hosting your ico files. Then get the link of favicon URL.

How to Add a Favicon in Blogger

1.Login Blogger.com

2.From dashboard select Layout. Then click on Edit HTML. Before editing HTML code save your template for your safety.

3.Then search for the following line:

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

4.Just after that line add the following code to enjoy your Blogger Blog favicon.

<link href='your ico file URL' rel='shortcut icon' type='image/x-icon
'/>

If you can't upload ico file then as a alternative way of above tips you can upload a 16x16 or 32x32 size image in any free image hosting site.Then get the image URL. Now instead of ico file url add image file URL in the following code:

<link href='your image file URL' rel='shortcut icon' type='image/x-icon'/>

After that save the template. Now you can see the favicon in the URL bar beside your Blogger blog or website address.

Comments Post a Comment

Anikin Skywriter - November 04, 2009

Oh yeah! This was suuuuuuper helpful to me! Thanks!
I would love it if you would check out my blog. I will NOT spam your post by giving you the address here. So, if you are interested, check out my profile.

Ahamed irshad - June 23, 2010

Fentastic Man... Thank you Very Much.... i did..

http://bluehillstree.blogspot.com

Mohamed Ayad - July 04, 2010

thank a lot for this nice trick
I changed my site's icon here:
http://to-learn-french.blogspot.com/

Harry Crown - October 27, 2010

Favigen is a Favicon Generator which will allow you to create a favicon for your website.

Dinesh - September 29, 2011

Thanx..successfully changed my blog icon.

Leave a Comment