by Tim Altom
If you’re trying to entice people return to your site from Internet Explorer’s Favorites menu, it helps to prompt them with a special logo of some kind. If you’re in IE right now and pull down that menu, you’ll probably find some of those logos lined up next to the selections in the Channels item. For very little effort, you can have the same thing next to your own site’s name.
This little icon is called a “favicon”, and it works in most browsers. If your visitors are running an older browser, it will just ignore your little icon.
When an Explorer 5 user bookmarks your page, Explorer searches for a special icon with the name “favicon.ico”. If it finds one, it replaces the default Microsoft icon with your special little icon next to your name in the favorites menu and in the location bar. The user can also put your icon on the desktop and the taskbar, though few are likely to bother.
The icon you create has to be exactly 16 pixels by 16 pixels. There are some alternative larger sizes, but only use these if you’ve investigated favicon use very thoroughly. The safest route is definitely 16×16. Try to fool the browser with a larger or smaller size and it will usually ignore you. You should also stick with 16 Windows colors. Again, more colors can be used in sophisticated icons, but 16 is your safest bet.
There are two routes to creating your icon. You can take an existing graphic, maybe a BMP or a GIF, and convert it using graphics software. A decent converter is available for free at Irfanview. Unfortunately, some icon converters don’t do a good job of transforming bitmaps into .ico files.
The alternative is to use a dedicated icon editor. There’s one included in Mocrosoft Visual Studio, and an online Java editor you can try at www.favicon.com. In the long run, you’ll probably find it faster to use an icon editor to create your graphic from scratch, rather than converting an existing graphic and ironing out the inevitable bugs.
When you save the .ico, name it “favicon.ico”. That’s the default icon that Explorer looks for. If you want other pages to have different icons, you can do that too. Name each icon differently, but make sure they all have .ico extensions.
To have Explorer pick up the default favicon.ico, copy it into the root directory – the main directory that holds your HTML pages. If all you want is favicon.ico to be associated with your site, you’re done. Every time a visitor bookmark your site with Explorer, favicon.ico is copied to the visitor’s cache, where it waits to be displayed. You don’t even need to alter your HTML.
However, there are some other tricks you might want to play. If you want a different icon associated with special pages, use the LINK tag on those pages like this:
<LINK REL=”SHORTCUT ICON” HREF=”mypage.ico”>
When visitors bookmark this page, instead of favicon.ico they’ll get mypage.ico. You can direct the browser to any absolute location you want using:
<LINK REL=”SHORTCUT ICON” HREF=”http://www.mysite.com/graphics/icons/mypage.ico”>
Of course, there are weirdnesses to take into account. If you test the favicon on your own site, you may get only one shot at it. Once a site is bookmarked, it’s hard to flush out that listing completely. Even if you delete the pages from your cache, delete the listings from the Favorites menu, and reboot, re-bookmarking a previously bookmarked site may not cause the new icon to “take”. If this happens, enlist the help of somebody who hasn’t previously bookmarked your page.
One other potential snag is that some Web hosts don’t support .ico files. If you use one of these, contact the company and politely ask them to start supporting .ico files.
If you follow these guidelines you should find it all relatively straightforward. The only time-consuming parts are getting used to an icon editor and then creating your icon or fixing the problems with your converted graphic. For relatively little effort, you too can give your site that customized cutting-edge look in IE5.
This article originally appeared on the WebDevelopersJournal.com website.
