PWA icons are not used in iOS 11.3

Mobile SafariProgressive Web-Apps

Mobile Safari Problem Overview


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.

Mobile Safari Solutions


Solution 1 - Mobile Safari

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

Solution 2 - Mobile Safari

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionkochizufanView Question on Stackoverflow
Solution 1 - Mobile SafariTerrenView Answer on Stackoverflow
Solution 2 - Mobile SafariDrinkOpsView Answer on Stackoverflow