Location of favicon
The original means of defining a favicon was by placing a file called favicon.ico in the root directory of a web server. This would then automatically be used in the browser’s favourites (bookmarks) display. Later, however, a more flexible system was created, using HTML to indicate the location of an icon for any given page. This is achieved by adding two link elements in the section of the document as detailed below.<link rel="shortcut icon" href="http://x.com/favicon.ico"
type="image/x-icon">
<link rel="icon" href="http://x.com/favicon.ico"
type="image/x-icon">
Note:<head>
and </head>
./>
instead of >
.
Recently, some browsers such as Firefox and Opera also support other image format, such as GIF and PNG, which allows animated/transparent images (GIF) and partially transparent images (PNG). For GIF/PNG files, use the following type: type=”image/gif”
type=”image/png”
Most photo sharing website such as Photobucket and Flickr currently does not support ICO files though, so unlike the regular images (JPG, GIF, or PNG files), favicon ICO files should be stored elsewhere. On contrary, most web hosting services, such as Geocities, allows you to store ICO files. So, look for web hosting services for a place to store the favicon ICO files.
Resolution and Color Depth
As most recent browsers support ICO files, but some of them do not support GIF/PNG files, it is recommended to use ICO files whenever possible.
Create favicon
Usually favicon.ico file contains 2 icons, 16x16 and 32x32 resolution. Some graphics editor applications support ICO files, such as GIMP. Some others may require additional plugins in order to support ICO files, for example, Photoshop requires a plugin from Telegraphics. The same website also provides tool to combine multiple ICO files, e.g. combine ICO file with 16x16 and 32x32 resolution.
First begin with 32x32 resolution, as it is more difficult to work with the smaller 16x16 resolution. With your preferred graphics editor, start your project with a canvas set at 32x32. It is possible to start with a bigger canvas, such as 64x64, and scale it down once finished. However scaling down an image usually will reduce its quality.
Once familiar with the 32x32, you may proceed with the 16x16.
Inspiration
Some nice collection of favicon can be found at Smashing Magazine.
Tuesday, 14 August 2007
Subscribe to:
Post Comments (Atom)
1 Comment:
Thanks for these tips. Really helpful!
Post a Comment