Using Favicons

Most web sites (or web pages) have an associated icon. Called a 'Favicon' (short for 'favorites icon'), browsers display this icon in the address bar, along with your tab (if you are using a browser with a multi-tab interface) and in your favorites (or bookmarks) list.

Invented by Microsoft, Internet Explorer would make automatic requests for this 16x16 graphic called favicon.ico in your web site's root directory. Developers quickly demanded a way to specify the location of the favorite icon. This became possible with additions to the 'rel' attribute of the 'link' tag. See below:

<link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/vnd.microsoft.icon">

There were problems with this though. The first was that ico was a Microsoft proprietary format. Most modern browsers (including IE7) now support GIF and PNG formats for the icon, and some even support animated GIF's and PNG's.

Secondly, the 'rel' attribute of the link tag was created to specify the relationship between two linked documents. According to W3C specifications, this attribute could have multiple values that were space separated; so specifying 'shortcut icon' meant browsers wouldn't necessarily understand this as one distinct relationship. Mozilla based browsers such as Firefox specify this attribute simply as 'icon' but 'shortcut icon' should work fine as well-browsers that adhere to the W3C specification of the link tag interpret the attribute as having the values of 'shortcut' and 'icon'. 'shortcut' isn't recognized as a valid relationship, but 'icon' is.

It should be noted that although almost all modern browsers support favorites icons, to date this hasn't been incorporated into any W3C specification.