How to change the bloggers favicon

Every blog created on blogger comes with a default orange favicon with a big “B” written on it. Changing this favicon will make your blog more professional and decent. Here is a small trick how you can change the Blogger favicon with your own.

1. Create your favicon : Creating your favicon is easier then you think. You just need to create an image ranging in size from 16 x 16 to 64 x 64. You can use any editor from MSPaint to photshop or use some online favicon creator (e.g. favicon.cc). If you have created the favicon by yourself then you need to change it to .ico format which is one more easy task. There are a number of free online services (just google it) where you can perform this just with few clicks. e.g.

http://www.html-kit.com/favicon/
http://www.chami.com/html-kit/services/favicon/
http://tools.dynamicdrive.com/favicon/
http://www.favicon.co.uk/

2. Upload it : Once your favicon is ready, you will need to upload it. This is somehow an important step. You have to choose an host which is reliable and exist for long. For the time being upload it on mediafire.com or fileden.com.

3. Edit HTML : The final step is to put it in your template. Go to layout and choose “Edit HTML”. This will take you to your template page so you can edit and change the HTML for it. Dont worry, we are not going to do much. Just locate the following code -

It should be located somewhere toward the top.Type the following code in below it:

Once done, click save template and view your blog. Its done


                                 o r  
                       another method

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

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 thisCopy and paste the supplied code.
3. 
   
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:
   
   
   
   
   ]]>
   
   
   
   
   
   
   
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  tag! It will now look something like this:
   
   
   
   
   ]]>
   
   
   
   
   
   

(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.