HOME

TheInfoList



OR:

A favicon (; short for favorite icon), 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 A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Examples of notable websites are Google, Facebook, Amazon, and W ...
or web page. A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical
web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used o ...
s will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks. Browsers that support a
tabbed document interface In interface design, a tab is a graphical user interface object that allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an 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 Microsoft Corporation is an American multinational technology corporation producing computer software, consumer electronics, personal computers, and related services headquartered at the Microsoft Redmond campus located in Redmond, Washi ...
released
Internet Explorer 5 Microsoft Internet Explorer 5 (IE5) is a graphical web browser, the fifth version of Internet Explorer, the successor to Internet Explorer 4 and one of the main participants of the first browser war. Its distribution methods and Windows integ ...
, which supported favicons for the first time. Originally, the favicon was a file called favicon.ico placed in the
root directory In a computer file system, and primarily used in the Unix and Unix-like operating systems, the root directory is the first or top-most directory in a hierarchy. It can be likened to the trunk of a tree, as the starting point where all branche ...
of a website. It was used in
Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical web browsers developed by Microsoft which was used in the Windows line of operating systems (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 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 (W3C) in the
HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaS ...
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 section of the document to specify the file format, file name, and location. Unlike in the prior scheme, the file can be in any Website
directory Directory may refer to: * Directory (computing), or folder, a file system structure in which to store computer files * Directory (OpenVMS command) * Directory service, a software application for organizing information about a computer network' ...
and have any image file format. In 2003, the
.ico The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately. In Windows, all executables that dis ...
format was registered by a third party with the
Internet Assigned Numbers Authority The Internet Assigned Numbers Authority (IANA) is a standards organization that oversees global IP address allocation, autonomous system number allocation, root zone management in the Domain Name System (DNS), media types, and other Inte ...
(IANA) under the MIME type image/vnd.microsoft.icon. However, 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 A workaround is a bypass of a recognized problem or limitation in a system or policy. A workaround is typically a temporary fix that implies that a genuine solution to the problem is needed. But workarounds are frequently as creative as true solut ...
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 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.


Examples of favicons

File:Apple logo black.svg, alt=,
Apple An apple is an edible fruit produced by an apple tree (''Malus domestica''). Apple trees are cultivated worldwide and are the most widely grown species in the genus '' Malus''. The tree originated in Central Asia, where its wild ancest ...
File:Canva icon 2021.svg, alt=, Canva File:Cool Math Favicon.png, alt=, Cool Math Games File:Discogs icon.svg, alt=,
Discogs Discogs (short for discographies) is a database of information about audio recordings, including commercial releases, promotional releases, and bootleg or off-label releases. While the site was originally created with a goal of becoming the ...
File:Etsy icon.svg, alt=, Etsy File:GoDaddy Logo - The GO.svg, alt=,
GoDaddy GoDaddy Inc. is an American publicly traded Internet domain registrar and web hosting company headquartered in Tempe, Arizona, and incorporated in Delaware. , GoDaddy has more than 21 million customers and over 6,600 employees worldwide. The ...
File:OpenSea icon.svg, alt=, OpenSea File:PayPal Logo Icon 2014.svg, alt=, PayPal File:Roblox player icon black.svg, alt=, Roblox File:Spotify icon.svg, alt=,
Spotify Spotify (; ) is a proprietary Swedish audio streaming and media services provider founded on 23 April 2006 by Daniel Ek and Martin Lorentzon. It is one of the largest music streaming service providers, with over 456 million monthly active use ...
File:Twitter-logo.svg, alt=,
Twitter Twitter is an online social media and social networking service owned and operated by American company Twitter, Inc., on which users post and interact with 280-character-long messages known as "tweets". Registered users can post, like, and ...
File:YouTube full-color icon (2017).svg, alt=,
YouTube YouTube is a global online video sharing and social media platform headquartered in San Bruno, California. It was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google, and is the second mo ...


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.


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
pixel In digital imaging, a pixel (abbreviated px), pel, or picture element is the smallest addressable element in a raster image, or the smallest point in an all points addressable display device. In most digital display devices, pixels are the ...
s in size, and 8-bit, 24-bit, or 32-bit in
color depth Color depth or colour depth (see spelling differences), also known as bit depth, is either the number of bits used to indicate the color of a single pixel, or the number of bits used for each color component of a single pixel. When referring ...
. The ICO file format article explains the details for icons with more than 256 colors on various
Microsoft Windows Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ...
platforms.


Use of favicon

This table illustrates the different areas of the browser where favicons can be displayed.
Opera Software Opera is a Norwegian multinational technology company and subsidiary of Kunlun that specializes in web browser development, fintech, as well as services such as Opera News and YoYo Games. The company's total user base, including users of it ...
added the ability to change the favicon in the Speed Dial in
Opera 10 The history of the Opera (web browser), Opera web browser began in 1994 when it was started as a research project at Telenor, the largest Norwegian telecommunications company. In 1995, the project branched out into a separate company named Opera ...
.


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 section of the document to specify the file's format, name and location. 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, Chrome 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 at random. Only SeaMonkey does not fetch favicon.ico files in the website's root by default.


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 The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately. In Windows, all executables that dis ...
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 Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, ...
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
Apple An apple is an edible fruit produced by an apple tree (''Malus domestica''). Apple trees are cultivated worldwide and are the most widely grown species in the genus '' Malus''. The tree originated in Central Asia, where its wild ancest ...
iPhones and
iPad The iPad is a brand of iOS and iPadOS-based tablet computers that are developed by Apple Inc., Apple Inc. The iPad was conceived before the related iPhone but the iPhone was developed and released first. Speculation about the development, ...
s, as well as Android 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 An apple is an edible fruit produced by an apple tree (''Malus domestica''). Apple trees are cultivated worldwide and are the most widely grown species in the genus '' Malus''. The tree originated in Central Asia, where its wild ancest ...
devices with the iOS
operating system An operating system (OS) is system software that manages computer hardware, software resources, and provides common daemon (computing), services for computer programs. Time-sharing operating systems scheduler (computing), schedule tasks for ef ...
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 a website needs to supplying a in the section of documents served by the website. If the custom icon is not provided, a
thumbnail Thumbnails are reduced-size versions of pictures or videos, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words. In the age of digital images, visual search engines and imag ...
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 152x152 for iPads (until iPad 2, released in 2011), 167x167 for iPads with Retina screens ( iPad 3 and later) and 180x180 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 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, website should provide favicons sized in multiples of 48x48 pixels. For modern high resolution devices, Google recommends providing icons in 192x192 pixels. ;Example code Android also supports Web Manifest files, which makes it possible to integrate web sites deeper within the system. A Web Manifest is a JSON file, that specifies meta data for a progressive web app. It allows the developer to not only provide the icons but also a short name for display on the home screen as well as theme colors. However, providing a web manifest file is not necessary for the ''Add to home screen'' feature to work.


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

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 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 TLS may refer to: Computing * Transport Layer Security, a cryptographic protocol for secure computer network communication * Thread level speculation, an optimisation on multiprocessor CPUs * Thread-local storage, a mechanism for allocating vari ...
. 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, 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.


References


External links


W3C web standards organization on how to add a Favicon

Systems and Methods Involving Favicons
2008 patent application {{web browsers Computer icons Web design Website logos