Favicon A favicon /ˈfævɪkɒn/ , also known as a
shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or
more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web
page.
A web designer can create such an icon and install it into a Web site 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.
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 (e.g.,
http://en.wikipedia.org/favicon.ico) of a web site.
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 have bookmarked the page could be estimated
by the requests of the favicon.
This side effect no longer works, as all modern browsers support the favicon without bookmarking.
Standardization The favicon was standardized by the World
Wide Web Consortium (W3C) 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 a rel attribute in the less than headgreater
than 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 directory and have any image
file format.
In 2003, the.ico format was registered with the Internet Assigned Numbers Authority (IANA)
under the MIME type image/vnd.microsoft.icon.
Ironically, when using the.ico format to display as images (e.g. 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 less than link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /greater
than 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 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 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.
Use of favicon This table illustrates the different possibilities
where favicons can be displayed.
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.
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 if 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 doesn’t fetch favicon.ico files in the web site’s root by default.
Device support For Apple devices with the iOS operating system
version 1.1.3 or later, such as the iPod Touch, iPhone, and iPad, as well as some 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 less than link rel="apple-touch-icon"...greater
than in the less than headgreater than section of documents served by the web site.
If the custom icon is not provided, a thumbnail of the web page will be put on the home screen
instead.
The recommended basic size for this icon is 60×60 pixels, with 90-degree corners; for
best display on the higher-resolution iPhone 4 screen, an icon size of 120×120 pixels
is recommended.
For the iPad and iPad 2, the basic size is 76×76 pixels with 90-degree corners.
For the third-generation iPad, the high-resolution size would be 152×152 pixels.
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 may be provided to instruct devices not
to apply reflective shine on the image.
As in case of favicon.ico file, browsers and mobile devices do not require any HTML to
retrieve these icons.
Default location for the files are apple-touch-icon-precomposed.png and apple-touch-icon.png (in order of priority)
located in the web site's root.
HTML5 recommendation for icons in multiple sizes
The current HTML5 specification recommends specifying size icons in multiple sizes using
the attributes rel="icon" sizes="space-separated list of icon dimensions" within a less than
linkgreater than 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 form of type="file content-type" within the less than linkgreater than tag.
Apple mobile devices running iOS 5 and above ignore the HTML5 recommendation and 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.
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 garbage
404 entries in the server log if it is nonexistent.
The W3C did not standardize the rel-attribute, so there are other key words 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
SSL.
By changing the favicon to a familiar padlock image an attacker can attempt to trick the
user into thinking he or she is 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.