Blogger Tutorial: How to change your favicon

I have finally decided that those little icons had mocked me long enough.
It may have to do with the fact that I use Firefox as my browser, which shows those pesky icons on both the tab and the address bar. In comparison, Safari only shows those icons at the address bar.
Still, since I am more used to Firefox...

The itch might have started with noticing other blogs, especially Blogger-based blogs (with the telltale navigation bar), having their own favicon instead of the Blogger favicon.
There are many tutorials as well as favicon generator out there, but I previously put the idea aside while waiting for an inspiration for a logo of my own.

Until the itch became unbearable.

I should probably also talk about how I made my own 'logo' but we'll cover that in a different  post, if ever. It's a bit long, and I just found out I don't really fancy long posts. So!

1. To start with, you need to have the proper image, a square image. The Wikipedia entry on favicon stated 16x16 pixels. Since the end result is pretty miniscule, no need for high definition, high resolution image. Blogger actually prefers that the image should not exceed 100kb!
2. When you go to the Blogger Dashboard, choose your blog, and go to the layout. You'll see something similar to the image above. Click on the 'Edit' link (shown near the red arrow). You'll get to dialog box asking for the file from your computer.
3. Choose your square image file. Click the 'Save' button.
4. THAT'S IT!

If you image fulfills Blogger's requirement (it's square in dimension and less than 100kb), you'll see the favicon image changed immediately in the Blogger layout.

Your browser might take a bit longer to change. When I finally succeeded, it took about 1 day for the change to take effect on my browser.

The other thing to note is your image format. Most tutorials/references I read recommends .ico format for the image file. 

I used plain .png format.

It worked for me because I only use Safari and Firefox. 

If you use IE .... haha.. tough luck. You need to use .ico.

As mentioned before, there are favicon generators available on the net that will help you to create (and some even host!) your ico file.

However, I did not manage to use those successfully as somehow Blogger rejected the resulting image as not square. 

Don't ask. I have no idea.

Maybe I'll try again someday in the future (and implement an ico file for the sake of those IE users out there). But in the meantime, I shall bask in my own success in managing to change the favicon of my personal/family blog.

Siiiiggghhhh..... *contentedly admiring my own handywork.