How to add a favicon in Blogger

Posted by Nishadha in Thursday, May 15th 2008 under: Blog Branding Tags: blogger, blogspot, favicon

In one of my previous posts I talked about a Wordpress plug-in that allows the non technical people to add a favicon to their Wordpress blogs. Today I will show how to add a favicon to a blogspot blog without using any plug-in. Please keep in mind if you are tech savvy you can add a favicon to your Wordpress blog without and additional plug-in as well.To add a favicon you need to have a favicon and there are plenty of ways to create a favicon.If you are planning on using Photoshop then you need to download this plug-in.

If thats not possible there are plenty of sites out there that generates a favicon for you when you upload an image.Do a Google Search for “free favicon Generator” and plenty of sites would come up.I personally used http://www.genfavicon.com/ to create favicons because after uploading the image they let you select a portion of the image you want as the favicon. Set the size ( 16 x 16 ) capture and preview and you get a link to download the favicon.ico file. The whole process want take you five minutes.

Since you cant upload .ico files to blogger you need to find some free image hosting service to use and of course that service should let you upload .ico files.Since your using a service by Google I suggest you use Google page creator which lets you upload .ico files.Then get the link to the favicon file.

If thats a bit complicated for you go to http://www.iconj.com/generator.php where it creates a favicon for you and gives the facility to host if for free too.And it generates the url to be added in your header so I think this is the most easiest method for non tech bloggers.Thanks to Military Wife for sharing this info.

Now go to your blog and click customize.Then click the Edit HTML tab and search for “title” , this should be inside the header tags.You should find something like mentioned below.

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

Just after that line add the following line and enjoy the nice icon showing up before your url.

<link href=’your url’ rel=’shortcut icon’ type=’image/x-icon‘/>

Like this post ? Don't miss another one , subscribe to my RSS feed. After all, more than a 60M people cant be wrong.

36 Comments Already.Leaving a comment can give you PR2 back link.

Jabar Said,

May 16th, 2008 @5:47 pm

Here thorough your post about blogger vs wordpress , what do you recommend as a web hosting company ?

Military Wife Said,

May 25th, 2008 @6:10 pm

Thanks, I now have a favicons on both my blogs!!! I found a site that generates and hosts the icon for you, and its FREE.
http://www.iconj.com/icon_generator.php

See my favicons:
http://sahmilitarywife.blogspot.com
http://novelbloggers.blogspot.com

Nishadha Said,

May 26th, 2008 @1:34 pm

Thanks military wife , I’m sure people will find the site you found very useful.

Eric Said,

May 27th, 2008 @1:14 pm

Great great tip for bloggers using blogspot.
Now I had my favicon on my site now.
This makes my blog stand out from other blogspot sites with that “B” icon before the websites name.
Thanks!

SGE Said,

May 27th, 2008 @1:20 pm

Hi there,

And for the tip!
It was most helpful (will apply it as soon as I can).

Cheers,
SGE

KCee Said,

June 2nd, 2008 @3:47 pm

Hi! Thanks for reminding me about making my own favicon. I’ve been putting it off for a while, good that you mentioned it! I just uploaded it now.

Nishadha Said,

June 2nd, 2008 @4:20 pm

You are most welcome KCee

caroline Said,

June 3rd, 2008 @4:18 pm

Thank you for leaving me the comment on my blog about this post! I just got mine uploaded!

Thanks again!

dan Said,

June 4th, 2008 @7:46 pm

Hi there, it didn’t appear in mine. For blogger, could you elaborate on a few quick steps; i.e. where in the code it goes, etc.? I used the bottom box of the http://www.iconj.com/icon_generator.php above to generate and host, but when i inserted it below head, nothing happened.
tx

Nishadha Said,

June 5th, 2008 @4:03 am

Dan , I updated the post with exactly which line you should search for , insert the url generated from icon generator under that line and let me know how it goes.

ChampDog Said,

June 9th, 2008 @12:34 pm

Nice post! I have just done mine. Thanks a lot! Just a comment to the rest of the readers, if you copy & paste the code directly and it doesn’t work, you may want to manually type in the single quote: ” ‘ “.

Ben Said,

June 9th, 2008 @11:30 pm

How do I insert code into the header space when it is already filled by the header image?

lori Said,

June 10th, 2008 @4:07 am

Hello there,
I guess I really am a new at this I downloaded the fav thing and did it okay but can not get to where it should go.

Well thank you I did at least download it and thank you for dropping by my site

Nishadha Said,

June 10th, 2008 @4:11 am

Thank you ChampDog for sharing that information.

Ben,
I checked out your site , if you go to the edit html tab I don’t think you will see an image.search for the title tag mentioned in the post and insert the necessary code after that.Let me know how it goes.

Achmad Z Said,

June 10th, 2008 @9:57 am

Thank you for the info. I’ve added my fav icon.

Garden Gnome Said,

June 10th, 2008 @4:56 pm

Thank-you for this information! I’m in the process of adding favicons to all of my blogs. It took awhile to find where to put the favicon information on my cooking blog http://momskitchencooking.blogspot.com but I finally got it working. For some reason it is not working in Camino even though I cleared the cache and did have it work once. It’s working fine in Safari. I used the icon hosting site posted above. For anyone interested it works nicely with little effort. Photobucket won’t upload favicons

Garden Gnome

Eric S. Said,

June 11th, 2008 @12:42 am

Thanks for the tip, I bookmarked this page so I can come back once I figure out what I’m going to use for a favicon. It is a little difficult to come up with something that will stand out.

Thanks for coming by my site and suggesting this.

Vic Grace Said,

June 14th, 2008 @3:01 am

Thanks for the information about the favicon. I did have one up but it seemed to only work in Firefox so I though it wasn’t worth it. Maybe I should put it back. I haven’t really considered Entrecard but will give it a look. Thanks

Kandrey Said,

June 15th, 2008 @2:30 pm

Children in need.
DONATE EDUCATIONAL MATERIALS TO CHILDREN IN IMPOVERISHED COUNTRIES
In some parts of the world, educational materials such as books, paper, pencils, rulers and erasers are scarce and expensive. Donate now to help children in need.
LIBERTY RESERVE: U9022457

BlogMeTheMoney Said,

June 16th, 2008 @12:46 am

Thank you for submitting your entry to the Weekend Quick Picks.

hategan2005 Said,

June 20th, 2008 @9:29 am

THank you for your nice post. I will post a fav icon on my blog too. It seems to be inovative and usefull to post fav icons on your blog. And i will to. Keep up the good work, and i will come back to read more.

gwpalvery meoc Said,

June 23rd, 2008 @1:08 pm

aupymdsvb cwehm ajqlvmhcp yzejovbdr fpzeujk wulih qcpstg

Cindi-Moomettesgram Said,

June 24th, 2008 @2:36 am

Thanks for EC dropping by my blog & for this tip! I now have it on my blogger site and am trying to figure out how to add it to my Wordpress blog!

Rohit Said,

July 1st, 2008 @8:21 am

Thanks for information about favicon..

supz Said,

July 5th, 2008 @9:20 pm

Thanks a tonne buddy…I will add a favicon ASAP!

Regards

http://www.thekidsplanet.blogspot.com

crazykittykat1 Said,

July 8th, 2008 @12:08 am

thanks for pointing out the hosting site from Military Wife. I have tried a couple of sites and had no luck. I finally got one of these to work for my blog!

Geoserv Said,

July 18th, 2008 @1:33 pm

STUMBLED!

Fantastic post that I’m sure a lot of people will definitely use.

Nishadha Said,

July 18th, 2008 @4:05 pm

Thanks for the stumble Geosery

name Said,

July 19th, 2008 @12:41 pm

neploxo tak, i`m glad,

mantiz Said,

August 7th, 2008 @9:17 am

thanks a ton:)
I was searching how to do this for some time.. you have explained it clearly in simple language, great job!

Nishadha Said,

August 7th, 2008 @11:53 am

@mantiz, glad it helped you

Abhishek Said,

August 21st, 2008 @10:38 pm

nice tutorial but its not working for me.
I have uploaded icon file in google pages.
After applying your hack, I see google pages favicon instead of my favicon.

The blog is http://www.gtricks.com - tricks for google , gmail and gtalk.

The Url I am provifing is http://coolaery.googlepages.com/favicon.ico

Dont know what’s the problem ?

Nishadha Said,

August 22nd, 2008 @3:42 am

@Abishek,
If Google Pages are not working for you please try the http://www.iconj.com/icon_generator.php link. That’s the one I’m using and it works perfectly for me. Let me know if you got it to work.