A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. Some programs allow the user to select an icon of their own from the hard drive and associate it with a website.
Introduction and standardization
Microsoft was the first to introduce the favicon in Internet Explorer 4. In the original Microsoft standard, a file called favicon.ico
was placed in the root directory of a web site. This would then automatically be used in Internet Explorer‘s favorites (bookmarks) display.
The Microsoft specification was later expanded to allow the location to be specified for any website directory location for a given page. This was achieved by adding a link element to the <head>
section of the document, which specifies the name of the image file and its location. In this way, any image file defined by the World Wide Web Consortium (W3C) HTML recommendation may be used.
Because only the ICO format is completely cross-browser compatible with all modern browsers, as well as most browsers released after 2004, the .ICO format is the most widely used favicon format.
Legacy
Older Microsoft Internet Explorer versions completely support only Microsoft Icon Files. Some webmasters changed their preferred image’s file extension to .ico without converting the file to Microsoft Icon Files. This creates a file format error because the file type does not match the extension, and such icon images will not be displayed correctly by some older browsers.
W3C Expands on the Microsoft Specification
Microsoft created the original favicon feature for Internet Explorer, which would request a favicon from a specific file (/favicon.ico
) in the root directory of every website (e.g., http://en.wikipedia.org/favicon.ico). Microsoft’s original format standard for the link tag was expanded by the W3C HTML recommendation to also include the following:
- The
rel
attribute may also contain a space, so in addition to usingrel="icon"
, conforming web browsers may also use a two-word link type (e.g.rel="shortcut icon"
). - The use of a reserved location on a website is no longer required and the favicon file can be located anywhere in the web directory tree.
Old versions of browsers such as Internet Explorer 5 and version 6, and Netscape only recognize the favicon when the page is bookmarked, and fail to display when merely visiting the page.
Standardization and implementation
In 2003 the .ico
format was registered by Simon Butcher with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon
, which standardized the .ico
filetype.
Despite the standard the correct mime for icons is image/x-icon the server response header should contain “Content-Type: image/x-icon” not “Content-Type: image/vnd.microsoft.icon” Although it is the standard mime type, but otherwise Internet explorer 8 does not accept it( you will see a blank page when type the url directly in browser).
Browser support
Browser | ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
---|---|---|---|---|---|---|---|
Google Chrome | Yes | 4.0 | 4.0 | No | 4.0 | No | No |
Internet Explorer | 4.0 | 8.0 | No | No | 8.0 | No | No |
Mozilla Firefox | Yes | Yes | Yes | Yes | Yes | 3.0 | No |
Opera | Yes | Yes | Yes | Yes | Yes | Yes | 9.6 |
Safari | Yes | 4.0 | 4.0 | No | 4.0 | No | No |
The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera.
<link rel="shortcut icon" href="http://www.example.com/myicon.ico" />
Additionally the following is also acceptable:
<link rel="shortcut icon" href="/somepath/myicon.ico" />
The following shows the supported format of link tags, using examples, for HTML and XHTML.
HTML:
<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">
<link rel="icon" type="image/png" href="http://example.com/image.png">
<link rel="icon" type="image/gif" href="http://example.com/image.gif">
XHTML:
<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
<link rel="icon" type="image/png" href="/somepath/image.png" />
<link rel="icon" type="image/gif" href="/somepath/image.gif" />
Most web browsers do not require any HTML to retrieve a favicon that conforms to the de facto file name and type (favicon.ico) located in the web site’s root. If no favicon link is detected upon HTML page load completion and no previous site visits are recorded in the browser’s history, a favicon.ico is requested automatically.
Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).
Most web browsers have since added support for the new W3C HTML recommendation, and it is generally used for all new content.
Device Support
For devices such as the Apple iPod Touch, iPhone, and iPad you can provide a custom icon that users can display on their Home screens using the Web Clip feature. The recommended size is 57 x 57 pixels, with 90 degree corners. However with the more recent higher definition screens on Apple’s products, Apple has their icon at 129 x 129 pixels. The “apple-touch-icon” icon is modified to add rounded corners, drop shadow, and reflective shine. Alternatively, an “apple-touch-icon-precomposed” icon may be provided which is not modified by the devices before being displayed. Use one of the following example of code for HTML and XHTML.
With Apple Formatting
<link rel="apple-touch-icon" href="/somepath/image.ico" />
<link rel="apple-touch-icon" href="/somepath/image.png" />
<link rel="apple-touch-icon" href="/somepath/image.gif" />
Without Apple’s rounded rectangle and shine
<link rel="apple-touch-icon-precomposed" href="/somepath/image.png" />