Generate Favicon for Website

Favicon used to be just one favicon.ico file cater for desktop display, but nowadays there are variously configurations for multiple platform

There are various favicon generator, I decide to go ahead with https://realfavicongenerator.net/

The following output is generated.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff">

Content of site.webmanifest.

NOTE: I renamed site.webmanifest to manifest.json. Refer to Web App Manifest File.

{    "name": "MyApp",    "short_name": "MyApp",    "icons": [        {            "src": "/android-chrome-192x192.png",            "sizes": "192x192",            "type": "image/png"        },        {            "src": "/android-chrome-512x512.png",            "sizes": "512x512",            "type": "image/png"        }    ],    "start_url": "/",    "theme_color": "#ffffff",    "background_color": "#ffffff",    "display": "standalone"}

NOTE: Need to fill in name or short_name and include start_url.

Content of browserconfig.xml.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

List of image files.

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon.ico
favicon-16x16.png
favicon-32x32.png
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
safari-pinned-tab.svg