Favicon
A favicon , also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and 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, and site-specific browsers use the favicon as a desktop icon. Favicons can also be used to have a textless favorite site, saving space.
History
In March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time. Originally, the favicon was a file calledfavicon.ico placed in the root directory of a website. It was used in Internet Explorer's favorites 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
The favicon was standardized by the World Wide Web Consortium in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000. The standard implementation uses a link element with arel attribute in the In 2003, the
.ico format was registered by a third party with the Internet Assigned Numbers Authority under the MIME type image/vnd.microsoft.icon. However, when using the .ico format to display as images, 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 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.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.File format support
The following table illustrates the image file format support for the favicon.| Browser | ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
| Edge | |||||||
| Firefox | |||||||
| Google Chrome | |||||||
| Internet Explorer | |||||||
| Opera | |||||||
| Safari |
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.
Use of favicon
This table illustrates the different areas of the browser where favicons can be displayed.| Browser | Address bar | Address bar drop down list | Links bar | Bookmarks | Tabs | Drag to desktop |
| Edge | ||||||
| Firefox | ||||||
| Google Chrome | ||||||
| Internet Explorer | ||||||
| Opera | ||||||
| Safari |
Opera Software added the ability to change the favicon in the Speed Dial in Opera 10.
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 arel attribute in the | Edge | Firefox | Google Chrome | Internet Explorer | Opera | Safari | |
href="https://example.com/image.ico"> | ||||||
favicon.ico located in the website's root | ||||||
| precedence: prefer root or HTML linked version | linked | linked | linked | linked |
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 SeaMonkey does not fetch
favicon.ico files in the website’s root by default.Device support
For Apple devices with the iOS operating system version 1.1.3 or later, as well as some Android devices, it is possible to provide a custom icon that users can display on their home screens by using the Add to Home Screen button within the share sheet in Safari. This feature is enabled by supplying aThe recommended basic size for this icon is 152×152 pixels.
For the iPad, the basic size is 180x180 pixels. Android tablets prefer a 192x192 PNG icon.
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.; With rounded corners, added by iOS
No HTML is required by browsers or mobile devices to retrieve these icons, either. The website's root is the default location for the file
apple-touch-icon.png.HTML5 recommendation for icons in multiple sizes
The current HTML5 specification recommends specifying multiple sizes for the icons, using the attributesrel="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 above. 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.Animated favicons
Various browsers such as Chrome, Firefox and Opera support animation of favicons. A bug report has been open for Firefox since 2001 requesting a way to disable the feature.Limitations and criticism
Due to the need to always check 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 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 webpages. 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 SSLStrip utilize this trick. In order to eliminate this, some web browsers 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, or instead redirected to the login page.