Favicon Walkthrough - Create Favicon (1/3)

Last month, I need a custom icon (favicon). It was for my other blog, I want to make it look fancy. So I stumbled around the web to find out how to create my own favicon and how to put in my blog on Blogger. It was confusing and I don't remember much what happened during that time but I finally came out victorious.

Goal(s): Add Custom Favicon to my blog on Blogger
Time Taken: 27 August 2010 - 30 August 2010 (3 Days)

Step by Step to Adding Favicon to Blogger:
1) Create Custom Favicon for Free (you're here)
2) Upload Favicon on Free Web Host
3) Edit HTML Codes to Display The Favicon

What is Favicon?

Whenever you visit a Blogger blog, you can usually see this logo at the left corner of the title or address bar, right? This is what we call favicon (short for favorite icon).

How to Create a Custom Favicon?

Favicon is a graphic file with .ICO extension. There are many ways to create a favicon. It's just a matter of preference.

Using Normal Image Editor Software to Create Favicon

Firstly, you can use your existing image editor to create an image and save it as .ICO file. Although the usual image manipulation softwares like Adobe Photoshop and Paint.NET do not support saving image in .ICO format by default, there are plugins that can break these limits. Read How to Create ICO With Photoshop or Create Icons and Cursors with Paint.NET for detailed instruction.

MS Paint on the other hand is free and a very simple software and yet it has the capability to create .ICO file. It does not need additional plugin to do this. Read Paint can create ico files for more information.

Using Tools to Convert Existing Image to Favicon

Secondly, if your image editor software does not support saving in .ICO file or you already have an image you want to use as favicon but not in .ICO format, there are many free tools available to convert common image file to .ICO file too. So it doesn't really matter what program do you use.

Just create an image of 16x16 pixels in size and saved it in .BMP, .JPG, .GIF, or .PNG, the usual graphic file format. Then, you can either download icon editor or use online favicon generator like favicon.cc to convert your image to .ICO file.

Using Free Icon Editor or Online Favicon Generator to Create Favicon

However, these icon editors and online favicon generators are not limited to converting common image to favicon only. They are actually full featured tools to create, edit, and convert or save favicon :)

I totally prefer online tool so I didn't even try the icon editor. It's free, fast, and doesn't clutter my computer.

And so that is exactly how I created my favicon.

Oh, by the way, I like playing with favicon.cc so much, I registered an account there. Please rate the extra favicons I've created for fun. You can download and edit these icons for free.

What's Next?

Next, you upload your favicon to the web.