PWA not displaying custom icon according to manifest.json (Node.js on Heroku)

Question

I have a PWA built with CRA, it's hosted on Heroku. The PWA is downloadable on my iOS device and everything works fine, EXCEPT the icon.

I'm not sure if the file reference is correct, because it changes during Heroku Build. I've tried both my localhost file reference and the post-build reference, but neither gives me the option to use the icon.

I'm brand new to PWAs, so maybe I'm making a dumb mistake

Here is the manifest.json (the file references here are post-build, based on the 'Sources' tab in Chrome dev tools):

{
  "short_name": "Sonar",
  "name": "Sonar",
  "icons": [
    {
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "128x128"
    },{          
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "144x144"
    },{
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "192x192"
    },{
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],

  "start_url": "/",
  "display": "standalone",
  "theme_color": "#512DA8",
  "background_color": "#512DA8"
}

Any thoughts appreciated.

Answer 1

I found my own answer, and I'll post here in case anyone else comes across this problem.

What I was doing in the manifest.json file was sufficient for Android PWA icons, but at the time of this post, iOS requires a different process.

The fix was in the root folder, in index.html, add:

<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/profilePicture/sonar_backup.png">

That link tells the iOS to specifically read this href, and assign it as the app icon.

A lot more good information available here:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html