Favicons
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 extremely short list:
Size | File name | Purpose |
---|---|---|
any | favicon.ico | 32 x 32 ico file |
any | favicon.svg | Support for SVG favicons have some caveats, see CanIuse.com for more details. |
apple-touch-icon | apple-touch-icon-180.png | iPhone or iPad Since iOS 8+, iPads have required an image with a 180x180 resolution. Other devices will downscale it, but if we provide the source with a high-enough quality, the downscaling won't hurt the end-user. Small note: an Apple touch icon will look better if you place 20px padding around the icon and add some background color. You can use any image editor to do this. |
manifest | manifest.webmanifest | A web app manifest is a JSON file containing all the details for a browser to install your website as a system application. This format came about from Google via its PWA initiative. The manifest should have an icon field that links to two icons: 192x192, for display on the home screen, and 512x512 which will be used as a splash screen as PWA is loading. |
<link rel="icon" href="{path-to-image}/favicon.ico" sizes="any"> <!-- 32 x 32 -->
<link rel="icon" type="image/svg+xml" href="{path-to-image}/favicon.svg">
<link rel="apple-touch-icon" href="{path-to-image}/apple-touch-icon-180.png"> <!-- 180 x 180 -->
<link rel="manifest" href="{path-to-image}/manifest.webmanifest">
<!-- manifest.webmanifest JSON file -->
{
"icons": [
{"src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{"src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Web app manifest files are supported in Chrome, Edge, Firefox, UC Browser, Opera, and the Samsung browser. Safari has partial support.
Live tiles/Pinned sites
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">
<!-- 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>