Knowledges
Let's learn more about favicons!
Taking content references from wikipedia and from several existing sources, 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,[1] associated with a particular website or web page.[1][2]
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.[3][4] The standard implementation uses a link element with a rel attribute in the <head> 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 and have any image file format.[5][6]
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.[7][8] 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.[8] A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.[9]
RFC 5988 established an IANA link relation registry,[10] 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[11] specified that for historical reasons shortcut is allowed immediately before icon;[12] however, shortcut does not have a meaning in this context.
|
|
|
|
|
|
|
|
|
Apple |
Google |
Microsoft |
GitHub |
Iconfinder |
Presiden RI |
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.
The following table illustrates the image file format support for the favicon.
| Browser | Image File Format | ||||||
| ICO | PNG | GIF | Animated GIFs | JPEG | APNG | SVG | |
| Edge | YES | YES | YES | NO | YES | Unknown | YES |
| Firefox | v1.0 | v1.0 | v1.0 | YES | YES | v3.0 | v41.0 |
| Google Chrome | YES | YES | v4.0 | NO | v4.0 | NO | v8.0 |
| Internet Explorer | v5.0 | v11.0 | v11.0 | NO | NO | NO | NO |
| Opera | v7.0 | v7.0 | v7.0 | v7.0 | v7.0 | v9.5 | v44.0 |
| Safari | YES | v4.0 | v4.0 | NO | v4.0 | NO | Non-standard (v12.0) |
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.[1][3] The ICO file format article explains the details for icons with more than 256 colors on various Microsoft Windows platforms.
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 | No | Yes | Yes | Yes | Yes | Yes |
| Firefox | v1.0–v12.0: Yes | Yes | Yes | Yes | Yes | Yes |
| > v13: No | ||||||
| Google Chrome | No | No | Yes | Yes | v1.0 | No |
| Internet Explorer | v7.0 | No | v5.0 | v5.0 | v7.0 | v5.0 |
| Opera | v7.0–v12.17: Yes | No | v7.0 | v7.0 | v7.0 | v7.0 |
| > v14: No | ||||||
| Safari | Yes | Yes | No | Yes | v1.0–v8.0: Yes | No |
| v9.0–v11.0: No | ||||||
| >v 12.0: Optional |
Opera Software added the ability to change the favicon in the Speed Dial in Opera 10.[14]
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.
| Edge | Firefox | Google Chrome | Internet Explorer | Opera | Safari | |
<link rel="shortcut icon" href="https://example.com/myicon.ico">
|
Yes | Yes | Yes | Yes | Yes | Yes |
<link rel="icon" type="image/vnd.microsoft.icon" href="https://example.com/image.ico">
|
Yes | Yes | Yes | Yes (from IE 9) | Yes | Yes |
<link rel="icon" type="image/x-icon" href="https://example.com/image.ico">
|
Yes | Yes | Yes | Yes (from IE 9) | Yes | Yes |
<link rel="icon" href="https://example.com/image.ico">
|
Yes | Yes | Yes | Yes (from IE 11) | Yes | Yes |
<link rel="icon" type="image/gif" href="https://example.com/image.gif">
|
Yes | Yes | Yes | Yes (from IE 11) | Yes | Yes |
<link rel="icon" type="image/png" href="https://example.com/image.png">
|
Yes | Yes | Yes | Yes (from IE 11) | Yes | Yes |
<link rel="icon" type="image/svg+xml" href="https://example.com/image.svg">
|
Yes | Yes | Yes | Yes | Yes | No |
<link rel="mask-icon" href="https://example.com/image.svg" color="red">
|
No | No | No | No | No | Yes |
favicon.ico located in the website's root
|
Yes | Optional | Yes | Yes | Optional | Yes |
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.[15]
For the main favicon itself, it's best for cross-browser compatibility not to use any HTML. Just name the file favicon.ico and place it in the root of your domain.[16][17]
Optional But Encouraged, you probably also want the following:
-
Touch icon for iOS 2.0+ and Android 2.1+:
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-180.png"> -
IE 10 Metro tile icon (Metro equivalent of apple-touch-icon):
<meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="/path/to/favicon-144.png"> -
IE 11 Tile for Windows 8.1 Start Screen
<meta name="application-name" content="Name"> <meta name="msapplication-tooltip" content="Tooltip"> <meta name="msapplication-config" content="/path/to/ieconfig.xml">ieconfig.xml
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/path/to/smalltile.png"/> <square150x150logo src="/path/to/mediumtile.png"/> <wide310x150logo src="/path/to/widetile.png"/> <square310x310logo src="/path/to/largetile.png"/> <TileColor>#FFFFFF</TileColor> </tile> </msapplication> </browserconfig>
[Optional] If you're obsessive, you want all this too:
-
Largest to smallest apple-touch-icons[18]
-
Favicons targeted to any additional png sizes that you add that aren't covered above:
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32"> -
Favicon Chrome for Android
<link rel="shortcut icon" sizes="196x196" href="/path/to/favicon-196.png">
Create at least this:
| Sizes | Name | Purpose |
| 16x16 & 32x32 | favicon.ico | Default required by IE. Chrome and Safari may pick ico over png, sadly. |
More about favicon.ico below. Yes, it's 1 file with multiple sizes.
If you also sort of care about iOS and Android but are lazy:
| Size | Name | Purpose |
| 180x180 | favicon-180.png | General use iOS/Android icon, auto-downscaled by devices. |
But keep in mind that icons with complex detail often don't downscale well. Often you have to tweak subtle design details for smaller sizes.
If you're obsessive, create these too:
| Size | Name | Purpose |
| 32x32 | favicon-32.png | Certain old but not too old Chrome versions mishandle ico |
| 57x57 | favicon-57.png | Standard iOS home screen (iPod Touch, iPhone first generation to 3G) |
| 76x76 | favicon-76.png | iPad home screen icon |
| 96x96 | favicon-96.png | GoogleTV icon |
| 120x120 | favicon-120.png | iPhone retina touch icon (Change for iOS 7: up from 114x114) |
| 128x128 | favicon-128.png | Chrome Web Store icon |
| 128x128 | smalltile.png | Small Windows 8 Star Screen Icon |
| 144x144 | favicon-144.png | IE10 Metro tile for pinned site |
| 152x152 | favicon-152.png | iPad retina touch icon (Change for iOS 7: up from 144x144) |
| 180x180 | favicon-180.png | iPhone 6 plus |
| 195x195 | favicon-195.png | Opera Speed Dial icon (Not working in Opera 15 and later) |
| 196x196 | favicon-196.png | Chrome for Android home screen icon |
| 228x228 | favicon-228.png | Opera Coast icon |
| 270x270 | mediumtile.png | Medium Windows 8 Start Screen Icon |
| 558x270 | widetile.png | Wide Windows 8 Start Screen Icon |
| 558x558 | largetile.png | Large Windows 8 Start Screen Icon |
An .ico file is a container for multiple .bmp or .png icons of different sizes. In favicon.ico, create at least these:
| Size | Purpose |
| 16x16 | IE9 address bar, Pinned site Jump List/Toolbar/Overlay |
| 32x32 | New tab page in IE, taskbar button in Win 7+, Safari Read Later sidebar |
| 48x48 | Windows site icons |
If you're obsessive and don't mind 1-3kb extra size, also include these sizes in your .ico:
| Size | Purpose |
| 24x24 | IE9 Pinned site browser UI |
| 64x64 | Windows site icons, Safari Reading List sidebar in HiDPI/Retina |
Pinned tabs in Safari 9+ use an SVG vector mask for the favicon instead of any other PNG/ICO/etc. favicons that may be present. Vector artwork in the SVG file should be black only (no shades of black or other colors) with a transparent background. Also, a fill color needs to be defined in the tag - a hex value or color shorthand will work. Here's the markup for adding the icon:
<link rel='mask-icon' href='icon.svg' color='#ff0000'>
| [1] |
Title: "Creating a Multi-Resolution Favicon Including Transparency with the GIMP"↗ Author: Lane, Dave (9 August 2008) Retrieved: 28 November 2022 |
| [2] |
Title: "What's With Google's New Mini Icon?"↗ Author: British Broadcasting Corporation (20 January 2009) Retrieved: 28 November 2022 |
| [3] |
Title: "Favicon — How To Create A Favicon.ico"↗ Author: Apple, Jennifer Retrieved: 28 November 2022 |
| [4] |
Title: "HTML 4.01 Specification"↗ Author: World Wide Web Consortium (24 December 1999) Retrieved: 28 November 2022 |
| [5] |
Title: "XHTML™ 1.0: The Extensible HyperText Markup Language"↗ Author: World Wide Web Consortium (26 January 2000) Retrieved: 28 November 2022 |
| [6] |
Title: "Web site meta data profile: favicon, ..."↗ Author: Dubost, Karl (October 2005) Retrieved: 28 November 2022 |
| [7] |
Title: "How to Add a Favicon to your Site"↗ Author: Dubost, Karl (October 2005) Retrieved: 28 November 2022 |
| [8] |
Title: "Published specification"↗ Author: Butcher, Simon (3 September 2003) Retrieved: 28 November 2022 |
| [9] |
Title: "IE9 RC Minor Changes List"↗ Author: Microsoft (11 February 2011) Retrieved: 28 November 2022 |
| [10] |
Title: "commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate"↗ Author: Irish, Paul (15 December 2010) Retrieved: 28 November 2022 |
| [11] |
Title: "Link Relations"↗ Author: IANA (26 August 2005) Retrieved: 28 November 2022 |
| [12] |
Title: "HTML is the new HTML5"↗ Author: Ian Hickson (19 January 2011) Retrieved: 28 November 2022 |
| [13] |
Title: "Grandfather rel='shortcut icon' since it's so common."↗ Author: HTML5 Tracker (10 August 2011) Retrieved: 28 November 2022 |
| [14] |
Title: "Opera 10.0 beta 2 for Windows changelog"↗ Author: Opera Software (16 July 2009) Retrieved: 28 November 2022 |
| [15] |
Title: "Understand the Favicon"↗ Author: Jonathan T. Neal (16 January 2013) Retrieved: 28 November 2022 |
| [16] |
Title: "rel='shortcut icon' considered harmful"↗Author: Mathias (14 April 2010) Retrieved: 28 November 2022 |
| [17] |
Title: "HTML Standard"↗ Author: whatwg.org Retrieved: 28 November 2022 |
| [18] |
Title: "Everything you always wanted to know about touch icons"↗ Author: Mathias (2 March 2011) Retrieved: 28 November 2022 |
