CODEWITHSUNDEEP
progressive-web-apps
BruceM
BruceM

Reputation: 1719

Can't get splash screen icon on Android Chrome PWA

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"
}

Upvotes: 4

Views: 2372

Answers (1)

Jacque
Jacque

Reputation: 765

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.

Upvotes: 7

Related Questions