An Easy Addition For Any Site Favicon Ico

One of the comparatively recent additions to well-known Internet-related file names (alongside index.html, robots.txt, default.asp, etc) is the infamous favicon.ico. Many web developers will remember the day that strange favicon.ico 404�s started appearing in their logs.

Creating a favicon.ico for your site will eliminate that particular 404 from your logs, and add a simple (but often effective) touch. There�s not too much information to provide on this topic; it really is a simple process. Read on to learn more.

What is it?

Favicon.ico is the default icon file for which Microsoft�s Internet Explorer 5 will search when anyone bookmarks (IE-speak: add a �Favorite�) or creates a shortcut to your web site. The icon will appear on your desktop (if you drag the shortcut there), or next to the URL in the location bar of the browser.

Why should I implement it?

Internet Explorer 5 is by a vast margin the Web�s most popular browser. Including a favicon.ico for your sites is a far from difficult process that allows you to add something extra that your competitors may not have bothered with. Think of it as the slightest of advantages � adding to your corporate branding (business cards, letterheads, uniforms, etc).

How do I create the icon?

Most icons, including the favicon.ico, are square. This one comes in two sizes � 16 by 16 pixels to be placed in a detail/list view, or beside your URL, and 32 by 32 pixels to be used as a desktop icon. Your multiple image icon can also include versions for 16 and 256 colour depths. If you have the time, go for the four image icon � two sizes, and two colour depths.

You have also got two primary options when it comes to favicon.ico creation: create it from scratch in a Java-based icon editor like that used by www.favicon.com, or design one in your preferred pixel-pushing application, upload, and have it imported by either the icon editor mentioned above, or another icon building application. You can investigate the first option yourself, while I discuss the second.

You will need to start with a square image, or crop a rectangular one. Decide what you would like your icon to depict (often a logo) and resize or crop your image. Keep in mind that the resulting icon is going to be quite small, so you may need to simplify your image so that it is recognisable at smaller sizes. Bold, contrasting colours will also help here. I suggest that you aim towards finishing with a 32 by 32 pixel icon using 256 colours.

When you�ve finished, save the file as a standard image format. Go with GIF. Upload your image somewhere (temporarily), and open it using the www.favicon.com Icon Editor. Make any touch-ups (especially to the 16 colour versions), and then select Save/Download from the File menu. You�ll be asked to quickly create an account with the providers of this service. Do that, and be sure to use a valid email account, otherwise you will never receive your icon.

Where do I put the file?

Now that you have your icon, place it into the root of the directory you expect people to bookmark, or use a link tag. The link tag is very straightforward, and allows you to store your icon in another directory (you might want to put it in an images directory):

<LINK rel="shortcut icon" href="http://evolt.org/evolt/favicon.ico">

Show me an example

Bookmark the evolt.org site in Internet Explorer 5 and you�ll notice our icon appear next to the URL, and in your Favorites list. If you drag the icon or page icon in the location bar to your desktop, you�ll notice the 32 by 32 pixel version too (it might take a couple of seconds to grab it though). Nice effect, and as you�ve seen, very easy to implement.

Related links:

Microsoft's How to Create a Shortcut Icon to a Web page

If you have any other useful resources for favicon.ico creators, add a comment below.

isaac