22 Create a favicon for your blog
July 14, 2007 /

A "favicon" is the icon which appears in the left of your address bar and in your "favorites" menu in your Internet program. I've just added a favicon to my blog, which you should be able to see in the address bar above (Internet explorer users must have Blogger Buster bookmarked before the icon can be seen, as I will explain later).

To have a favicon for your own blog, you'll first need to create an icon which is 16x16 pixels in size, and save this as a .ico file to your computer. I used Gimp to create my favicon (which is a free program with most of the functionality of Photoshop), though you could also use paint or any other graphics creation program.

Alternatively, you could visit one of these sites which have pre-made favicons available for free download:

Once you have your favicon, you'll need to upload this to a hosting account. If you already have a hosting account somewhere, you can upload it there. Free image hosting for ico files is available at Ripway (30gb space), and also at MyFavatar (registration required). Be sure to make a note of the exact URL of your favicon when you upload it!

Now, you'll need to add the following code to your Blogger template between the <head> and </head> tags (Change the code in red to reflect the URL of your favicon):

<link href='http://imagehost.com/yourfavicon.ico' rel='shortcut icon'/> <link href='http://imagehost.com/yourfavicon.ico' rel='icon'/>
The easiest way to do this is to search for </head> in your template HTML and insert the code just before this tag.

Now save your template and view your blog. You should now see your favicon appear in the address bar!

If you are using Internet Explorer, you will need to bookmark your blog before the icon will be seen. You may also need to refresh the page/close the window before your icon will appear (a rather unfortunate glitch in IE, and yet another reason to recommend Firefox!). But be assured that it will appear! Also, when you bookmark your blog (or indeed any other website featuring a favicon), the icon will appear in your favorites list beside the site title.

Having a favicon for your blog enhances your blog's branding and identity, and is also quite fun! If you have created a favicon which you would like to share, please let me know as I will shortly be posting a set of favicons here for free download.

Technorati Tags: | | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

22 Comments:

  1. Thank you SO MUCH for posting this!

    I had wanted to put my own icon on my blogs but everyone else had tutorials that were talking about PHP files & other things that made it seem impossible.

    This was so easy! It took 2 seconds, LOL.

    THANK YOU!

    ReplyDelete
  2. Thanks Amanda! That was so easy. I just took a jpeg image, uploaded it at fileden.com and then replaced the URL that fileden created with the generic one in the code you provided. Took all of two minutes!
    -Kris
    www.forgeflyer.com

    ReplyDelete
  3. ThanX Amanda, your blog and your hints are greaeaeat!

    ReplyDelete
  4. There is a very nice service called IconJ.com: http://www.iconj.com/index.php
    It's a favicon generator/hosting service, it takes two minutes to get your code.
    Your site is very useful, thank you very much!

    ReplyDelete
  5. A small request, I have changed my favicon and it seems to successfully display it as well. But when i use the firefox add-on "Google icon", In the search results displayed, it still shows up as the blogger default icon. Is this because of the root host definition thing ? I host my blog with blogger but publish it with my own domain name. Have a look at http://glog.kaushikgopal.com/ and http://blog.kaushikgopal.com/, if you can find the time. Cheers and keep up the great work

    ReplyDelete
  6. Thanx for the code..i tried another code but this one only worked.
    And mozilla firefox is the best to check.
    Thanx to GIMP and Google pages too

    http://userend.blogspot.com/

    ReplyDelete
  7. Thank you! I tried directions from many others but your's were the only ones that worked! Thanks!

    ReplyDelete
  8. so simple ....just did that.

    Thanks

    ReplyDelete
  9. why now my own favicon on all my blogger's blog disappeared? could someone help me... thanks..

    ReplyDelete
  10. Thank you so much. I tried several different places, and your instructions are what helped me accomplish what I wanted.

    ReplyDelete
  11. Nice trick, I will do that

    ReplyDelete
  12. Thank u very much... Two thumbs up for you :)

    ReplyDelete
  13. Thank you for the links to host the favicon and the trick.

    ReplyDelete
  14. Hey, that's a really cool trick!! Thanks for sharing!

    ReplyDelete
  15. Thank You Very Much it's working :) on my blog too

    http://sudhirsunil.blogspot.com/

    ReplyDelete
  16. Super Experiance about the Domain name registration..I am registered My website Domain name in the site tucktail..

    ReplyDelete
  17. I use Favicon.cc. It's completely free. Try it!

    ReplyDelete
  18. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  19. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  20. Thanks to share with us the information. I wish you good luck!

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me