PWA splash screen isn't working correctly, even when all requirements are met

Question

I've got PWA functionality set up for my custom framework, and everything works great, except for the splash screen. The following requirements are all met:

The name property is set to the name of my PWA.
The background_color property is set to a valid CSS color value.
The icons array specifies an icon that is at least 512px by 512px.
The icon exists and is a PNG.

Unless I remove all other icons, the 512x512 icon will not be used for the splash screen.

The icon appears on Chrome Dev Tools Application section, so clearly it's seeing it.

Below is my manifest.json, and a link to my testing site.

{
  "short_name": "New Site",
  "name": "New Site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#17AAEC",
  "theme_color": "#17AAEC",
  "icons": [
    {
      "src": "assets/media/icon-pwa-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/media/icon-pwa-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/media/icon-pwa-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "assets/media/icon-pwa-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "assets/media/icon-pwa-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

https://framework.jacob.rocks/

Update 2018-10-29

It turns out that the splash screen image is used when there is no service worker registered, but if a service worker is registered, then a smaller icon gets used. This appears to be a bug with Webkit as far as I can tell. See the GIFs below.

@abielita I'm not sure what logs you're referring to, can you clarify? — JacobTheDev
@abraham Google's own documentation. developers.google.com/web/tools/lighthouse/audits/… — JacobTheDev
@JacobTheDev That simply says you should have a 512 size. It never says anything about which size gets used when. — abraham

BruceM BruceM · Accepted Answer · 2018-12-18T04:16:20

I had the same issue - it seems you not only need to get the px values right, but also the dp issues, which depend on the screen density and the dpi settings of the created image - see Jacque's excellent answer here: Can't get splash screen icon on Android Chrome PWA

PWA splash screen isn't working correctly, even when all requirements are met

Update 2018-10-29

2 Answers