Adaptive icons on Android 9 with Web App Manifest

Question

I'm setting up an Web App Manifest for my PWA. But the icons for Android get squeezed in a round icon.

I tried normal icon, without background and one considering the safe-zone.

Sadly I don't find any documentation for it and the icon really bugs me.

Edited:

"name": "PWA-Test",
"short_name": "PWA-Test",
"display": "standalone",
"scope": "/",
"start_url": "/", 
"icons": [
    {
        "src": "/assets/android-chrome-36x36.png",
        "sizes": "36x36",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-48x48.png",
        "sizes": "48x48",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
],
"theme_color": "#5c3552",
"background_color": "#5c3552"

Edit 2: It seems to work when i just use a round icon. But the UI ist different on every version of Android I guess.

Solved it by making a round icon. The problem now is, the icon on Desktop is now round as well.

How did you define the icons in your web app manifest? Could you copy that in your question? Some further details about "Add to Home Screen" logic: https://dev.to/paco_ita/install-a-pwa-on-the-user-s-device-step-2-27pa — Francesco, Aug 27 '19 at 07:16
Did you try to combine safe zone (ie. only the inner circle of your icon is solid, rest is transparent) and solid background (ie. your white drawing appears on violet background)? The 2nd icon in your Android screenshot makes me think you dropped your violet background while testing safe zone. — philippe_b, Aug 27 '19 at 08:11
@philippe_b Tried both. 2 times with safe zone (solid bg and transparent) and 2 times without safezone (solid bg and transparent). — Torsten Dittmann, Aug 27 '19 at 08:38
I notice your "Edit 2" in your question but couldn't remember if it was already here when I first read it. It means you found a solution for Android, but now you would like to have distinct icons for Android and desktop, correct? If so, I'm afraid there are no solutions at the moment unfortunately. — philippe_b, Aug 28 '19 at 09:13

score 1 · Answer 1 · answered Jun 12 '20 at 19:15

First, you need to create a icon with 2 layers.

You can use this utility: https://maskable.app/editor

After, you need to set purpose maskable in your manifest.json

{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any maskable" // <-- New property value `"maskable"`
    }
  ]
  …
}

more information in this article: https://web.dev/maskable-icon/

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I am running my PWAs on Android devices and I did not have to make any special adjustments to the icons.

Here a portion of my web manifest:

"icons": [
     // Other sizes
    {
      "src": "/images/icons-144.png",
      "type": "image/png",
      "sizes": "144x144"
    },    
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]

In case of Chrome, it needs two icon sizes 192x192 and 512x512 at least:

Include a 192x192 pixel icon and a 512x512 pixel icon. Chrome will automatically scale the icon for the device. If you'd prefer to scale your own icons and adjust them for pixel-perfection, provide icons in increments of 48dp.

WebAPKs generated in Chrome 71 or later will show a larger icon on the splash screen. No action is required, as long as the recommended icons are provided.

added my Manifest to the post. I already had every size in it. — Torsten Dittmann, Aug 27 '19 at 08:39

Adaptive icons on Android 9 with Web App Manifest

2 Answers2