Creating Your Own Favicon
by Tim Altom
If you're trying to entice people return to your site
from the Explorer's Favorites menu, it helps to prompt
them with a special logo of some kind. If you're in
Explorer 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
only in Explorer 5 and above. If your visitors are
running Netscape or an older version of Explorer, the
browser 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 16x16. 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.
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.