4

I've created a PWA that installs correctly, with a launcher icon. I want a different image for the splash screen, so I've included 192px and 512px png's, both 128dpi and listed them both in manifest.json - however, my splash screen still displays the launcher icons (which I have provided in 36, 48, 72, 96, 128, 144 px versions)

How do I ensure the correct image gets used for splash screen vs launcher icon?

manifest.json:

{
  "short_name": "app",
  "name": "app",
  "icons": [
    {
      "src": "assets/pwa/android-launchericon-36-36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-48-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-72-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-96-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-128-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-144-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-192-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/splash-512-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "orientation": "portrait"
}
Art
  • 2,836
  • 4
  • 17
  • 34
BruceM
  • 1,549
  • 1
  • 18
  • 41

1 Answers1

7

According to this documentation, as you have already known, Chrome will choose the icon that closely matches the 128dp icon for that device.

Please take note that dp (Density-independent Pixels) is different from dpi (Dots Per Inch). Simply put, 128dpi is not necessarily equal to 128dp, which is most likely the problem in your case.

This SO answer explains the difference between the two well.

For example, on a 160dpi screen, 1dp == 1px == 1/160in, but on a 240dpi screen, 1dp == 1.5px. So no, 1dp != 1px. There is exactly one case when 1dp == 1px, and that's on a 160dpi screen. Physical measurement units like inches should never be part of your design—that is, unless you're making a ruler.

A simple formula for determining how many pixels 1dp works out to is px = dp * (dpi / 160).

Based on this simple formula, your 192px, 128dpi image has 240dp, while your 512px, 128dpi image has 640dp. Assuming your other images all have 128dpi as well, then Chrome is most likely picking your 96px image due to it having the closest dp to 128dp.

In conclusion, for your 192px or 512px images to have 128dp, they need to have 160dpi.

Jacque
  • 757
  • 4
  • 9
  • Wow, amazing answer - thanks so much! I'll check it works tomorrow and will vote once confirmed. – BruceM Dec 17 '18 at 19:38
  • So a further question for @Jacque - if my PWA will be deployed to all sorts of phones with all sorts of dpi screen densities, how do I control what images get used for splash screens, and what images get used for launcher icons? – BruceM Dec 18 '18 at 04:08
  • As far as I know, Chrome only looks at your images' `dp` and not the device's. – Jacque Dec 18 '18 at 05:32
  • 2
    My calcs say my 192px must have dpi of 240 to get 128dp, and my 512px must have dpi of 640? – BruceM Dec 18 '18 at 05:54
  • Lol no matter what I do, it always selects my 96px image for the splash screen - I changed its dpi to 240 which should put its dp way out of range (64) but still the PWA chooses that for the splash screen. – BruceM Dec 18 '18 at 06:49
  • Interestingly, when I add to HomeScreen on my windows laptop, it uses the other image (192px, or 512px) as the launcher icon - this seems to suggest that different screen densities use different images, making it almost impossible to separate launcher icons and splash icons... – BruceM Dec 18 '18 at 06:58
  • Having defined 512px, 256px, and 192px images in manifest.json and having a device display density factor of 2x i.e. 720px = 360dp (xhdpi) Chrome elected to use the 192px image (interesting because documentation states nearest to 128dp will be selected which is 256px on the device which is *NOT* the one Chrome uses) Either way, the image on the splash screen is still *tiny* – Jimbo Oct 30 '19 at 09:02