Monday 30 November 2009

How to add a favicon to your Blogger blog

Someone left me a comment asking for a tutorial on how to add a favicon to their Blogger / Blogspot template.

Now if you don't know what that is (you may not, depending on what type of browser you're using). It's the little icon in the menu bar - and bookmarks folder, etc. Read about Favicons on Wikipedia here.

Here is what my favicon looks like:




How to make one:
For best results I recommend using a square image to start with (as it will be scaled down to {usually} 16x16 pixels). If you want a transparent favicon, you should use a GIF or PNG file with transparent background.


Where to generate a favicon?
There are many sites out there where you can upload an image from your computer and a favicon will be generated for you (see below for a site I recommend).


Where to host a favicon?
A favicon needs to be hosted somewhere.

Unfortunately the favicon file is an .ico file type that many free image hosts do not support :( I did some quick research and found a lot of free favicon hosts no longer exist. I found one favicon generator {IconJ} that will not only generate the favicon, but also HOST it for you too!

IconJ
will generate the icon and supply you with code you need to imput into Blogger. I'm not affiliated with that site in any way - there may be better places out there - but I think they seem to be an easy-to-use site. And more importantly, it seems they will HOST the favicon without you having to sign up or pay!


So, what do you have to do?
  1. Start off with an image (as previously mentioned, square is best)

  2. Visit IconJ and upload your image - once uploaded you will see a notice like this:



  3. Copy and paste the supplied code.

  4. Log into Blogger. Go to the LAYOUT > EDIT HTML tab

  5. In the large box of code, scroll down (or search) for the following code:

    ]]></b:skin>

    </head>

  6. Paste the code you copied from the IconJ site in between the above tags (if it doesn't look exactly like that, don't worry - the most important thing is to post it just above the </head> tag! It will now look something like this:

    ]]></b:skin>
    <link rel="shortcut icon" href="http://YOURICONADDRESS.ico" />
    </head>
(the red text above indicates the new code you have just added - this is just sample text, yours will be different of course!)

Click on "PREVIEW" and your new favicon should be displayed in the preview of your site (assuming of course you have a browser that supports favicons).

If it all looks OK, click "SAVE".

Let me know if you have any questions, but that works fine for me!

PS: It is probably worth noting that IconJ is a free host and therefore may go down at any time - or your icon might suddenly disappear (and there's really not a lot that can be done since it's free and all). If you have another similar site, let me know in the comments section.

41 comments :

  1. Perfect!!! marvellous and very fast!! Thanks...bss

    ReplyDelete
  2. Thanks Lolly, I've made mine already and I'm thrilled.

    ReplyDelete
  3. Awesome! I can't wait to do this. Thank you. I'll tell my followers about this, too.

    ReplyDelete
  4. I can't get this to work! What am I doing wrong? I followed the instructions exactly, and it won't show up! Help!!

    ReplyDelete
  5. Okay, I it shows up on firefox, but not on safari....What??

    ReplyDelete
  6. Jamilla,

    Oh no, not sure why it won't work. Do you have a browser that supports favicons (my first thought).

    I guess the most important thing to note is that it should be placed just before the </head> tag (the other tag that I mentioned = ]]></b:skin>, isn't as important).

    That should definitely work! I've just tested it again on a new blog and it works for me! (shows up in Firefox and Safari).

    ReplyDelete
  7. Thanks a lot!! This was really great! =)

    ReplyDelete
  8. I have the new Safari. I tried it again and still it works in Firefox and not in Safari. Email me.
    Jamiliajean@yahoo.com

    ReplyDelete
  9. So awesome! Thank you for the tip!

    ReplyDelete
  10. I can't get the flavicon to work. Anyone else have issues with google chrome? It does show your lolly so I'm assuming it is flavicon friendly.

    ReplyDelete
  11. thanks for the tip. this is very helpful

    ReplyDelete
  12. Thank you so much for sharing!! I always thought you had to have something other then blogger to have one of those!

    ReplyDelete
  13. Very helpful! I was looking how to do it a lot of time ago.

    ReplyDelete
  14. It works for me! Thanks!

    A little tip for those having issues:

    When you go to "Edit HTML," hold down the Ctrl button and press "F." This will pop up the Find function. Then, paste in the code Sharnee posted and it should take you right to the correct place.

    Hope this helped a little bit. The Find function is a beautiful thing! ^_^

    ReplyDelete
  15. Thanks so much. I was able to get it to work but have a question. If you look on my blog, the favicon has a white background. How did you get yours to have the same background so that it blends in with the background.

    ReplyDelete
  16. Hi Jon and Stefanie: I think I used a transparent image to create my favicon, therefore the background remains transparent. You may need a graphics programme to do this (or you might be able to download some transparent ones online somewhere?). Try creating/using a transparent png and using that to create a favicon.

    xx

    ReplyDelete
  17. hey thanks a l0t f0r the tips..
    the favicon is s0 c00l~ :)

    ReplyDelete
  18. what means "sharpen lever"? what is for?? (i dont speak english -.-) just a simple explanation pls

    ReplyDelete
  19. the_whistle: I have NO idea what you mean when you say "sharpen lever", sorry!

    ReplyDelete
  20. PS: thanks for the hint Bri! I do that all the time and assume everyone else does too! (but I guess they don't)!

    ReplyDelete
  21. under the uploading form .. theres an option that says "sharpen level" and you can choise no sharpen, sharpen +1, +2 or +3.. what is this???

    ReplyDelete
  22. the whistle: ahhh, I see! to 'sharpen' an image is a kind of image filter which might make the favicon easier to view when it's smaller.

    ReplyDelete
  23. Thanks for the tutorial!

    ReplyDelete
  24. Muchas grasiasssssssssssssss al fin tengo mi favicon...

    Besotessssssssssssssssss

    ReplyDelete
  25. Me preguntaba como poder colocar el favicon.. pero en Foros.. es posible??

    Muchas grasias de nuevo

    ReplyDelete
  26. Hmm, i can't get why my blog can't Get this Thingy =="

    ReplyDelete
  27. thank you soo much! I am soo happy with my favicon!

    ReplyDelete
  28. This is a great post! I just started my blog and I had issues with Safari showing my favicon too. But I found that the fix was to include

    type='image/x-icon'

    to the end of that tag just before /> .

    This should work for Google chrome too.

    Hope that helps!

    ReplyDelete
  29. It works! Thank you so so much for sharing! By the way, would you mind to view my blog? :D

    ReplyDelete
  30. You are awesome. The only page on the web that helped me <3

    ReplyDelete
  31. Thank you so much! It is great, up and working! I love it!!!! THANK YOU!

    http://natalinasblog.blogspot.com/

    ReplyDelete
  32. yay! it works! thank you so much for this post~

    ReplyDelete
  33. Great and easy tutorial!! Thank you so much!

    Just mentioning for the ones who didn't know (like me) that you can press "control+F" to search a desired text! Very handy, at least I think so :)

    xxx

    ReplyDelete
  34. how to make the background of my image disappear?

    ReplyDelete
  35. thank you Sharnee.. It's awesome!!

    ReplyDelete
  36. Thanks! It worked fabulous! Now to figure out the transparent thing... there's always something to learn! :)

    Donna

    ReplyDelete
  37. Thank you so much, I was fighting with this yesterday but you've made it SO easy and simple to understand my things now changed and done.

    Ms Red

    xx

    ReplyDelete
  38. Thank you so much. I finally found a tutorial that I can understand. Yay. Yours is so easy to understand. I did it the first try.

    ReplyDelete

If you're having issues, PLEASE leave an email address I can contact you on - and also don't forget to leave your blog URL. Please also read my FAQ which are >>> HERE

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

Thanks for reading,
Sharnee