Favicons
General information
A favicon (short for favorite icon), it's a one or more small icons, used as a shortcut icon, website icon, tab icon, URL icon, browser history icon, toolbar apps icon, or bookmark icon.
Favorite Icon Sizes
Below is a compiled list of the current known favorite icon sizes, this list is based on the Favorite Icon cheat sheet. The greyed out are optional/legacy favicons, that can still be used but are no longer supported.
| Size | File name | Purpose |
|---|---|---|
| any | favicon.svg | Support for SVG favicons have some caveats, see CanIuse.com for more details. |
| 32x32 | favicon.ico | Default required by IE. Browsers on chromium will use ICO over PNG, if present. |
| 32x32 | favicon-32.png | Standard for most desktop browsers. |
| 128x128 | chrome-webstore-128.png | Chrome Web Store icon & Windows 8 Star Screen Icon. |
| 180x180 | apple-touch-icon-180.png | iPhone Retina. |
| 192x192 | android-chrome-192.png | Google Developer Web App Manifest Recommendation. |
| 196x196 | android-chrome-196.png | Chrome for Android home screen icon. |
Short list
A good resume/reference of what to include as minimum list of favicons can be found here at: How to Favicon in 2021 - Six files that fit most needs.
In the next section is the minimum code/icons that is needed to be added in your HTML
<!-- short favicon declaration -->
<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" type="image/svg+xml" size="any" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
Web app manifest files are supported in Chrome, Edge, Firefox, UC Browser, Opera, and the Samsung browser. Safari has partial support.
// manifest.json or manifest.webmanifest
{
"name":"Visma App",
"short_name":"VApp",
"icons": [
{
"src": "/android-chrome-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/android-chrome-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"theme_color":"#ffffff",
"background_color":"#f0f2f5",
"display":"browser"
}
Optional and not supported anymore
| Size | File name | Purpose |
|---|---|---|
| 70x70 | mstile-70.png | Win 8.1 Metro tile. |
| 96x96 | favicon-96.png | GoogleTV icon.* |
| 114x114 | apple-touch-icon-114.png | iPhone retina touch up to iOS6. |
| 120x120 | apple-touch-icon-120.png | iPhone retina touch iOS7. |
| 144x144 | mstile-144.png | IE10 Metro tile for pinned site, iPad retina up to iOS6. |
| 150x150 | mstile-150.png | Win 8.1 Metro tile. |
| 152x152 | apple-touch-icon-152.png | iPad touch icon iOS7. |
| 167x167 | apple-touch-icon-167.png | iPad Retina touch icon. |
| 310x150 | mstile-310x150.png | Win 8.1 wide Metro tile. |
| 310x310 | mstile-310.png | Win 8.1 Metro tile. |
Setting up 'live tiles'/'pinned sites' for IE11+, Windows 8 and 8.1, the documentation can be found at: Pinned site enhancements
<meta name="application-name" content="Visma App" />
<meta name="msapplication-TileColor" content="#f0f2f5" />
<!-- with browserconfig.xml file -->
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- or just from the html head -->
<meta name="msapplication-square70x70logo" content="img_path/mstile-70.png" />
<meta name="msapplication-square150x150logo" content="img_path/mstile-150.png" />
<meta name="msapplication-wide310x150logo" content="img_path/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="img_path/mstile-310.png" />
<meta name="msapplication-config" content="none">
The content for browserconfig.xml file
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70.png"/>
<square150x150logo src="/mstile-150.png"/>
<square310x310logo src="/mstile-310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#f0f2f5</TileColor>
</tile>
</msapplication>
</browserconfig>
<!-- full favicon declaration -->
<link rel="icon" type="image/x-icon" size="16x16 32x32" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" size="any" href="/favicon.svg">
<link rel="icon" type="image/png" size="196x196" href="/android-chrome-196.png">
<link rel="icon" type="image/png" size="128x128" href="/chrome-webstore-128.png">
<link rel="icon" type="image/png" size="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" size="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon-180.png">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#e70641">
<meta name="msapplication-TileColor" content="#f0f2f5">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- short favicon declaration -->
<link rel="icon" type="image/x-icon" size="16x16 32x32" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" size="any" href="/favicon.svg">
<link rel="icon" type="image/png" size="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon-180.png">
<link rel="manifest" href="/manifest.json">
<!-- or -->
<link rel="manifest" href="/manifest.webmanifest">
<!-- for windows metro tile / 'live tiles' -->
<meta name="msapplication-TileColor" content="#f0f2f5">
<meta name="msapplication-TileImage" content="/mstile-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">