Add Favicon To Blogger/BlogSpot Blog Easily

Create A Favicon For Your Website
Fastest, Easiest and The Best Method Available On Internet

(You may even directly use an animated *.gif image as a favicon)

This is the easiest way to create a Favicon (the small icon of a website visible at the along the url in the address bar) for your website !

There are many favicon generator websites, where you have to first upload a picture, edit/crop it and finally you get a *.ico that you can not even easily open to see, before you use it. Moreover if you want an animated *.gif image, then it makes the process even more difficult.

So finally here's the most simple code, edit & add it in the "head" region of your blog/website.... thats it!
You will see a new favicon the next time you open your website.

Log in to Blogger -> Layout -> Edit HTML
Find this in your template

</head>

And immediately ABOVE?BEFORE it, paste this code:

<link href="http://YOUR_IMAGE_ADDRESS_HERE.gif" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>

Replace the link in RED, with the DIRECT LINK to your favicon-image.

To get the direct link, upload the desired image here first - Tinypic

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

48 comments

Write comments

snam

January 03, 2009 7:03 AM delete

How do I make animated favicon then?

Divya Sai

January 03, 2009 7:05 AM delete

If you use an animated image [animated gif image], then it will be displayed along with its animation, it's better if you use an image of 60x60 or 80x80 dimensions !

snam

January 11, 2009 5:30 AM delete

Thanks!
But on one of my blogs, the favicon is not working even though the code is the same as the blog that is working. What should I do?

Divya Sai

January 11, 2009 5:44 AM delete

hi snam

Find this code in your template:
</head>

them IMMEDIATELY ABOVE IT, add that favicon code, that's it !

The Root's

January 16, 2009 11:21 PM delete

I just added the code in the correct and it is not working. Does blogger not allow this? I am REALLY new to editing HTML but have been pretty successful so far. Any suggestions?

Divya Sai

January 17, 2009 12:37 AM delete

Hello "The Root's"

I have checked the source code of your blog, you have placed the code above <head>

but you have to place it above </head>

So correct this placing, and it will start working !

Regards
Sai

Anonymous

January 17, 2009 3:13 PM delete

Sai,

Thanks so much for the response. I corrected the placement issue and it's working great in Firefox but not IE. I will have to work on that issue.

I have to say I have been having a lot of fun creating this blog for my sisters family - The Root's. They had one through their adoption agency that was not the best and rather boring.

There are still a few things I need to work on and add. I do not like the fact that on tab in Firefox the entire Blog name is not listed. I have tried to fix it without luck. I know it's because of how the header on the page reads. I need to read some books so I understand the html code better.

Thanks again for all of your help :-)

Laura

Divya Sai

January 18, 2009 1:57 AM delete

Hello Laura

1. The favicon you are using is an animated image(.gif), which will therefore doesn't appear in IE, you can use a normal .jpg image, if you want it to be displayed in IE.

2. You are always welcome on this blog....make the best blog for your sis - good luck for that.

3. To Display the complete title in your Internet browser's tab;

You'll see this code in your blog (5th or 6th code line in your template):
<title>Waiting For</title>

So replace "Waiting For" with "Waiting For Maisy"

Thats it !

Regards
Sai

Divya Sai

January 18, 2009 2:07 AM delete

And Laura, recently when i checked your blog, the favicon wasn't being displayed, that is not because of any code error, but the image address (http://sig.graphicsfactory.com/Diamonds/m.gif) itself wasn't working.

So i suggest you to change the image host.
Download that image or any (small)image and upload it to gigaimage.com, copy the direct link and paste it in the template.

Anonymous

January 18, 2009 1:32 PM delete

THANKS so much Sai! It all works now.

I am sure I will be back for additional advice in the near future :-)

Laura

Anonymous

January 18, 2009 1:50 PM delete

Well Sai,

I spoke too soon. I just opened the blog in IE and my favicon does not appear. It is still using the Blogspot one. Looks great in Firefox :-)

Divya Sai

January 18, 2009 3:06 PM delete

Make sure that this code is DIRECTLY above the
</head> line, and nothing is in between them.....tell me if it works or not !
Good luck !

Anonymous

January 19, 2009 7:52 AM delete

So How about for www.sitename.co.cc! How to change the icon of !

Anonymous

January 20, 2009 7:15 PM delete

Sai,

Well, it is directly above head and works great in Firefox, just not IE. I rarely use IE, but would still like it to work both places. Any other suggestions? I am such a newby that I cannot figure out where the error is.

Thanks again for all of your help :-)

Laura

Divya Sai

January 21, 2009 11:12 AM delete

Hi Laura

Well there are some issues with IE, you first try to bookmark your blog in IE (then restart IE) and see if it works.

-*-*-*-*-*-*
Otherwise replace the previous code with these two lines:

<link rel="Shortcut Icon" href="favicon.ico">

<link rel="icon" href="favicon.ico" type="image/x-icon">

replace bolded regions from both the lines, with the address of the ico file

now you CANNOT use any jpg or gif image, rather you have to use a .ico (an icon image)

You can use this web site to convert an image into a .ico file:

www.degraeve.com/favicon/

then upload it to hotlinkfiles.com to get a direct link and paste it in the code.

@ GNJ
as you are not on Blogger platform, so if you have the access to your template then follow the above described method, in case of doubts, you can ask here

Regards
Sai

Anonymous

February 09, 2009 12:36 AM delete

Thanks for all of your help sir!
For this site http://shanworld.co.cc/index.html/ he can change the icon! i don't how he did!
I will try as you said!

Divya Sai

February 09, 2009 5:34 AM delete

co.cc only provides you with a domain name, so you can of course change anything you want:

For ex, take hosting from
110mb.com , or
freehostia.com

And take a domain name from co.cc,
now redirect this domain to your hosting account,
and upload any index.html file to your hosting (with any favicon etc.),

that's it !
Now you'll have a domain name from co.cc while you'll be having all the control over the website !

If you want to combine Blogger and co.cc or Blogger and 1and1.com, read here:
Domain And unlimited Hosting From Blogger

Unknown

March 19, 2009 8:16 PM delete

Hi I get this error when I try to past it:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "feat" must end with the ';' delimiter.

This is what I'm trying to paste: <link href='http://picasaweb.google.com/lh/photo/eR6GdI8nraLupCUjAg5WOw?authkey=Gv1sRgCM2IssadtcTCgQE&feat=directlink' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Can you tell me what I'm doing wrong>?

Divya Sai

March 20, 2009 9:16 AM delete

Hi Shesten,

There's no entity as "feat" in this code, so that error is due to some other widget/hack in your template ...

Unknown

March 21, 2009 4:14 PM delete

Interesting! Thank you!

Heythem

June 11, 2009 12:00 PM delete

Hi Divya. is changing Favicon for blogger/Blogspot are allowable?

Divya Sai

June 11, 2009 12:14 PM delete

Yup as far as I know there's no problem in using a customized favicon...

Sensory Escape Images

June 21, 2009 11:09 PM delete

Hi,

I'm trying to get mine to work in both IE and Firefox. My blog is: www.SensoryEscapeImages.Blogspot.com

When I try it one way, IE works but FF does not.
When I switch it, then FF works and IE does not. Any thoughts?

Thank you,

Nathan

Sensory Escape Images

June 22, 2009 10:28 AM delete

actually...today it's working great on both. Please disregard my previous inquiry and thank you for your tutorial!

kejal

September 01, 2009 5:55 AM delete

i have many javascript scripts of which some are like falling animation leaves, hearts scripts and some are text following mouse, clock following mouse and other good scripts, actually the main problem is that i dont get ouput for any of this scripts put on my blog .

sometimes i get an error and if no error then the effects are also not seen, why is that problem comes,can\'t we have output of any javascript scripts on our blog www.webprogrammingscripts.blogspot.com or if we can have it then what is the procedure for this.

please reply soon i would like to know the real reason for this.

thanking you

Divya Sai

September 01, 2009 9:27 AM delete

Well you can certainly have scripts working on your blog...but tell me exactly which one are you trying to add?

Anonymous

September 23, 2009 10:34 PM delete

Hi Sai,
Thank you so much for this! :)) It works well in my blog.

Historian

October 29, 2009 11:36 AM delete

thank you!!!

John

January 25, 2010 5:41 AM delete

I want to have a simple icon, like yours ruther than blogger. I think its the default icon. Can u please provide a link or code for it, please......

Sai @ Blogger Help

January 25, 2010 7:05 AM delete

Hey John, use the exact code from the tutorial explained above, replace the line highlighted in red with any image/icon you want to use as your favicon. you want the exact revolving "s" symbol or any icon similar to it?

John

January 25, 2010 8:20 AM delete

I wanted the default icon which shows IE-page in internet explorer and revolving "S" you mentioned in mozilla. I think i have to delete the favicon so something. Can u please provide a link,code or some instrructions for this.

Sai @ Blogger Widgets

January 25, 2010 8:39 AM delete

Tutorial is the same as explained above, just replace the link in RED with this one:
http://i49.tinypic.com/2zimxpk.gif

Aldy

March 16, 2010 11:16 AM delete

Hi Divya,
thks for sharing this tricks, i really like your favicon, it spinning. I want make it to but how, please tell me how to do it?

Thanks

Divya Sai

March 16, 2010 11:34 AM delete

You can display animated images too, as I have explained in the post, use small-animated images...

Aldy

March 17, 2010 10:52 AM delete

Hi Divya

I now how to add favicon on my blog. But i mean how to make a favicon spinning like yours. I want to make it please tell me

Thanks

Aldy

March 17, 2010 10:53 AM delete

Hi Divya

I now how to add favicon on my blog. But i mean how to make a favicon spinning like yours. I want to make it please tell me

Thanks

Sai - Blogger Help

March 17, 2010 10:58 AM delete

I am using the rotating letter "S", cause my name starts with it. You can also search for any other image/icon with animation, and link it in the code above.

Here search like this:
G-Image search
and use any of the freely available animated image.

Admin - BloggerStop.Net

March 17, 2010 1:56 PM delete

@Aldy

Don't copy my site's design/format ...it looks like a phishing site!

Krish

March 19, 2010 5:04 AM delete This comment has been removed by a blog administrator.

Hendra @ hendra-site.com

March 28, 2010 3:50 AM delete

thx divya sai..:)
btw, i need u help!!!
Can u make me a favicon as u have the symbol H, pleaze..:)

sarjune

April 07, 2010 11:57 AM delete

ya friend i tried this in more site
but onb last attempt your code is look coorect
thank u and great

Willow Lake HOA

May 08, 2010 1:01 AM delete

Hi,
I followed your directions above, but I do not see my new favicon showing (I am using IE 8.) Any suggestions?
Thanks,
www.frufab.blogspot.com

Sai - Blogger Help

May 08, 2010 1:23 AM delete

The image you are using is too big, so it is taking time to load. First resize it to around 50 pixels width. Then re-upload and link it in the code.

Willow Lake HOA

May 08, 2010 10:18 AM delete

Hi, thanks for the quick response! I did what you suggested and still do not see it.
Thanks,
www.frufab.blogspot.com

Froggy

May 13, 2010 11:25 PM delete

Okay I've made the appropriate changes and my frog icon will show up briefly and then it returns to the B symbol again. Do I need to remove some coding to prevent the blogger symbol from taking over?

http://darwinsfrg.blogspot.com

Oh, and on my other question, about the Navbar...I figured out the answer :-)

Froggy

May 13, 2010 11:33 PM delete

Ah geez. Never mind. I figured it out. I need to pay attention. Like a previous commenter I had the code in the wrong place.

Thanks a ton!

Bharath

May 30, 2010 9:57 PM delete

Not working. Icon appears only for a few seconds and disappears. Had to resort to the old technique that I was using. But the problem with that was that, it disappears after a few hours or so.

And also appears only for the homepage. Can you tell me how to make it appear in all the pages.

http://chelseafcchampions.blogspot.com/