In a previous posts I talked about how to add a favicon in WordPress blog. Today I will show how to add favicon in Blogger blogs 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.
Create and Host Favicon for your Blogger blog
If that's 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 them 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 .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 that's a bit complicated for you go to http://www.iconj.com/ 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.
Update - I'm getting comments saying that iconj doesn't work anymore. So the best option is to create the favicon using genfavicon and upload it to a free image hosting site. I recommend ImageBoo , you don't have to register and you can upload ico files. After uploading the file select the direct link given at the very bottom. It should look like "imageboo. com/files/1zh7vnfh8qwhu9f1dinu.ico " , add that as the "your url" given in the below instructions.
Add Favicon in Blogger
*** Update - Previously you needed add HTML code manually to add a favicon in your blog. But now you can add it easily using the Blogger dashboard. Go to your dashboard and go to the Design tab. Select the Page Elements section. At the top you find a separate are for the favicon. Click the edit button and upload your file and your done.
Take your blog to the next level , Learn from ProBlogger Darren Rowse all the secrets you need to make six figures from your blog.ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income
There are some basic mistakes made by blogger , especially new bloggers that can reduce there traffic , networking and money making oppurtunities. Check whether you have made these blog design mistakes and correct them as soon as possible.


Here thorough your post about blogger vs wordpress , what do you recommend as a web hosting company ?
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
Thanks military wife , I’m sure people will find the site you found very useful.
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!
Hi there,
And for the tip!
It was most helpful (will apply it as soon as I can).
Cheers,
SGE
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.
You are most welcome KCee
Thank you for leaving me the comment on my blog about this post! I just got mine uploaded!
Thanks again!
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.
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: ” ‘ “.
How do I insert code into the header space when it is already filled by the header image?
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
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.
Thank you for the info. I’ve added my fav icon.
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
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.
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
Thank you for submitting your entry to the Weekend Quick Picks.
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.
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!
Thanks for information about favicon..
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!
STUMBLED!
Fantastic post that I’m sure a lot of people will definitely use.
Thanks for the stumble Geosery
thanks a ton:)
I was searching how to do this for some time.. you have explained it clearly in simple language, great job!
@mantiz, glad it helped you
@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.
@All Mod Cons,
Glad you found the information useful. I didn’t get the last part of your message though , are you going for self hosted blog ?
thanks for the easy-peasy tutorial!
@oriental banana,
You are welcome
thanks a lot I was looking for this for an hour but finally found it on your blog and now I have my own favicon in my blog.Do check out my favicon and tell me whether you like it or not
Very good info… Keep going…
Here is my coding and I have followed everyones tutorials and can not get it. Something simple probably is wrong, anyone care to look it over and tell me where I am wrong? Possibly email me back at eugene.mayfield@gmail to explain what I need to fix.
<
I’ve been wanting my own favicon for ages, and now I have !
I will be sharing this site with other.
@Jules,
Glad you found it useful and thanks for sharing and the link
@Argentum,
iconj seems to be down at the moment , I will check for a day or two and remove the link from the post , meanwhile you can try the other website , create the icon and upload it to Google pages and get your favicon displayed
Nishadha, thanks for the reply. I see today that the favcons are back in place.
I am going to link your page on my blog Tomas Arcanum so that others may take advantage of your wisdom in this matter.
Thanks again
AV
@Argentum,
Glad you found it useful and thank you linking back
I did it! So easy. Thank you for the step by step walk through. I used the icon/j generator and it took from start to finish about 2 minutes.
Wahoo! I have a favicon (and I didn’t even know what one was until I read your post!)
@Swizz
Glad you found the article useful and nice looking favicon too
@Radiance,
Glad you found it useful
HI, great post, but I have a problem, When I upload the code and link, I see the favicon, but only on my home page of my blog. Not on any other post page. Could someone please help me with this. Thanks!
Checked out your blog , you have added the code inside the title tags , You have to add it just after the title tag not inside it. You may also want to replace the original code inside the title tag because your title is showing the link to the image at the moment. Feel free to contact me if you have any problems
Ah.. that's why the favicon wouldn't show up in posting page (only show up at the home page). Thks for clearing up this. Now my blog have its own favicon (and its in png extension, hosted in photobucket).
Sorry, my bad, I figured it out! THanks!
Thanks for helping me, but I just don’t get it. here is the code I have…
|
I’ve tried moving the code around, but this is the only way the favicon will show up. Any suggestions? Thanks
iconj was not working anymore..
This could be a temporary problem , Iconj has had this problem before
Thank you SO much for posting the genfavicon site. I'd been trying all morning, unsuccessfuly, with other more complicated instructions. This worked in 30 seconds.
these post really helps me change my favicon..thanks for sharing a detailed information.
You are welcome , Glad you found it useful
hey there i've been trying this for so long but i can't seem to add the favicon to my blog. i can't find the <title><data:blog.pageTitle/></title>.
oh someone please help
hey i just figured it out =0
hahaha was so dumb of me
THANK YOU SO MUCH FOR ALL THIS INFO! has been a GREAT help
you rock =)
Glad you found it useful and figured it out too
hey there i got one more problem. i realized that the blogger favicon's code is before mine when i check my page source so my favicon doesnt appear everytime. how can i fix it? hat do i do?
Hey sorry about the late reply , yep the blogger favicon is before yours , but since your favicon code comes after that your favicon should be the one that is visible. I have added this to my blogspot blogs and they work without a problem , can you please post your blog so I can take a look at the code
You have given the address of web page generated by genefavicon. Try generating it again , then when the favicon is generated right click on the image and save ico file somewhere. Then upload it to a server and then give that path in href = . If that sound a bit complicated used the iconj link , the process is much simpler and they do the hosting for you as well
SUCCESS! thank you so duper much you've been such a great help =))))
Glad to help , cute little favicon by the way
thanks =))) again thank you =) really glad to have made my blog different =)
tanx ya.i try tis fav icon technique by d steps given in many sites bt no use.bt i did it easily using ur site.1s again tanx………
it doesnt work! U SUK! STOP WASTIN MY TYM!
It seems to work for many others and I personally use it in my blogpsot blogs , whats the problem you are having ?
I am at my wits end. I consider myself pretty “web literate” but I can't get the favicon to work with Blogger. For years my blog favicon worked and then one day (around the time that blogger's new layout styles came out of beta) my blog went back to the default icon. Since then I've tried various small things but can't get it to work. I have followed your steps and tried again but with the same results … my link reference IS in the HTML source code, it is in the right place (aka, right after the TITLE), and yet the blogger favicon reference that I guess is inserted by default above it seems to take precendence.
My blog is http://kensnyder.blogspot.com. Any help would be GREATLY appreciated.
Well I must say I had too many “test blogs” and I was pointing to the wrong one. It works now. It is all predicated on putting the text right after <TITLE>. Very helpful and thanks for your post.
I do have one more question … is there a way in an ICO file to specify an transparent background? My icons all have white backgrounds that look ok when a tab has focus but a bit awkward when the tab is not in focus (and the tab colour is grey).
I'm not exactly sure about your question , but if you are looking for a favicon with a dark background one thing you can do is create an image of the favicon you want using Paint or some software and then generate the ico file using one of the links given above , hope this answers your question
Ironically, did you notice that this blog doesn't show the favicon when you look at the comments page? (it works fine when you're not viewing comments)
Thanks for pointing that out , As you have mentioned they don't seem to work when a comment is clicked , maybe its something to do with DISQUS which is my commenting system , Need to check it out a bit more
Thanks! Great Help. =)
you are welcome , Glad you found it useful
nice awsome man
but if ur blogger user you can host it aswell
ty xD
what is your blog url ? , I can check it out for you and see whats wrong
Hey Nishadha !! Thanks a lot for such a beautiful tutorial. And I must say the comments section has added value to the post for I fixed my problem by the discussion in one of the comments. I shifted the code near </head> tag from immediately after the</title> tag as that was displaying the “Blogger” favicon instead of mine.
Thanks again Nishadha for sharing.I'll soon link back to this post in my credits links.
Glad you found it useful , appreciate the link as well
debbie , iconj is down at the moment , that is why your favicon is not appearing , your code is ok , it will be ok in another hour or so , I will update some alternative places to upload the file so people have more options
oh great thank you so much =)
iconj has been down for days (4 I think) has the service ended?
What is an alternative?
Your correct , iconj seems to be down , I have updated the post with an alternative
Thanks for the update, I have moved all to the new host site and all is weel. I now have Favicons again.
You are welcome , Glad you got them back
Thanks. Its realy a good post,very much helpful for me.
thank you so much for the update =)
was really easy to understand!
No problem , its great that you found it useful
Its a very nice post so thanx for this!
I tried but messde up somewhere & now have a W instead of the blogger icon. I'm lost in all the code & don't know where to begin removing it form. Can you possibly help? Thanks
The idea is to removed the blogger icon and have your own customized icon and by the looks of things you have done it correctly and the “W” icon is showing up. Do you want to remove it and get the original blogger icon back ?
hi there.. thanks for your easy steps. I'm happy to have my own favicon!
Glad you found it useful
this was incredibly helpful!! so simple & easy! thank you!!!
Really helpful!!
Simple and easy!
thank you!!!
This error appears to me: XML: The content of elements must consist of well-formed character data or markup.
?
it really works! thank you thank you thank you!!!!
Im having issues. It keeps giving me the following error
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 character sequence “]]>” must not appear in content unless used to mark the end of a CDATA section.
Help?
Did you only add that line , I checked the source code and the HTML part was added correctly. However I don't think your favicon will get displayed. You have given the download page of the favicon file as the url , but you must give the path to the correct icon file for it to be displayed.
Glad you found it useful and thanks for commenting. Its comments like your that make blogging a pleasure
yey! it worked, thanks!
Sorry Grace , I don't know how to solve that
thanks!
i added favicon the way you suggested…. n it worked!
The problem with this is when you'll go to other page of your blog, your favicon won't appear, it only appears in Homepage. is there any fix with this?
You mean it want appear on single pages ? I checked in my blog and it seems to be working fine
I figured it out now. My theme has a different coding, for the title page and the body page, it separates because of the slideshow. That's why I also placed it in the body section.
I figured it out now. My theme has a different coding, for the title page and the body page, it separates because of the slideshow. That's why I also placed it in the body section.
Thank you so much! it worked for me. Been wanting to put favicon on my blog and finally I found something that really works.
Glad you found it useful
I tried it following the above, and can't get it to work. Help!!
I did Exactly as you describe above. This time all coding was saveed successfully, but no Favicon showing??
What do you suggest??
Hi, can u show me the link to your site so i can hav a look ?
thanks for tip
it's awesome!
Thank you very much, I tried some other way's to get my favicon into the blogger page but this is the only one that worked. Sindce they don't support FTP anymore and i have to deal with the blogger template it's not standard HTML anymore…
Glad you found it useful
<link href='your url' rel='shortcut icon' type='image/x-icon'/>
must go just before
</head>
not above
<title><data:blog.pageTitle/></title>
It doesn’t work in IE! help me!
I didn't see the necessary when I checked the source code , Did you add it ?
Thank you for reply! now it work!
Hi Stiphaniliffe,
Thanks for your advice, I could now figure out why my favicon was not visible on individual pages. Thanks a lot
Thank you so much! I was able to add the favicon in my blog! at first it didn't work. I forgot to add the rel='shortcut icon' type='image/x-icon' inside the link. anyway, thank you so much! this is great tutorial!
You are welcome , Glad you found it useful , nice looking favicon btw
Of all the sites I've stumbled upon, yours is the only one that helped me on the favicon. Thanks much and I will surely follow you on twitter : )
Glad you found it useful
Hi, try adding the code above “<”title”>”lovaly.bs.com”<”/title”>” , it might work then , if it doesn't send me the template I will look into it , nice blog btw
Thank you! Yours the only site that I found to be simply and correct! at adding the favicon! It only took a few minutes and then there is was! Thank you, thank you!
You are welcome , Glad you found it useful
Hi there,
Great post. But there seems one problem with my blog. After using your code I found nothing is showing im my page. However when I pasted the code after the code
I found it working like charm.
Also I read somewhere that to show your favicon in Chrome and Safari the following code
<link href='icon file url' rel='icon' type='image/x-icon'/>
must be used along with the one given by you.
Hope thats of some help to those facing problems.
Keep up the good work
I'm sorry I can't see the code you have pasted . probably because it is converted to HTML , also isn't the code you have mentioned the same as the one I have put up in the blog post ?
whats the url of your blog so I can look into it a bit
Hi Susan , the most likely thing is you forgot to add the < symbol before the link element , you should be ok after you added that
dude Mood http://www.masoodownload.com
Thanks for Sharing.
Finally – a favicon code that works! I've been through many other 'expert' sites only to find their code was useless. Thank you so much!
http://qualitypass4all.blogspot.com/
Great post! Thanks for sharing! I tried a lot of ways, and finally this one works. Thanks!
You are most welcome
That is because you are not linking to a ico image file, your just using a link to picasaweb , which doesn’t support ico files, please check the instructions about hosting your ico files and try again
Thank you. That’s work!
That’s work. Thank you so much!
Finally !!!!!!!! A favicon code that works! I’ve been through many other sites on HOW to’s took so much of my time only to find their code was effffin useless. I had to Thank you so much for this! I also use that imageboo, i hope it will work for a long time again thank you!
It seems to be working find and I can see your new favicon as well. I’m using Firefox, whats the browser you are using ?
i will try
thanks
Thanks for this guide. Is it normal that you won’t be able to see the favicon in Internet Explorer. It seems to work fine with Chrome and Firefox. I tried refreshing IE but the favicon is still not showing. Does it take time to load?
Sometimes it might not work on older version of IE, refreshing the cache might work.
Hi Harish , Thanks for commenting , what part of the tutorial did you find it hard to understand ? Is there any suggestion you would like to make to make it much better. Appreciate your feedback
nice service , unfortunately I don't know how to get rid of the blogger icon permanently
Thanks for spreading the word around , it would have being nice if you linked to the original post in your post