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>