Proven system to make money online ,with an 8 week money back guarantee from PayPal, get it now or read the full Instant Payday Formula review.

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.

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.

If you enjoyed this post you might want to subscribe to my RSS feed , so you want miss the future posts. Thanks for visiting!

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.

  • 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!
  • SGE
    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
    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
  • 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: " ' ".
  • Ben
    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.
  • 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
    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.
  • aupymdsvb cwehm ajqlvmhcp yzejovbdr fpzeujk wulih qcpstg
  • 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 a tonne buddy...I will add a favicon ASAP!

    Regards

    www.thekidsplanet.blogspot.com
  • 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 :)
  • name
    neploxo tak, i`m glad,
  • 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 :)
  • 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 ?
  • @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.
  • 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.
  • @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.







    <![CDATA[/*
  • @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 :)
  • 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!
  • @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 :)
  • Oops that didn't work? Maybe now?


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

  • Guess not LOL. Nishadha, I've send you the XML per mail!
    Thanks again!
    Greetings from The Netherlands :-)
  • thank you,it worked
  • @Abner,
    You are welcome :)
  • hj
    It don't work with the code in this post...
  • @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.
  • for info you can download icons to create favicon at freeicon7here
  • 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
  • @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
  • Nishadha,
    It didn't work, but it's probably my stupidity more than anything ;-)
  • @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.
  • Thank you so much! I have now created a Favicon for my blogspot! This is really very helpful information.

    ~Learn2Flash
  • @Learn2Flash,
    You are welcome :) , glad you found it useful.
  • 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/
  • @Kalai,
    I checked it in IE , FireFox and Flock and it seems to be working fine , whats the browser you are using ?
  • chrome nishadha...
  • 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...
  • @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.
  • 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/
  • Do Support My blogs...
  • @Kalai,
    You are welcome mate :)
  • thank you! even works in safari. ah. everyone can see my butterfly now. goodshit.
  • 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. :)
  • miriam & Madzs,
    you are welcome , glad you found it useful
  • 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.
  • @Jules,
    Glad you found it useful and thanks for sharing and the link :)
  • The hosting site is now forbidden (error 403) and favicons gone!
  • @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
  • 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/
  • 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 ~
  • @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 ~
  • Thanks SO MUCH for the help. It works!!! :) Just added a favicon for my blog.
  • @Radiance,
    Glad you found it useful :)
  • 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 :)
  • 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).
  • 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
  • Sorry, my bad, I figured it out! THanks!
  • iconj was not working anymore..
  • This could be a temporary problem , Iconj has had this problem before
blog comments powered by Disqus