So here is a quick outline of how I did it! I thought it was fairly straight forward. Apologies for the extra large pictures but I thought the print was a little hard to look at.
1. I used http://www.favicon.cc/ . Choose Import Image. Its a good idea to know which image you want.
3. Fingers crossed, your page now looks a little like this. This is your pixelated image. Now if you want to play around here you can change colours etc but I just stuck with what I had. Boring I know hehe.
4. Don't get tricked on the next step. Underneath your pixel picture you will need to scroll right down. There is where you find a preview of your Favicon and the button to download. It will give you a file extension of .ico
5. now the fun part - putting it on your blog! You will need to go to your layout to edit. Find the little gadget that says Favicon and click Edit
6. Choose your favicon file. You should see it pop up after it has uploaded to the page.
7. If it doesn't appear on the blog sidebar or on other people's blog sidebars, then you will need to clear your cache/ browsing history. I am using Google Chrome so I go to the spanner tool, click Tools and the choose Clear Browsing Data. In Internet Explorer, you would be looking for the same thing. Now refresh and have another look. You should have success!!!
I hope you have found this helpful and look forward to seeing your new favicon pop up in my sidebar :)