CODEWITHSUNDEEP
mobile-safariprogressive-web-apps
kochizufan
kochizufan

Reputation: 2431

PWA icons are not used in iOS 11.3

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.

Upvotes: 56

Views: 37692

Answers (3)

Saber Hayati
Saber Hayati

Reputation: 997

2022 Update:

Declaring icons in a web app manifest file is now supported. However purpose value should contain any (e.g. "any maskable") or omitted completely. Otherwise it won't work.

SVG format is still not supported, but PNG or WebP could be used instead.

Upvotes: 15

DrinkOps
DrinkOps

Reputation: 221

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

Upvotes: 14

Terren
Terren

Reputation: 1477

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

Upvotes: 100

Related Questions