Tutorial: Create a favicon.ico for your website

(Sunday, February 18, 2007)

For some time now, I’ve wondered how and why some websites are able to place an icon beside their URL (shown in Figure 1). So I’ve finally googled it and found out a few facts about them. Firstly, the name of the icon is “favicon.ico“. It is only 16 X 16 pixels large. That’s not a lot of space to work with. However, it is possible to create the initial design on a larger canvas, and later resize them to 16 X 16 pixels. It is advisable that the design canvas be a multiply of 16 (eg. 32, 48, 64, 80, 96, ….).

Example of favicon.ico
Figure 1: favicon.ico icons beside URL

There’s a few ways of creating a favicon.ico. Some sources suggests downloading a photoshop plugin. The icon can then be exported to the .ico format. Another way would be to download an executable program to convert the icon to the .ico format manually.

However, I will be using a web tool to convert my original icon image to the .ico format for this tutorial. The web tool can be accessed from www.chami.com. The steps to create the favicon.ico is as below:

Step 1: Browse for the original file. Click “Generate Favicon.ico”. A preview of the icon will be displayed (both animated & non-animated versions).

Step 2: (optional) Click on “Test in Browser” to view the icon in action on the same page.

Step 3: Download the favicon files to your local hard drive.

Step 4: Open the zip file. It contains the favicon.ico file, a readme file (with instructions to install the favicon.ico file) and some extra bits.

Step 5: Upload the “favicon.ico” file to your server into the root folder (usually “public_html”).

Step 6: (quoted from the readme file included in the zip file):

You can add a favicon to your web page by uploading favicon.ico to your website and inserting the following HTML tag inside the … section of your web page.

<link rel=”shortcut icon” href=”favicon.ico”>

Optional: if you would like to display the animated favicon, upload animated_favicon1.gif as well and insert the following HTML tags.

<link rel=”shortcut icon” href=”favicon.ico”>
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif”>

That’s it! You’re done. Below are the before and after photos.

Before Picture before

After Picture after

Hope this tutorial helped.

6 thoughts on “Tutorial: Create a favicon.ico for your website

  1. TenthOfMarch says:

    It may be a little troublesome but you gain an ‘identity’ for your website. Furthermore, it makes your website look PRO. Big websites like Google, MSN, Blogger, Friendster has it. Why not you? 🙂

    (Up to this point, even my website don’t have a favicon yet. That’s because I’m still thinking of the logo to use. Any ideas?)

Leave a Reply

Your email address will not be published. Required fields are marked *