Favicon
Encyclopedia
A favicon icon also known as a shortcut icon, Web site icon, URL
icon, or bookmark icon, is a file containing one small icons
, most commonly 16×16 pixel
s, associated with a particular Web site
or Web page
. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browser
s 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 browser
s use the favicon as desktop icon.
released Internet Explorer 5
which supported favicons for the first time. Originally, the favicon was a file
called
(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 technique has become obsolete since all modern browsers support the favicon without bookmarking.
(W3C) in the HTML
4.01 recommendation, released in December 1999, and later in the XHTML
1.0 recommendation, released in January 2000. The standards use a link element with a
in the
In 2003 the
(IANA) under the MIME type
for Internet Explorer is to associate
RFC 5988 established an IANA link relation registry,
and
of an image to
it to an ICO file will result in an error and not displaying the favicon. Netscape 7, Internet Explorer 5, and version 6
browsers will only display the favicon when the page is bookmarked and not simply when the page is visited as in modern browsers.
Additionally, such icon files can be either 16×16, 32×32, or 48×48 pixel
s in size, and either 8-bit, 24-bit, or 32-bit in color depth
. The .ico article explains the details for icons with more than 256 colors on various Microsoft Windows
platforms.
Opera Software
added the ability to change the favicon in the Speed Dial in Opera 10
.
Some of common browsers stopped using the favicon in the address bar, because this place will be used to show the type of the pages.
Only SeaMonkey
doesn’t fetch
version 1.1.3 or later such as the iPod Touch
, iPhone
, and iPad
, as well as some Android devices, one can 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
of the web page will be put on the home screen instead.
The recommended basic size for this icon is 57×57 pixels, with 90 degree corners; for best display on the high-resolution screens of Apple's newer products, an icon size of 114×114 pixels is recommended. The icon file referenced by
With Apple Formatting
Without Apple's reflective shine
As in case of
The
(not found) exists. Finally, critics allege that by drive-by download
through a custom 404 page, may be used to download trojan horses
.
Some old browsers such as the Internet Explorer for Mac
did not support the favicon or had problems in updating the favicon if a new one was uploaded. Another disadvantage was that some web hosts
did not allow the use of ico files.
The W3C recommendation only works in HTML or XHTML and not in other systems such as gopher. Additionally, the link element has to be added to every page and cannot be added to a full web site. 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
.
The SSLStrip exploit, a man-in-the-middle attack
against HTTPS
webpages, typically changes the favicon to a familiar padlock image in an attempt to convince the user that a secure page is being visited, since the browser will not be displaying its real padlock symbol (nor the text "https://") in the usual place.
Uniform Resource Locator
In computing, a uniform resource locator or universal resource locator is a specific character string that constitutes a reference to an Internet resource....
icon, or bookmark icon, is a file containing one small icons
Icon (computing)
A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
, most commonly 16×16 pixel
Pixel
In digital imaging, a pixel, or pel, is a single point in a raster image, or the smallest addressable screen element in a display device; it is the smallest unit of picture that can be represented or controlled....
s, associated with a particular Web site
Website
A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...
or Web page
Web page
A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...
. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s 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 browser
Site-specific browser
A site-specific browser is a software application that is dedicated to accessing pages from a single source on a computer network such as the Internet or a private intranet. SSBs typically simplify the more complex functions of a web browser by excluding the menus, toolbars and browser chrome...
s use the favicon as desktop icon.
History
In March 1999, MicrosoftMicrosoft
Microsoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...
released Internet Explorer 5
Internet Explorer 5
Microsoft Internet Explorer 5 was a graphical web browser released in March 1999 by Microsoft, primarily for Microsoft Windows, but initially with versions available for Apple Macintosh, Sun Solaris, and HP-UX. It was one of the main participants of the first browser war...
which supported favicons for the first time. Originally, the favicon was a file
Computer file
A computer file is a block of arbitrary information, or resource for storing information, which is available to a computer program and is usually based on some kind of durable storage. A file is durable in the sense that it remains available for programs to use after the current program has finished...
called
favicon.ico placed in the root directoryRoot directory
In computer file systems, the root directory is the first or top-most directory in a hierarchy. It can be likened to the root of a tree — the starting point where all branches originate.-Metaphor:...
(e.g., http://en.wikipedia.org/favicon.ico) of a web site. It was used in Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
'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 technique has become obsolete since all modern browsers support the favicon without bookmarking.
Standardization
The favicon was standardized by the World Wide Web ConsortiumWorld Wide Web Consortium
The World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
(W3C) in the HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
4.01 recommendation, released in December 1999, and later in the XHTML
XHTML
XHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....
1.0 recommendation, released in January 2000. The standards use a link element with a
rel attributeRel attribute
A link relation is a descriptive attribute attached to a hyperlink in order to define the type of the link, or the relationship between the source and destination resources. The attribute can be used by automated systems, or can be presented to a user in a different way.In HTML these are designated...
in the
In 2003 the
.ico format was registered with the Internet Assigned Numbers AuthorityInternet Assigned Numbers Authority
The Internet Assigned Numbers Authority is the entity that oversees global IP address allocation, autonomous system number allocation, root zone management in the Domain Name System , media types, and other Internet Protocol-related symbols and numbers...
(IANA) under the MIME type
Internet media type
An Internet media type, originally called a MIME type after MIME and sometimes a Content-type after the name of a header in several protocols whose value is such a type, is a two-part identifier for file formats on the Internet.The identifiers were originally defined in RFC 2046 for use in email...
image/vnd.microsoft.icon. When using the .ico format, Internet Explorer cannot display files served with the standardized MIME type. A workaroundWorkaround
A workaround is a bypass of a recognized problem in a system. A workaround is typically a temporary fix that implies that a genuine solution to the problem is needed...
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 rel="shortcut icon" 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 itself have a meaning.Legacy
Microsoft Internet Explorer only supports the ICO file format; simply changing the filename extensionFilename extension
A filename extension is a suffix to the name of a computer file applied to indicate the encoding of its contents or usage....
of an image to
.ico without convertingData conversion
Data conversion is the conversion of computer data from one format to another. Throughout a computer environment, data is encoded in a variety of ways. For example, computer hardware is built on the basis of certain standards, which requires that data contains, for example, parity bit checks....
it to an ICO file will result in an error and not displaying the favicon. Netscape 7, Internet Explorer 5, and version 6
Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...
browsers will only display the favicon when the page is bookmarked and not simply when the page is visited as in modern browsers.
Browser implementation
The following table illustrate 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.| Browser | ICO | PNG | GIF | animated GIFs | JPEG JPEG File Interchange Format The JPEG File Interchange Format is an image file format standard. It is a format for exchanging JPEG encoded files compliant with the JPEG Interchange Format standard. It solves some of JIFs limitations in regard to simple JPEG encoded file interchange... |
APNG APNG The Animated Portable Network Graphics file format is an unofficial extension to the Portable Network Graphics specification. It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs... |
SVG Scalable Vector Graphics Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic . The SVG specification is an open standard that has been under development by the World Wide Web Consortium since 1999.SVG images and their... |
|---|---|---|---|---|---|---|---|
| Google Chrome Google Chrome Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or... |
|||||||
| Internet Explorer Internet Explorer Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year... |
|||||||
| Firefox | |||||||
| Opera Opera (web browser) Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,... |
|||||||
| Safari Safari (web browser) Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the... |
Additionally, such icon files can be either 16×16, 32×32, or 48×48 pixel
Pixel
In digital imaging, a pixel, or pel, is a single point in a raster image, or the smallest addressable screen element in a display device; it is the smallest unit of picture that can be represented or controlled....
s in size, and either 8-bit, 24-bit, or 32-bit in color depth
Color depth
In computer graphics, color depth or bit depth is the number of bits used to represent the color of a single pixel in a bitmapped image or video frame buffer. This concept is also known as bits per pixel , particularly when specified along with the number of bits used...
. The .ico article explains the details for icons with more than 256 colors on various Microsoft Windows
Microsoft Windows
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...
platforms.
Use of favicon
This table illustrates the different possibilities where favicons can be displayed.| Browser | address bar | links bar | bookmarks | tabs | drag to desktop |
|---|---|---|---|---|---|
| Google Chrome | |||||
| Internet Explorer | |||||
| Firefox | |||||
| Opera | |||||
| Safari |
Opera Software
Opera Software
Opera Software ASA is a Norwegian software company, primarily known for its Opera family of web browsers with over 220 million users worldwide. Opera Software is also involved in promoting Web standards through participation in the W3C. The company has its headquarters in Oslo, Norway and is...
added the ability to change the favicon in the Speed Dial in Opera 10
Opera 10
Opera 10 is a version of the Opera web browser. The initial version, 10.00, was released in September 2009.This release added a variety of new features, a new skin designed by Jon Hicks, increased standards support, and a new application icon to Opera...
.
Some of common browsers stopped using the favicon in the address bar, because this place will be used to show the type of the pages.
Accessibility
This table illustrates the different ways the favicon can be recognized by the web browser.| Google Chrome | Internet Explorer | Firefox | Opera | Safari | |
|---|---|---|---|---|---|
href="http://example.com/image.ico" /> |
|||||
favicon.ico located in the web site's root |
|||||
| precedence: prefer root or (X)HTML linked version | root |
Only SeaMonkey
SeaMonkey
SeaMonkey is a free and open source cross-platform Internet suite. It is the continuation of the former Mozilla Application Suite, based on the same source code...
doesn’t fetch
favicon.ico files in the web site’s root by default.Device support
For Apple devices with the iOS operating systemOperating system
An operating system is a set of programs that manage computer hardware resources and provide common services for application software. The operating system is the most important type of system software in a computer system...
version 1.1.3 or later such as the iPod Touch
IPod Touch
The iPod Touch is a portable media player, personal digital assistant, handheld game console, and Wi-Fi mobile device designed and marketed by Apple Inc. The iPod Touch adds the multi-touch graphical user interface to the iPod line...
, iPhone
IPhone
The iPhone is a line of Internet and multimedia-enabled smartphones marketed by Apple Inc. The first iPhone was unveiled by Steve Jobs, then CEO of Apple, on January 9, 2007, and released on June 29, 2007...
, and iPad
IPad
The iPad is a line of tablet computers designed, developed and marketed by Apple Inc., primarily as a platform for audio-visual media including books, periodicals, movies, music, games, and web content. The iPad was introduced on January 27, 2010 by Apple's then-CEO Steve Jobs. Its size and...
, as well as some Android devices, one can 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
Thumbnail
Thumbnails are reduced-size versions of pictures, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words...
of the web page will be put on the home screen instead.
The recommended basic size for this icon is 57×57 pixels, with 90 degree corners; for best display on the high-resolution screens of Apple's newer products, an icon size of 114×114 pixels is recommended. 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.With Apple Formatting
Without Apple's reflective shine
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.The
rel="icon" example in the unfinished HTML5 specification suggests to use link relation rel="icon" sizes="57x57" type="image/png" instead of similar rel="apple-touch-icon" constructs.Limitations and criticism
On slow internet connections the favicon can add a few seconds for loading the whole page, if the favicon is not optimized and too big. In addition, the favicon will create extra traffic if it is not existent and a custom 404 pageHTTP 404
The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested. A 404 error should not be confused with "server not found" or similar errors, in which a connection to the...
(not found) exists. Finally, critics allege that by drive-by download
Drive-by download
Drive-by download means three things, each concerning the unintended download of computer software from the Internet:# Downloads which a person authorized but without understanding the consequences Drive-by download means three things, each concerning the unintended download of computer software...
through a custom 404 page, may be used to download trojan horses
Trojan horse (computing)
A Trojan horse, or Trojan, is software that appears to perform a desirable function for the user prior to run or install, but steals information or harms the system. The term is derived from the Trojan Horse story in Greek mythology.-Malware:A destructive program that masquerades as a benign...
.
Some old browsers such as the Internet Explorer for Mac
Internet Explorer for Mac
Internet Explorer for Mac was a proprietary web browser developed by Microsoft for the Macintosh platform. Initial versions were developed from the same code base as Internet Explorer for Windows...
did not support the favicon or had problems in updating the favicon if a new one was uploaded. Another disadvantage was that some web hosts
Web hosting service
A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their own website accessible via the World Wide Web. Web hosts are companies that provide space on a server they own or lease for use by their clients as well as providing Internet...
did not allow the use of ico files.
The W3C recommendation only works in HTML or XHTML and not in other systems such as gopher. Additionally, the link element has to be added to every page and cannot be added to a full web site. 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
User agent
In computing, a user agent is a client application implementing a network protocol used in communications within a client–server distributed computing system...
.
The SSLStrip exploit, a man-in-the-middle attack
Man-in-the-middle attack
In cryptography, the man-in-the-middle attack , bucket-brigade attack, or sometimes Janus attack, is a form of active eavesdropping in which the attacker makes independent connections with the victims and relays messages between them, making them believe that they are talking directly to each other...
against HTTPS
Https
Hypertext Transfer Protocol Secure is a combination of the Hypertext Transfer Protocol with SSL/TLS protocol to provide encrypted communication and secure identification of a network web server...
webpages, typically changes the favicon to a familiar padlock image in an attempt to convince the user that a secure page is being visited, since the browser will not be displaying its real padlock symbol (nor the text "https://") in the usual place.