Adding a favicon to the blogger(blogspot) blog:
For those who don't know what Favicon is 'Favicon is a small icon(image) displayed at the beginning of the address bar of the browser.It is also called Favourite Icon,Pageicon and urlicon.
The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites.
Most of the people use 16*16 pixel favicon(you can also use 32*32 pixel favicon) with ".ico" format.But,you can also use gif,png(image formats) aswell.
So,ready to create a favicon?
Updated:
I created a Free Favicon generator tool which will save lot of your time. Just go to this page and upload any image file (JPG or GIF or PNG or BTM) and it will automatically convert it to icon file and you can save it to your desktop.
Next, you need to upload it to some host. There are lot of free hosts available to host .ico files and with hotlinking enabled.. Just do a quick google search.
Once you upload it to some host. you get a direct url to the favicon file..
Ex:
http://howshealth.com/favicons/bt.ico
Next, Skip the below part and go to Next step..
{SKIP THIS PART- ITS OLD} {start}
All you need is a program to create a favicon in (.ico) format.If you haven't a program to create in .ico format,No Problem....you can also use png or gif format.If you have Photoshop, or any other programs like that,open it and create a 16*16 image and save it as .png or gif format [look at the below screenshot below] or there are so many online sites which can create a favicon for you,just search by typing'free online 16*16 icon generator' in google.They ask you to upload a picture from your desktop,and they convert it into 16*16 .ico file.
So,Now your icon is ready...You are just a few steps away from creating a beautiful favicon for your site...
Now,go to Google Page Creator
and upload your icon file by clicking on the upload link(look at right side) and browse the file and note down the url of the file by clicking on the file.[see the screenshots below]

{SKIP THIS PART- ITS OLD} {end}
Now,go to your blogger dashboard>layout>Edit html[look at the below screenshots]
and look for this code(it is at the top the template)
<title><data:blog.pagetitle/></title>
and add the below code just after the above one[as shown in the below screenshot]<link href='ICON FILE URL' rel='shortcut icon'/>
<link href='ICON FILE URL' rel='icon'/>
and replace the 'ICON FILE URL' with the url of your icon file.(like
That's it! Now you can see a beautiful favicon in your blog.
Fee free to add the comments.....and doubts(if any?)








98 comments:
aweosomeposts buddy.. keep more such coming
Thanks for all !!!
OMG! I really love this blogger trick! It really helps me out! and i love my Favicon! thanks so much! keep posting helpful tips and more power!
ikel-adventures.blogspot.com
Awesome Post..Helped ME! thanks
hi,
I tried it in my blog http://merekavimitra.blogspot.com using .png and .ico formats... but it is not working in IE 6.00 and Avast 11.6 Build 3 browser... it is working properly in mozilla firefox... please help regarding IE
I'm also having trouble in IE - all I get is the IE default icon... Suggestions?
coool
but its not work in IE
Google docs is not accepting new signups.. What's the alternate..?
Thank you for share
Thanks! Worked like a charm.
there is no upload file option in google page creator n showing after signing in, Google Page Creator is no longer accepting new sign-ups .plz help me someone
thank you very much for this tutorial!
Thanks!
Thanks a lot bro, I will soon be trying this.
Another great work from you brother
thanks a lot, my friend..
i have added my photo as favicon...
it works
Thanks for the tip! is there anyway to get it to work in IE as well?? It only works in firefox for me..
it is the only solution that works....
AAAA it's not working for me! I've tried everything, i'm sick of it. But since google page creator doent exist anymore, I used sites.google and when I paste the URl my template shoed me an error about that!!!!!!
I've copied it corectly
thanks dude!!
works on chrome!
IVE TRIED SO MANY FAVICON TUTORIAL AND THIS IS THE ONLY ONE THAT WORK!
SO GREAT
thanks but its unclear and still trying to figure out
Hello everyone, Just noticed that some of you are having trouble with IE. IE does not support .png, or .gif etc for Favicons. To my knowledge IE only uses the .ico format.
THANK YOU SO MUCH!!! I'VE BEEN TRYING TO DO THIS FOREVER!! THIS IS BY FAR THE BEST TUTORIAL AVAILABLE
THANK YOU
THANK YOU
This was the easiest directions that i've gotten!!
Thank you!!!!!!!
Hmm, I am looking at this blog post in Firefox 3.5b4 (current at present) from Windows 7 RC, but I do not see a favicon for this blog.
Is that just ironic, or is it a bug I need to file? :-)
Clarifying: it is only this site where I am not seeing a favicon; favicons show up on other sites without any problem.
This worked perfectly for me! However Google Pages is no longer accepting new users, so I just used http://favicon.cc to both create and host my favicon.
Excellent post
Google page creator is no longer in use =(
thanx bro!
The reason it's not working in IE 6.0 is that the old version of IE does not display favicons. Try getting IE 7/8 or Mozilla Fireofx. It should work then. But if you do the above, your favicon should be working and displayed to others even though you cannot see it since you have an outdated version of IE. Goodluck!
It says that Google Page Creator is no longer accepting new sign-ups. It says to use Google Sites. Would I have to create a website or something...I'm confused. Sorry, Thanks!
Nevermind, figure it out!
Awesome post, by the way!
Great, 10x! It really works.
You rock man! thanks for sharing to us.
Yetta !!! ...T...H..A..N..K..S..
where can i upload my favicon and have its URL to paste in the blogspot?
Thanks it worked for me.
This site is amazing and super rocking..
i liked it.
it helps me alot.
thanks.
http://designrot.blogspot.com/
you are awesome!
thanks it helps me a lots
http://solution-for-sleep-apnea-problems.blogspot.com/
Cool Man, that "B" favicon was definitely starting to get on my nerves!!!
awesome.. very nice n thankss
einfoplanet.blogspot.com
It works. Great help.
bizworldabout.blogspot.com
Thank you very much.
double thumbs up bro! =)
FYI - you can upload to photobucket, or picasaweb.. image does not need to be .ico to work... Mine is a jpg and worked just fine. Before, I was trying to use .ico, and it was not working.
i can c my favicon at internet explorer but not in chrome or firefox...
plz help
http://drkoushik.blogspot.com/
This didn't work for me - why??
Thanks for the tip - I love the idea of adding a favicon. I found that it's visable on a PC but not on a Mac. Since I work on a Mac, initially, I didn't think it worked. Needed to enlist a little help from my brother who's a software engineer and then we tested it out. For those of you who think it didn't work, try viewing it on a PC. You can see mine below:
http://360fusionglass.blogspot.com
And, if anyone can see it on a Mac, definitely pass along the tip
Hi Lynn, I looked at your site in Chrome and I can't see the favicon but in Opera I could see my own so will follow up on the basis that chrome doesn't work but will eventually
thanksss very much
I'm on a mac - so I'm assuming that's why I can't see it. Thanks Lynn Holman for the info.
thanks very much
Great post
THANKS ALOT!
SEE MY ANIMATED FAVICON IN ACTION:
http://kenjiiiii.blogspot.com
thanks buddy
Awesome post,It really works.
but the favicon is too small..is there any code to make the favicon appear larger...
128x128 is also too small
This is wonderful! It works!! :) I used ImageShack (http://imageshack.us/) to host my JPEG. Worked on first try! Very easy to understand directions. Thank you for all you do!
http://www.healingcuisinebyelise.com
This is great. Thanks
Wonderful. never knew it is possible. i love it. i use to dislike the big B in my site.
thank you!!!! that is the coolest thing.
i've been trying unsuccessfully for a while to do this. your instructions have been the first to help me accomplish this task. thanks so much! this was so quick and easy!
Worked like a charm. It does help give a more professional look to Freemius.com, Thanks!
I'm not sure why mine isnt working. I have it in the correct place but still nothing? What am I doing wrong?
Informative post.
Just wanted to point that there are many icon hosting websites which generate their own code and only that needs to be inserted after titledata:blog.pageTitletitle.
Keep the useful blog posts coming.
Cheers,
AVP
www.avp-blogs.com
Thanks for the share it really works.
watch my blog http://www.tdesi.com
It's an Entertainment blog.
Once again thank you...
Great article thanks
thank you for the trick, i will make for my blog
Thanks a lot
i am Tharik sham from India, this tricks Realy worked. http://pcmobileshelper.blogspot.com
Mobile Tricks
Dear all who use IE,
In IE, you must bookmark it.
Thanks.
Regards,
-CP Cheats Priambada, http://www.CPCheatsPriambada.com/
hmmm i'll try it yaaa ^_^
i got it to work on chrome using favicon.cc but have tried all different hosts and methods for it to display on IE... bookmarked it too... and can't get it to work. is driving me crazy! please help someone!!! lols. m xx
www.puppylovepetwear.blogspot.com
thank you x1000
Thank you very much bloggertricks i was trying form past 1week but finally i got through your site thank you very
www.yuvaimages.blogspot.com
SIR,
its not working in my blog. It still shows the symbol of blogger.
I used co.cc and it show the favicon of co.cc
Please help me to change the co.cc favicon.
wow...finally i got it. thx man..
i can't get it to work..
Thanks so much for this post! I was wondering if you could help me though. I got my favicon up a few days ago using your tutorial but now it's not showing up on my computer. All of my friends can see it on theirs so I know it's still there but it just doesn't show up now on mine where it did before. Could you help me? I know it shouldn't matter if others can see it but it's bugging me. Thanks!
Thanks!
After struggling for a little while I did it!
Thanks a million, your tips works great.
Thanks, now my blog looks branded..
U cant see it in chrome
Use Firefox or IE
i didn't have
i only have following below code
so, i got favicon in home page only, but not any other page..
how to get all page ?
thanx.
Thanks!! It doesn't show in Safari, but I can see it in Firefox. Thanks for the great tutorial.
thank you
thnx man for this
!! :)
wenisima!
funka! :p
Thank you for providing the perspective. I just read a part of the article, so I don't know much what to say. Good luck for the new member!
but the favicon is not visible in google chrome.
This post is full of useful tips as well as techniques for bloggers and I am very much impressed with the theme and context and the efforts done in this regard are appreciated.
Hello. I am very excited to try this but it will not generate a favicon. Then it asks to save file or download later. When I save it, it only directs me back to the generator page. How does this work?
hi, i got some trouble w/ my favicon,
its suddenly wasn't appear, i keep refresh it but didnt work.need help badly :(
Hey thanks for the help! I also had difficulty using google sites with the code, but for anyone still confused, use the previously mentioned code, and then when you paste your image URL, google sites adds a lot of extra code onto the URL, so just delete everything past the .ico and it should work out fine - thanks again for the code.