[PWA] All Favicons for All Devices and Sizes

index-pwa.html

<!-- manifest -->
<link rel="manifest" href="manifest.json">

<!-- favicon -->
<link rel="shortcut icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico">

<!-- iOS -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<!-- Safari -->
<link rel="mask-icon" href="safari-pinned-tab.svg" color="red">


<!-- Windows 8 Tiles -->
<meta name="application-name" content="App name">
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#2A2A2A">

<!-- iOS Settings -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- Favicon Generators: http://realfavicongenerator.net & http://www.imagemagick.org/ -->
<!-- App Icon (iOS): https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/ -->
<!-- Configuring Web Applications (Safari): https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
<!-- Pinned Tab Icons (Safari): https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html-->

manifest.json

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