Favicon · Lablypedia

History

In March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time. Originally, the favicon was a file called favicon.ico placed in the root directory of a website. It was used in Internet Explorer'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 had bookmarked the page could 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

In 2003, the .ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon. However, when using the .ico format to display as images (that is, not as favicon), Internet Explorer cannot display files served with this standardized MIME type. A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in web servers.

RFC 5988 established an IANA link relation registry, and rel="icon" was registered in 2010 based on the HTML5 specification. The popular <link rel="shortcut icon" type="image/png" href="image/favicon.png"> theoretically identifies two relations, shortcut and icon, but shortcut is not registered and is redundant. In 2011 the HTML living standard specified that for historical reasons shortcut is allowed immediately before icon; however, shortcut does not have a meaning in this context.

Legacy

Internet Explorer 5–10 supports only the ICO file format. Netscape 7 and Internet Explorer versions 5 and 6 display the favicon only when the page is bookmarked, and not simply when the pages are visited as in later browsers.

SVG favicons

Today all modern browsers support SVG favicons that stay sharp at any size because they are vector graphics. It's most sensible to use them because a single <link>-entry can cover all icon sizes while staying sharp and having a small file size. Further SVG favicons can even adjust their colors according to whether the web browser is set to light or dark mode.

4 more chapters are free with a Lably account.

Examples of favicons

Browser implementation

The following tables illustrate support of various features with major web browsers. Unless noted, the version numbers indicate the starting version number of a supported feature. Many browsers such as Google Chrome, Microsoft Edge and Opera are based on Chromium (web browser). They use the same engine.

Image file format support

The following table illustrates the image file format support for the favicon.

Additionally, such icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth. The ICO file format article explains the details for icons with more than 256 colors on various Microsoft Windows platforms.

How to use

This table illustrates the different ways the favicon can be recognized by the web browser. The standard implementation uses a link element with a rel attribute in the <head> section of the document to specify the file's format, name and location.

The following ways to specify a favicon are supported in Firefox, Chromium and Safari:

<span id="mwAYw"></span><span class="p" id="mwAY0"><</span><span class="nt" id="mwAY4">link</span> <span class="na" id="mwAY8">rel</span><span class="o" id="mwAZA">=</span><span class="s" id="mwAZE">"icon"</span> <span class="na" id="mwAZI">type</span><span class="o" id="mwAZM">=</span><span class="s" id="mwAZQ">"image/svg+xml"</span> <span class="na" id="mwAZU">href</span><span class="o" id="mwAZY">=</span><span class="s" id="mwAZc">"/image.svg"</span><span class="p" id="mwAZg">></span> <span class="p" id="mwAZk"><</span><span class="nt" id="mwAZo">link</span> <span class="na" id="mwAZs">rel</span><span class="o" id="mwAZw">=</span><span class="s" id="mwAZ0">"shortcut icon"</span> <span class="na" id="mwAZ4">href</span><span class="o" id="mwAZ8">=</span><span class="s" id="mwAaA">"/myicon.ico"</span><span class="p" id="mwAaE">></span> <span class="p" id="mwAaI"><</span><span class="nt" id="mwAaM">link</span> <span class="na" id="mwAaQ">rel</span><span class="o" id="mwAaU">=</span><span class="s" id="mwAaY">"icon"</span> <span class="na" id="mwAac">type</span><span class="o" id="mwAag">=</span><span class="s" id="mwAak">"image/vnd.microsoft.icon"</span> <span class="na" id="mwAao">href</span><span class="o" id="mwAas">=</span><span class="s" id="mwAaw">"/image.ico"</span><span class="p" id="mwAa0">></span> <span class="p" id="mwAa4"><</span><span class="nt" id="mwAa8">link</span> <span class="na" id="mwAbA">rel</span><span class="o" id="mwAbE">=</span><span class="s" id="mwAbI">"icon"</span> <span class="na" id="mwAbM">type</span><span class="o" id="mwAbQ">=</span><span class="s" id="mwAbU">"image/x-icon"</span> <span class="na" id="mwAbY">href</span><span class="o" id="mwAbc">=</span><span class="s" id="mwAbg">"/image.ico"</span><span class="p" id="mwAbk">></span> <span class="p" id="mwAbo"><</span><span class="nt" id="mwAbs">link</span> <span class="na" id="mwAbw">rel</span><span class="o" id="mwAb0">=</span><span class="s" id="mwAb4">"icon"</span> <span class="na" id="mwAb8">href</span><span class="o" id="mwAcA">=</span><span class="s" id="mwAcE">"/image.ico"</span><span class="p" id="mwAcI">></span> <span class="p" id="mwAcM"><</span><span class="nt" id="mwAcQ">link</span> <span class="na" id="mwAcU">rel</span><span class="o" id="mwAcY">=</span><span class="s" id="mwAcc">"icon"</span> <span class="na" id="mwAcg">type</span><span class="o" id="mwAck">=</span><span class="s" id="mwAco">"image/gif"</span> <span class="na" id="mwAcs">href</span><span class="o" id="mwAcw">=</span><span class="s" id="mwAc0">"/image.gif"</span><span class="p" id="mwAc4">></span> <span class="p" id="mwAc8"><</span><span class="nt" id="mwAdA">link</span> <span class="na" id="mwAdE">rel</span><span class="o" id="mwAdI">=</span><span class="s" id="mwAdM">"icon"</span> <span class="na" id="mwAdQ">type</span><span class="o" id="mwAdU">=</span><span class="s" id="mwAdY">"image/png"</span> <span class="na" id="mwAdc">href</span><span class="o" id="mwAdg">=</span><span class="s" id="mwAdk">"/image.png"</span><span class="p" id="mwAdo">></span>

Internet Explorer does not support SVG favicons. Only Safari supports mask-icon:

<span id="mwAeI"></span><span class="p" id="mwAeM"><</span><span class="nt" id="mwAeQ">link</span> <span class="na" id="mwAeU">rel</span><span class="o" id="mwAeY">=</span><span class="s" id="mwAec">"mask-icon"</span> <span class="na" id="mwAeg">href</span><span class="o" id="mwAek">=</span><span class="s" id="mwAeo">"/image.svg"</span> <span class="na" id="mwAes">color</span><span class="o" id="mwAew">=</span><span class="s" id="mwAe0">"red"</span><span class="p" id="mwAe4">></span>

The Internet Explorer way (favicon.ico located in the website's root /) is still supported by all browsers for now. However if a linked favicon is specified, moder browsers will choose the linked favicon instead of the favicon in the root of the website.

Firefox only accepts favicon.ico in the website's root without a <link> tag if the setting browser.chrome.site_icons is set to true in about:config. The default value is true. If set to false, these favicons are ignored.

Animated favicons

Various browsers such as Firefox and Opera support animation of favicons. A bug report has been open for Firefox since 2001 requesting a way to disable this feature.

Limitations and criticism

The mechanism of loading /favicon.ico inherited from Internet Explorer is particularly bad. It is implemented universally but not part of any web standard. Due to the need to always check for favicon.ico in a fixed location, the favicon used to lead to artificially slow page-load times and unnecessary 404 entries in the server log if it is nonexistent.

The W3C did not standardize the rel attribute, so there are other keywords such as shortcut icon that are also accepted by the user agent.

Favicons are often manipulated as part of phishing or eavesdropping attacks against HTTPS web pages. Many web browsers display favicons near areas of the web browser's UI, such as the address bar, that are used to convey whether the connection to a website is using a secure protocol like TLS. By changing the favicon to a familiar padlock image an attacker can attempt to trick the user into thinking they are securely connected to the proper website. Automated man-in-the-middle attack tools such as SSL stripping utilize this trick. In order to eliminate this, some web browsers, such as Firefox or Google Chrome, display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.

Since favicons are usually located at the root of the site directory on the server, they can be employed with some reliability to disclose whether a web client is logged into a given service. This works by making use of the redirect-after-login feature of many websites, by querying for the favicon in a redirect-after-login URL and testing the server response to discern whether the user is given the requested resource (which means they are logged in), or instead redirected to the login page (which means that they are not logged into the service).

In 2021, a method for browser tracking using favicons was demonstrated by researchers at the University of Illinois. It does not work against Firefox.

Multiple resolutions

Nowadays, most modern browsers support having a single SVG favicon, which has the advantage of being scalable without losing its quality.

<span id="mwAj0"></span><span class="p" id="mwAj4"><</span><span class="nt" id="mwAj8">link</span> <span class="na" id="mwAkA">rel</span><span class="o" id="mwAkE">=</span><span class="s" id="mwAkI">"icon"</span> <span class="na" id="mwAkM">type</span><span class="o" id="mwAkQ">=</span><span class="s" id="mwAkU">"image/svg+xml"</span> <span class="na" id="mwAkY">href</span><span class="o" id="mwAkc">=</span><span class="s" id="mwAkg">"/favicon.svg"</span><span class="p" id="mwAkk">></span>

For the icon to appear on the Android home screen when a shortcut is created there, a minimal .webmanifest file may be needed for reasons unknown, which is likely to be a bug.

HTML5 recommendation for icons in multiple sizes

The current HTML5 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 such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the format type="file content-type" within the <link> tag.

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

Home screen icons on mobile devices

On mobile devices, users can pin web pages as shortcuts icons to their home screen. These shortcut icons look similar to regular apps and web developers can provide dedicated icons for them.

Apple devices

For Apple devices with the iOS operating system version 1.1.3 or later, users can pin a website to the home screen using the Add to Home Screen button within the share sheet in Safari.

This works for any website. But for iOS to display the shortcut with an icon, the website needs to supply a <link rel="apple-touch-icon" ...> in the <head> section of documents served by the website. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead.

The app icon sizes on the different device classes differ. The recommended sizes for the icons are 152×152 for iPads (until iPad 2, released in 2011), 167×167 for iPads with Retina screens (iPad 3 and later) and 180×180 for iPhones. If no icon in the matching size is provided, iOS will pick the largest icon with rel="apple-touch-icon" and scale it automatically.

Example code:

<span id="mwApQ"></span><span class="cm" id="mwApU"><!-- For iPad --></span> <span class="p" id="mwApY"><</span><span class="nt" id="mwApc">link</span> <span class="na" id="mwApg">rel</span><span class="o" id="mwApk">=</span><span class="s" id="mwApo">"apple-touch-icon"</span> <span class="na" id="mwAps">type</span><span class="o" id="mwApw">=</span><span class="s" id="mwAp0">"image/png"</span> <span class="na" id="mwAp4">sizes</span><span class="o" id="mwAp8">=</span><span class="s" id="mwAqA">"167x167"</span> <span class="na" id="mwAqE">href</span><span class="o" id="mwAqI">=</span><span class="s" id="mwAqM">"favicon-167x167.png"</span><span class="p" id="mwAqQ">></span>

<span id="mwAqc"></span><span class="cm" id="mwAqg"><!-- For iPhone --></span> <span class="p" id="mwAqk"><</span><span class="nt" id="mwAqo">link</span> <span class="na" id="mwAqs">rel</span><span class="o" id="mwAqw">=</span><span class="s" id="mwAq0">"apple-touch-icon"</span> <span class="na" id="mwAq4">type</span><span class="o" id="mwAq8">=</span><span class="s" id="mwArA">"image/png"</span> <span class="na" id="mwArE">sizes</span><span class="o" id="mwArI">=</span><span class="s" id="mwArM">"180x180"</span> <span class="na" id="mwArQ">href</span><span class="o" id="mwArU">=</span><span class="s" id="mwArY">"favicon-180x180.png"</span><span class="p" id="mwArc">></span>

The icon file referenced by apple-touch-icon is modified to add rounded corners. On the iOS versions prior to iOS 7, a drop shadow, and reflective shine would be added, and apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.

No HTML is required by browsers or mobile devices to retrieve these icons. The website's root is the default location for the file apple-touch-icon.png (in order of priority).

Android devices

On Android devices, users can use the Add to home screen function in Chrome's tools menu to pin a web page to their home screen.

This also works for any website, but if no favicon is provided, a generic icon is used. As Android app icons are sized in 48x48 points, websites should provide favicons sized in multiples of 48x48 pixels. For modern high resolution devices, Google recommends providing icons in 192x192 pixels.