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>