Favicons can additionally be used to have a textless favourite site, saving space.

History

In March 1999, released , which supported favicons for the first time. Originally, the favicon was a called favicon.ico placed in the (e.g., ) of a web site. It was used in 's favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked. A side effect was that the number of visitors who have bookmarked the page can be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers load the favicon file to display in their web address bar, regardless of whether the site is bookmarked.

Standardization

The favicon was standardised by the (W3C) in the 4.01 recommendation, released in December 1999, and later in the 1.0 recommendation, released in January 2000. The standard implementation uses a with a in the section of the document to specify the file format and file name and location. Unlike in the prior scheme, the file can be in any Web site and have any image file format.

In 2003, the format was registered by a third party with the (IANA) under the image/vnd.microsoft.icon. Ironically, when using the .ico format to display as images (e.g. not as favicon), Internet Explorer can't display files served with this standardised MIME type. A for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.

established an IANA link relation registry, and rel="icon" was registered in 2010 based on the specification. The popular <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> theoretically identifies two relations, "shortcut" and "icon", but "shortcut" isn't registered and is redundant. In 2011 the specified that for historical reasons "shortcut" is allowed immediately before "icon"; however, "shortcut" doesn't have a meaning in this context.

Legacy

Internet Explorer 5‚Äď10 supports only the . and Internet Explorer versions 5 and browsers display the favicon only when the page is bookmarked, and not simply when the page is visited as in later browsers.

Browser implementation

The following table illustrates major web browsers supporting different features. The version numbers indicate the starting version of a supported feature.

File format support

The following table illustrates the support for the favicon.

Browser
YesYesYesUnknownUnknownUnknownUnknown
1.01.01.0YesYes3.041.0
YesYes4.04.04.0NoNo
5.011.011.0NoNoNoNo
7.07.07.07.07.09.5Dropped
Yes4.04.0No4.0NoNo

Additionally, such icon files can be 16√ó16, 32√ó32, 48√ó48, or 64√ó64 in size, and 8-bit, 24-bit, or 32-bit in . The article explains the details for icons with more than 256 colours on various platforms.

Also see for Chromium Animated Favion Support.

Use of favicon

This table illustrates the different areas of the browser where favicons can be displayed.

BrowserAddress barAddress bar drop down listLinks barBookmarksTabsDrag to desktop
EdgeNoYesYesYesYesYes
Firefox1.0‚Äď12.0: Yes
> v13: No
YesYesYesYesYes
Google ChromeNoNoYesYes1.0No
Internet Explorer7.0No5.05.07.05.0
Opera7.0‚Äď12.17: Yes
> v14: No
No7.07.07.07.0
SafariYesNoNoYesYesNo

added the ability to change the favicon in the in .

How to use

This table illustrates the different ways the favicon can be recognised by the web browser.

EdgeFirefoxGoogle ChromeInternet ExplorerOperaSafari
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
YesYesYesYesYesYes
<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico" />
YesYesYesYes (from IE 9)YesYes
<link rel="icon" type="image/x-icon" href="http://example.com/image.ico" />
YesYesYesYes (from IE 9)YesYes
<link rel="icon" href="http://example.com/image.ico" />
YesYesYesYes (from IE 11)YesYes
<link rel="icon" type="image/gif" href="http://example.com/image.gif" />
YesYesYesYes (from IE 11)YesYes
<link rel="icon" type="image/png" href="http://example.com/image.png" />
YesYesYesYes (from IE 11)YesYes
favicon.ico located in the website's rootYesOptionalYesYesOptionalYes
precedence: prefer root or (X)HTML linked versionlinkedlinkedlinkedlinked??

If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32√ó32 favicon. Chrome for Windows will use the favicon that comes first if it is 16√ó16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16√ó16 favicon and use the 32√ó32 version, only to scale it back down to 16√ó16 on non-retina devices. Opera will choose from any of the available icons completely at random.

Only doesn’t fetch favicon.ico files in the web site’s root by default.

Device support

For devices with the version 1.1.3 or later, as well as a few Android devices, it is possible to provide a custom icon that users can display on their Home screens using the Web Clip feature (called Add to Home Screen within Mobile Safari). This feature is enabled by supplying a <link rel="apple-touch-icon" ...> in the <head> section of documents served by the web site. If the custom icon isn't provided, a of the web page will be put on the home screen instead.

The recommended basic size for this icon is 60√ó60 pixels; for best display on the higher-resolution , an icon size of 120√ó120 pixels is recommended.

For the , the basic size is 76√ó76 pixels. For the , the high-resolution size would be 152√ó152 pixels. Android tablets [via Chrome] prefer a 192x192 PNG icon.

The icon file referenced by apple-touch-icon is modified to add rounded corners, drop shadow, and reflective shine. Alternatively, an apple-touch-icon-precomposed icon might be provided to instruct devices not to apply reflective shine on the image.

With rounded corners, added by iOS
<link rel="apple-touch-icon" href="somepath/image.png" />
Without reflective shine
<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />

No HTML is required by browsers or mobile devices to retrieve these icons, either. The web site's root is the default location for the files apple-touch-icon-precomposed.png and apple-touch-icon.png (in order of priority).

HTML5 recommendation for icons in multiple sizes

The current specification recommends specifying multiple sizes for the icons, using the attributes rel="icon" sizes="space-separated list of icon dimensions" within a <link> tag. Multiple icon formats, including container formats like Microsoft and Macintosh files, as well as might be provided by including the icon's in the format type="file content-type" within the <link> tag.

As of , Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary apple-touch-icon method detailed above. The web browser however, will select the closest matching size from those provided in the HTML headers to create 128√ó128 pixel , when the user chooses the Create application shortcuts... from the "Tools" menu.

Animated favicons

Various browsers like Chrome, Firefox and Opera support animation of favicons. A bug has been open for Firefox after 2001 requesting a way to disable the feature.

Limitations and criticism

Due to the need to always cheque for it in a fixed location, the favicon can lead to artificially slow page-load time and unnecessary 404 entries in the server log if it is nonexistent.

The W3C didn't standardise the rel-attribute, so there are additional key words like shortcut icon that are additionally accepted by the .

Favicons are most often manipulated as part of phishing or eavesdropping attacks against webpages. Many web browsers display favicons near areas of the web browser's UI, like the address bar, that are used to convey whether the connexion to a website is using a secure protocol like . By changing the favicon to a familiar padlock image an attacker can attempt to trick the user into thinking he or she's securely connected to the proper website. Automated tools like SSLStrip utilise this trick. In order to eliminate this, a few web browsers display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.