Favicons

Favicon is short for "favorites icon," and it's the small icon that appears beside the URL in the address bar or in the bookmarks. Favicons not only add a unique touch to your website, they also distinguish your site from others in a bookmark folder. They're very easy to make and add to the site, as you'll see in this tutorial.

Making the Favicon:

The size of your favicon has to be 16x16 pixels. That's a fairly small square, so you're obviously limited in terms of design. Therefore, the design should be very simple and something that is distinguishable. It can be a letter, a logo (as long as it's a simple logo), an icon, etc. But of course, it has to identify your website so that when someone sees the icon in their list of bookmarks, they automatically know which site it belongs to.

As an example, I made a very simple (as it should be) icon of a speech bubble:

Favicon Tutorial: Icon

I drew it in Photoshop as a 32x32 pixel image, and then sized it down to the appropriate size (16x16 pixels). Then I hit Ctrl+Alt+Shift+S to open the "Save for web" window, and saved it as a GIF image.

However, there's an issue: To use a favicon on your website, it has to be in the ICO format (.ico). Unfortunately, Photoshop does not support that format, so you need to use another program to convert it from GIF to ICO. And that program is Irfan View.

Irfan View is a very simple (and free) image viewing program that I use solely for converting icons into the ICO format for use on websites. You can download it from my own server (download Ifran View 3.99) or from Tucows.com.

Once you have a 16x16-pixel GIF image of your icon, simply open it in Irfan View and then hit S to save it in ICO format.

Adding the Favicon to Your Website:

Adding the favicon to your website is a piece of cake (or code, rather). Simply add this HTML code in the head tag:

<link rel="shortcut icon" href="http://www.website.com/favicon.ico" type="image/ico" />

Just change the URL to the location of your favicon, and you're done! Here's what it looks like (with the EEight icon):

Favicon Tutorial: Finished Sample

Written by Gregory Kogan on Apr 19, 2007