Progressive Web App

Header

Meta

<!-- apple application -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title"   content="Academia">
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
<!-- ms application -->
<meta name="theme-color"             content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./static/icons/pwa/ms/ms_icon_144x144.png">
<meta name="msapplication-config"    content="./static/config/browserconfig.xml"><!--
<meta name="msapplication-wide310x150logo"   content="./static/icons/pwa/ms/ms_icon_310x150">
<meta name="msapplication-square310x310logo" content="./static/icons/pwa/ms/ms_icon_310x310">
<meta name="msapplication-square70x70logo"   content="./static/icons/pwa/ms/ms_icon_70x70.png">
<meta name="msapplication-square150x150logo" content="./static/icons/pwa/ms/ms_icon_150x150.png">
<meta name="msapplication-config" content="none">
-->

Link

<!-- web application -->
<link rel="icon" type="image/png" sizes="16x16"   href="./static/icons/pwa/favicon/[email protected]">
<link rel="icon" type="image/png" sizes="32x32"   href="./static/icons/pwa/favicon/[email protected]">
<link rel="icon" type="image/png" sizes="96x96"   href="./static/icons/pwa/favicon/[email protected]">
<link rel="icon" type="image/png" sizes="192x192" href="./static/icons/pwa/favicon/[email protected]">
<!-- apple application -->
<link rel="apple-touch-icon"      sizes="57x57"   href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="60x60"   href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="72x72"   href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="76x76"   href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="114x114" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="120x120" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="144x144" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="152x152" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="167x167" href="./static/icons/pwa/apple/[email protected]">
<link rel="apple-touch-icon"      sizes="180x180" href="./static/icons/pwa/apple/[email protected]">
<!-- android application -->
<link rel="manifest" href="./static/config/manifest.json">

Browser Config

browserconfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <TileColor>#ffffff</TileColor>
            <TileImage         src="./static/icons/pwa/ms/ms_icon_150x150.png"/>

            <square70x70logo   src="./static/icons/pwa/ms/ms_icon_70x70.png"/>
            <square150x150logo src="./static/icons/pwa/ms/ms_icon_150x150.png"/>
            <square310x310logo src="./static/icons/pwa/ms/ms_icon_310x310.png"/>
            <wide310x150logo   src="./static/icons/pwa/ms/ms_icon_310x150.png"/>
        </tile>
    </msapplication>
</browserconfig>

Manifest

manifest.json

{
    "name" : "Academia",
    "icons": [{
        "density": "0.75",
        "sizes"  : "36x36",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/[email protected]"
    },{
        "density": "1.0",
        "sizes"  : "48x48",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/[email protected]"
    },{
        "density": "1.5",
        "sizes"  : "72x72",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/[email protected]"
    },{
        "density": "2.0",
        "sizes"  : "96x96",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/[email protected]"
    },{
        "density": "3.0",
        "sizes"  : "144x144",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/[email protected]"
    },{
        "density": "4.0",
        "sizes"  : "192x192",
        "type"   : "image\/png",
        "src"    : ".\/static\/icons\/pwa\/android\/[email protected]"
    }]
}

References

Creating Progressive Web Apps using Ext JS 6 Building Progressive Web Apps with Cmd 6.5.0 Progressive Web Apps with React.js: Part I Create a Progressive Web App with React

Favicon & Appicon Generator IE11/Windows Tile Support Apple Web Application Apple App Icon