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.