How to add a favicon in Blogger

Posted 15th May 2008 | Comments

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.

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.

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'/>

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.

Let's be sociable, come on, you know you want to. I appreciate the support.

  • Subscribe to feed
  • Favorite on Technorati
  • Submit to StumbleUpon

Post Title: How to add a favicon in Blogger
Author: Nishadha
Posted: 15th May 2008
Filed As: Blogging Tips
Tags: , ,
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • 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.
  • 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
  • thanks!
    i added favicon the way you suggested.... n it worked!
    :)
  • yey! it worked, thanks!
  • Gracepete
    Hi again. I have a question. My Favicon is not working on other bloggers' blogroll. Instead the [dreaded] orange B is showing. Is there a way to change this or is Blogger making it impossible? Any tips would be much appreciated. Thanks, Grace www.gracepete.com
  • Sorry Grace , I don't know how to solve that
  • Gracepete
    Nishadha~~ Bravo, a million times, bravo! I won't make you dizzy with where I've been, trying to make sense out of Favicon installation. I just want to tell you that you did it. Yours was the easiest to understand and implement. Imageboo is the best tool. For a non-tekkie like myself, I'm feeling pretty smug right now. Thank you! Grace www.gracepete.com
  • Glad you found it useful and thanks for commenting. Its comments like your that make blogging a pleasure
  • 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.
  • Thanks for spreading the word around , it would have being nice if you linked to the original post in your post
  • faa
    it really works! thank you thank you thank you!!!!
  • mede
    This error appears to me: XML: The content of elements must consist of well-formed character data or markup.
    :-??
  • thanks for guiding.. :)
  • No problem , Glad you found it useful
  • Thanks a lot.

    I have create a spanish entry about this in http://www.viper-moh.com.ar/2009/11/como-agrega...
  • You are welcome , Thanks for the mention
  • jmarloren
    Really helpful!!
    Simple and easy!
    thank you!!!
  • this was incredibly helpful!! so simple & easy! thank you!!!
  • HI

    This is not difficult because any one can add title tags and other tags in blogger. You can add these tags to layout of blogger.
  • pinkyunki
    I used www.imageboo.com for my favicon, but after few weeks it became default blogger favicon. Is that site only store image for temporary only? or is it blogger didn't allow us to change the favicon?

    Currently I'm using photobucket to host my favicon. Hopefully it will stay there and won't change back to default blogger favicon..
  • pinkyunki
    hi there.. thanks for your easy steps. I'm happy to have my own favicon!
  • Glad you found it useful :-)
  • 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 ?
  • Its a very nice post so thanx for this!
  • debbielee
    thank you so much for the update =)
    was really easy to understand!
  • No problem , its great that you found it useful :)
  • avi
    Thanks. Its realy a good post,very much helpful for me.
  • argentumvuglaris
    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
  • argentumvulgaris
    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
  • check your blog on this link http://www.getfavicon.org

    I am sure you will still see the blogger favicon. If yes, then could you share another article on how to remove the blogger favicon completely ?

    Thanks ..
  • nice service , unfortunately I don't know how to get rid of the blogger icon permanently
  • debbielee
    hey there something went wrong with my favicon. i didnt do anything to it and it went back to the normal blogger favicon. any idea whats wrong?

    here's my blog link http://hellopandayogi.blogspot.com/
  • 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
  • debbielee
    oh great thank you so much =)
  • 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 :)
  • ahfpharmacy
    I added right under title tag with ico iamge hosted on a website and I did not get the result I wanted.
  • what is your blog url ? , I can check it out for you and see whats wrong
  • ahfpharmacy
    i fixed it myself. Your directions are more detailed, making it more
    complicated to understand. I foudn a website that made it take less than 10
    seconds. Don't overcomplicate something that is easy to do.

    1) create favicon
    2) upload it to website, copy href link
    3 paste it into css layout before </head>
    <link href='http://www.iconj.com/ico/q/h/qhfhax0d9t.ico' rel='shortcut
    icon'/>
  • ahfpharmacy
    I did exactly what you said and it did not work. line for line.
  • nice awsome man
    but if ur blogger user you can host it aswell

    ty xD
  • Thanks! Great Help. =)
  • you are welcome , Glad you found it useful
  • 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
  • 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
  • Sharona
    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 ?
  • csram
    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.........
  • debbielee
    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 :)
  • debbielee
  • 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 :)
  • debbielee
    SUCCESS! thank you so duper much you've been such a great help =))))
  • Glad to help , cute little favicon by the way :)
  • debbielee
    thanks =))) again thank you =) really glad to have made my blog different =)
  • debbielee
    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 :)
  • debbielee
    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
  • tattingchic
    Thank you! I went to that link you gave:
    http://www.iconj.com/icon_generator.php
    and I totally have a new favicon that matches my
    blog header! Woo Hoo! :)
  • these post really helps me change my favicon..thanks for sharing a detailed information.
  • You are welcome , Glad you found it useful :)
  • 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.
  • iconj was not working anymore..
  • This could be a temporary problem , Iconj has had this problem before
  • 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...

    <b:if cond='data:blog.pageType == "index"'><title><data:blog.title/></title><link href='http://www.merrypic.com/files/wejt522ir3yp5uu6we6f.png' rel='shortcut icon' type='image/x-icon'/> <title><data:blog.pageName/> | <data:blog.title/></title>

    I've tried moving the code around, but this is the only way the favicon will show up. Any suggestions? Thanks
  • 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).
  • hello friend, this is very nice tutorial. I have design a website from ny web design company. And I want to put favicon on my website. But this tutorial is good. But too hard to understand. you should explain it in simple way so that every one can easily understand it.
  • 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 :)
  • @Radiance,
    Glad you found it useful :)
  • Thanks SO MUCH for the help. It works!!! :) Just added a favicon for my blog.
  • @Arsenal Poker Club,
    You need to add the code to show a favicon in that websites header section too.
  • Thanks for replying so fast. I was able to put the code back in the exact same place you mentioned and it worked perfectly. I hope it lasts. I put a track back from my blog to your site. Thanks.

    ~ Arsenal Poker ~
  • How can i get my favicon to show now that i have my blog pointing to my new domain name http://ArsenalPoker.info ?
    Any help would b greatful

    ~ Arsenal Poker ~
  • Worked The On The First Try. Thanks So Much For The Information. Ten Outa Ten. Check Out My Web Site For A Favicon YouTube Tutorial Used With This Information Here On The Site.

    ~ Arsenal Poker ~
    http://arsenalpoker.blogspot.com/
  • @Swizz
    Glad you found the article useful and nice looking favicon too
  • 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!)
  • @Argentum,
    Glad you found it useful and thank you linking back :)
  • 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,
    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
  • The hosting site is now forbidden (error 403) and favicons gone!
  • @Jules,
    Glad you found it useful and thanks for sharing and the link :)
  • Thank you so much for sharing how to do make one !
    I've been wanting my own favicon for ages, and now I have ! :)
    I will be sharing this site with other.
  • miriam & Madzs,
    you are welcome , glad you found it useful
  • Thank you for this tutorial, good thing I found my way here as the first attempt to putting a favicon in my blog was a failure. :)
  • thank you! even works in safari. ah. everyone can see my butterfly now. goodshit.
  • @Kalai,
    You are welcome mate :)
  • Do Support My blogs...
  • Hey Nishadha Finally I'm Done Man.. I have Tried With all Browsers.. Thanks Mate..

    Look at those..
    http://article-publisher.blogspot.com/
    http://kalai-spec.blogspot.com/
  • @Kalai,
    for it to work on chrome you need to add the type=’image/x-icon‘/ part , sadly the default one generated from iconj doesn't have it. Should work after adding it.
  • Here is a tutorial to insert a favicon in Blogger, and it is working currently (check on my own blog).

    http://dicocolight.blogspot.com/2008/06/logo-da...
  • chrome nishadha...
  • @Kalai,
    I checked it in IE , FireFox and Flock and it seems to be working fine , whats the browser you are using ?
  • Hey Nishadha.. I did Exactly what u have said.. but my Favicon is not changing... I don Know Why It is..

    http://article-publisher.blogspot.com/
  • @Learn2Flash,
    You are welcome :) , glad you found it useful.
  • Thank you so much! I have now created a Favicon for my blogspot! This is really very helpful information.

    ~Learn2Flash
  • @Dave,
    I cant see the added code when I view the source of your blog, if type = 'icon' doesn't work you can try type='image/vnd.microsoft.icon' and see if it works now.
  • Nishadha,
    It didn't work, but it's probably my stupidity more than anything ;-)
  • @DebtFreeDave,
    You need to add a bit more code for your favicon to appear in Chrome. You haven't added the type part of the code ( type='icon' ) , add that and see it should work in Chrome as well. Let me know how it goes
  • Thanks very much, tried it on IE and Mozilla, looks great. Can't seem to get it to show up on Chrome. Any suggestions? Here's the link:

    http://debtfreeearth.blogspot.com
  • for info you can download icons to create favicon at freeicon7here
  • @hj,
    it should work since they are working in my blogspot blogs , maybe you have added the code at the beginning and your original favicon is overridden by the default blogspot favicon. View the source of your blogspot blog and see if your ico url comes after this http://www.blogger.com/favicon.ico , most probable its coming before that and getting replaced by the blogger favicon , check and let me know if it works.
  • hj
    It don't work with the code in this post...
  • @Abner,
    You are welcome :)
  • thank you,it worked
  • Guess not LOL. Nishadha, I've send you the XML per mail!
    Thanks again!
    Greetings from The Netherlands :-)
  • Oops that didn't work? Maybe now?


    <!-- iconj.com dynamic favicon code -->
    <!-- end of iconj.com dynamic favicon code -->

  • @Jakolien,
    In the dynamic code section change the href to "http://www.iconj.com/ico/t/s/ts317y5xld.ico" in the first line and remove the second line in the dynamic code section. I tried this with one of my blogger blogs and it seems to work fine now. Let me know how it goes :)
  • Great post, now if I could only get it to work :-( I uploaded to the site military wife mentioned. And pasted after head. When I save the icon changes to a blank note but immediatly back to the B... Please help?
    Thanks!
  • @shaun,
    The problem was you have added it to your blogspot blog but not in the header section of the new website. I mailed you a file with the relevant details , it should fix the problem :)
  • 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.







    <![CDATA[/*
  • Very good info... Keep going...
  • 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
  • @oriental banana,
    You are welcome :)
  • thanks for the easy-peasy tutorial!
  • @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 ?
  • I've been wanting to do this for ages! Thanks to both you and MilitaryWife for the info. Even with my severe lack of all things technical, I managed to get it to work first time.

    All that remains is for me to be able to get shot of the Navbar on my blog and my disassociation with Blogger is complete! Although that is proving to be a little more testing. For a start, I've no idea if I'm using FTP...or what it actually IS.
  • @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.
  • 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 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 ?
  • @mantiz, glad it helped you :)
  • thanks a ton:)
    I was searching how to do this for some time.. you have explained it clearly in simple language, great job!
  • name
    neploxo tak, i`m glad,
  • Thanks for the stumble Geosery :)
  • STUMBLED!

    Fantastic post that I'm sure a lot of people will definitely use.
  • 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!
  • Thanks a tonne buddy...I will add a favicon ASAP!

    Regards

    www.thekidsplanet.blogspot.com
  • Thanks for information about favicon..
  • 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!
  • aupymdsvb cwehm ajqlvmhcp yzejovbdr fpzeujk wulih qcpstg
  • 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.
  • Thank you for submitting your entry to the Weekend Quick Picks.
  • Kandrey
    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
  • 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
  • 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.
  • 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
  • Thank you for the info. I've added my fav icon.
  • 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.
  • 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
  • Ben
    How do I insert code into the header space when it is already filled by the header image?
  • 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: " ' ".
  • 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.
  • dan
    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
  • Thank you for leaving me the comment on my blog about this post! I just got mine uploaded!

    Thanks again!
  • You are most welcome KCee :)
  • 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. :)
  • SGE
    Hi there,

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

    Cheers,
    SGE
  • 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!
  • Thanks military wife , I'm sure people will find the site you found very useful.
  • 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
  • Here thorough your post about blogger vs wordpress , what do you recommend as a web hosting company ?
blog comments powered by Disqus