PWA icons are not used in iOS 11.3

Question

Now I'm testing PWA on iOS 11.3 and I use the manifest.json file below:

{
  "name": "Maplat PWA Sample",
  "short_name": "Maplat PWA",
  "background_color": "#fc980c",
  "icons": [{
    "src": "/Maplat/pwa/icon-96.png",
    "sizes": "96x96",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-144.png",
    "sizes": "144x144",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-256.png",
    "sizes": "256x256",
    "type": "image/png"
  }],
  "start_url": "/Maplat/debug.html?overlay=true",
  "display": "standalone"
}

This works well except icon setting. In my iOS 11.3 on iPhoneX, icon files are not shown on home screen but screen capture is used as launcher button.

I compared my manifest with other sites, like https://www.ft.com/ or https://r.nikkei.com/, but I couldn't find any differences in icon settings. Icons of these sites work well with PWA on iOS 11.3.

What is wrong in my manifest.json?

P.S. My manifest.json works well with Android Chrome.

Answer 1

While iOS 11.3 does support web app manifests, it does not yet support specifying icons this way. You'll want to include it in your manifest for other devices, but at least for now you'll have to use the following for iOS:

<link rel="apple-touch-icon" sizes="180x180" href="icon.png">

Specify the icon size, and include a URL.

Learn more at Apple's documentation here

There is also a website to automate the process linked here

Answer 2

TerPro's answer is correct but as a fallback you can put a file named "/apple-touch-icon.png" in the root directory.