from Matthew's Apples
by Matthew Frederick Davis Hemming
November 2002 (Updated February 2005)
Many current web browsers make use in one way or another of tiny icons called Short-Cut Icons or favicons. Some browsers display this icon next to a URI in the address bar, while others display the icon next to bookmarks/favorites.
The favicon for this page is a small blue Apple logo on white (I had to make it myself, since Apple doesn't appear to use these icons on their official web pages [Update: as of spring 2003 Apple does indeed serve favicons with their pages, because Safari now displays them]).
Favicons are decorative, geeky and fairly useless. It might be argued that it more useful not to have favicons, since their lack causes a 404 error to be reported in your web access logs whenever somebody using Internet Explorer tries to bookmark one of your pages (though it generates no error for the user), which might be information you want to know.
A favicon by the exact name "favicon.ico" placed at the absolute top level of your web directory tree can be used to give all of your pages a common branding, or alternatively you can place different favicons in each directory for an icon that changes depending on content. (Please note: in the latter method you must specify the favicon location and name in the head section of each individual HTML page, as detailed further below.)
There is plenty of advice out there for making favicons, but most of it comes from the perspective of a Windows user. Here's the quick and dirty inside word for Mac users:
METHOD 1: PHOTOSHOP
* Download the Windows Icon (ICO) Photoshop plug-in from Telegraphics, and install it in Adobe Photoshop.
* You will ultimately end up outputting a file that is 16 by 16 pixels, but I recommend working with a larger canvas (128 x 128) and then downsampling the image. (Photoshop CS users note: use the Bicubic Sharpener when downsampling for a crisp final icon.)
* Once you've designed your icon to your satisfaction and re-sized it to 16 by 16 pixels, choose Save As... from the File menu. Select "Windows Icon (ICO)" as the format, and name the file favicon.ico.
* If you're using one favicon for your whole site, upload it to the root directory of your HTML tree, and some non-crappy web browsers will detect it automatically. To be on the safe side, add the following code to the HEAD section of your HTML pages: "<link REL="SHORTCUT ICON" HREF="/favicon.ico" type="image/x-icon">"
* If you're using a selection of favicons you can put them anywhere you like, and then point to them in the HEAD section of your HTML pages: "<link REL="SHORTCUT ICON" HREF="/location_of_icons/favicon.ico" type="image/x-icon">"
* You're done. Some browsers may not display a new favicon until the cache has been flushed (Safari 1.2) or until a site has been added to Favorites (Internet Explorer 6).
METHOD 2: NON-PHOTOSHOP
* Create a simple icon in the image editing application of your choice. The only requirement is that you be able to save it out as a 16 x 16 pixel bitmap file (.bmp).
* Name the file favicon.bmp and open it in GraphicConverter, the popular and versatile workhorse from Lemke Soft. Under the Picture menu go to Colour and select 4-bit (16 colours). Save out the file as a Windows Icon (.ico).
* Name the file favicon.ico.
* Following any meta tags in the head of your HTML documents include the following line: "<link REL="SHORTCUT ICON" HREF="/favicon.ico" type="image/x-icon">". Relative pathnames work fine (e.g., HREF="../../images/favicon.ico"), or you can use an absolute pathname (e.g., HREF="http://domain.tld/favicon.ico"), if you need to for whatever reason (please note: you probably shouldn't use somebody else's icon without first gaining permission).
* The icons work on a directory-by-directory basis. If you want to have one icon served with pages about your cat and another icon served with pages about your dog, just keep your cat and dog pages in discreet directories, each with their own favicon.ico file.
* Note: You may need to flush your cache before the new favicons will turn up in your browser.
Addendum (4/2/03): While favicons have been traditionally delivered as .ico files (Windows Icon format), I have just learned that you can just as well use .png files (Portable Network Graphics format), which have the advantages of supporting transprency and of being supported as an import/export format in many more graphics editing packages. Also, the current versions of most browsers don't seem to care what the icon file is named, so sockpuppets.ico is just as legal as favicon.ico.
