Making a FavIcon for your Website
A favicon (short for 'favorites icon'), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. A web designer can create such icons in several ways, and many recent web browsers can then make use of them. Browsers that support them may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.
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 Internet Explorer's favorites (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 <head> section of the document as detailed below. In this way, any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the ICO format, other browsers now also support the PNG and animated GIF image formats.
Most modern browsers implement both methods. Because of this, web servers receive many requests for the file "favicon.ico" even if it doesn't exist. This may annoy web server administrators by creating many server log entries, and unnecessarily loading the disk, CPU, and network. Another common problem is that the favicons may disappear if the browser's cache is emptied.
Originally, Internet Explorer only used favicons for bookmarks (for instance MSIE 6.0), which created a minor privacy concern in that a site owner could tell how many people had bookmarked their site by checking the access logs to see how many people downloaded the favicon.ico file. However, since newer versions of Internet Explorer (e.g. 7.0) and most other browsers also display the favicon in the address bar on every visit, this is becoming less of an issue.
In the past, to ensure that the favicon did indeed appear, various measures were taken by web designers and developers. There is no known guarantee that favicons will appear on all computers, even on same browsers with the same versions.
Another limitation of the code below is that it associates a favicon with a specific HTML or XHTML document. To avoid this, the favicon.ico file should be placed in the root directory. Most browsers will automatically detect and use the favicon.ico file.
It has been suggested that both of the following HTML lines should be included:
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
However, only the former is necessary, as 'shortcut icon' will be treated as a list of possibilities by standards-compliant browsers (with "shortcut" being ignored, and "icon" used); while Internet Explorer will treat it as a single name ("shortcut icon"). The result is that all browsers understand the code. It is only necessary to include a second piece of code if one desires to offer an alternative image to modern browsers (e.g. an animated GIF).
The link elements must be inside the head element (between <head> and </head>) in the HTML.
The href can, but need not, point to the location /favicon.ico. It could point to any URL.
The image can usually be in any image format supported by the web browser.
The .ico file format will be read correctly by all browsers that can display favicons.
Configure the web server to send the correct MIME identifier:
ICO files image/vnd.microsoft.icon (Alternatively, image/x-icon can be used instead, for compatibility reasons. However, it is preferable to use the IANA-registered MIME type, as most major browsers now support it.)
GIF files image/gif
PNG files image/png
Use the appropriate resolution and color depth.
ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac OS X) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file.
GIF: use 16×16 in 256 colors.
PNG: use 16×16 in either 256 colors or 24-bit.
Note: favicon.ico, when located in the document root directory, will also be found by some browsers that do not process the link elements, even if it is not linked from anywhere on your site.
Page 10
<<<Go Back Home