Hofmockel.org

What is Favicon.ico? Personalise Your Site's Bookmark
by Christopher Heng, thesitewizard.com

Some time back, I had an email from a visitor asking me how I
managed to have thefreecountry.com's icon displayed next to my URL in
his browser's location bar. In fact, had he checked carefully, he would
also have noticed that the icon is also used in his "Favorites" menu.

Internet Explorer ("IE") 5.0 and above has a facility where, if
someone bookmarks your website (ie puts it in their "Favorites" menu),
it associates a particular icon with your website in the bookmark. It
tries to obtain that icon by first requesting for "favicon.ico" from
the directory of your web page. If it cannot find such a file, it will
try to obtain it from the root directory of your website, failing
which, it will simply use a default icon for the bookmark.

On the other hand, the favicon.ico file is available, the icon will
also be displayed beside your website name in the "Favorites" menu, the
location bar in IE, and if the user opens up the "Favorites" folder, it
will be the icon used for the link to your site.

Mozilla, and probably also the new versions of Netscape (which are
based on Mozilla), also have the ability to use the favicon.ico file,
except that Mozilla also accepts the file in other graphics formats,
such as the PNG format. It displays the "favicon.ico" in the location
bar of the browser (the part that shows your website's URL). The latest
version of Opera also loads the favicon.ico file into the address bar
if available.
Software Requirements

If you have an Windows icon editor (which you may already have if
you have purchased a programming language development system for
Windows), you're all set.

All is not lost, however, if you do not have the above. Simply pop
over to thefreecountry.com's Free Resource Editors and Icon Editors
page at http://www.thefreecountry.com/programming/resourceeditors.shtml
and get yourself one. That page lists a few free icon editors and
resource editors. Just choose any of the icon editors that strikes your
fancy and download it. Alternatively, you can also download one of the
other packages that contain a resource editor. Resource editors are
tools that programmers use to create and edit Windows "resources" like
icons, cursors (ie, mouse pointers), menus, dialog boxes, etc. For our
purpose here, you will only need to use the icon editor portion of such
resource editors.
How to Create a "Favicon.ico" File

1.

Create an image 16X16 pixels in size. Yes, it is really small and
you can't really draw much in it. You should also restrict yourself to
the standard Windows 16 colours, although I suspect that 256 colours
will work fine.

If you like, you can also create a 32X32 pixel icon, which will be
scaled to size for the Favorites menu and the location bar. You can
even put both 16X16 and 32X32 pixel icons into the same icon file.
Windows will use the former for its menus and the latter when the user
opens up a folder that is set to display large icons. It's probably not
really necessary to do this if you can't be bothered.
2.

Save the image as an ICO file (named "favicon.ico", of course).
3.

Upload it to your website. You don't need to upload one to every
directory of your site if you don't want to waste space - simply put it
in your root directory and IE will apparently locate it eventually. You
can also upload it into your images directory, but you will need to
modify your web pages if you do. See later in this article for more
information on this.

Help! My Web Host Doesn't Allow ICO Files!

If your hosting company does not allow files with the .ICO extension
to be uploaded, you might try to work around it by uploading it (in
binary mode) with some other extension (like GIF). Once it's on your
site, rename it using your FTP program to the correct extension.
Helping the Browser Locate the favicon.ico file

If you have placed your favicon.ico file in a location other than
the current web directory (relative to your web page) or the root
directory, you have to help your visitors' browser locate the favicon
file by specifying it with a tag like the following in the section of
your web page.

You should replace "/favicon.ico" in the above example with the
actual location of your favicon.ico file, for example,
"/images/favicon.ico" if you have placed it in your "/images/"
directory.

This step is optional if you have put your "favicon.ico" file in the
standard locations, ie, in the same directory as the web page or in the
root directory of your website. Otherwise you will need to modify all
your existing web pages to take advantage of the "favicon.ico" facility.
How Many People are Bookmarking My Website?

This "favicon.ico" used to have an interesting side-effect. The
side-effect applied whether or not you bothered to put a special
"favicon.ico" on your site. You used to be able to find out the number
of IE 5 users who bookmarked your site by simply counting the requests
for "favicon.ico" in your web server logs. From that number, you can
estimate the total number of people who bookmark your site by applying
this formula: number of IE 5 bookmarks divided by the fraction of your
visitors using IE 5.

For example, if two-thirds of your visitors use IE 5+, and you get
100 requests for the icon, simply divide 100 by two-thirds to get 150.
This was by no means an accurate measure - it did not take into account
numerous factors: but at least it was able to give you a hint of how
useful people find your site.

However, this side effect is no longer relevant today. Mozilla,
Netscape and Opera load the favicon.ico to display in your visitors'
location bar whether they put your site in their favourites (or
bookmarks) or not. Apparently the Mac OS X browser, Safari, also loads
the favicon.ico file whenever it visits a site (it uses it in the
history menu). I've not checked the latest version of IE so I'm not
sure if it does the same too. I merely mention this "side-effect" so
that you won't deceive yourself when you see the large number of
"favicon.ico" requests in your web logs: it doesn't tell you that those
your visitors bookmarked your site anymore.
Miscellaneous Matters

If you are testing your favicon file in Internet Explorer, and find
that you're seeing an old version of your favicon.ico file, you
probably need to empty your browser's cache (and possible restart the
browser). Internet Explorer caches the favicon.ico file in the
"Temporary Internet Files" folder, so if you don't empty the cache,
you'll probably continue to see your old version and not the new
version that you've created. Incidentally, this also means that if your
visitors empty their cache, their copy of the favicon.ico file that was
associated with the bookmark of your site will also be lost.
Conclusion

The "favicon.ico" facility is by no means essential to your
website's operation. In fact, few people even notice its existence, and
its really too small to put anything useful in it. However, creating
one can save your site some bandwidth if you have created a custom 404
File Not Found error file - that file will be sent by your web server
everytime there is a request for a nonexistent "favicon.ico" file.
Perhaps more importantly, creating such an icon adds to the
professionalism of your site, marking you as a web designer who attends
to detail.

Copyright 2000-2003 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion,
revenue and scripting, from http://www.thesitewizard.com/ or subscribe
to the FREE newsletter by sending an email to
subscribe@thesitewizard.com.

This article can be found at http://www.thesitewizard.com/archive/favicon.shtml