How to detect the required PWA icon "512x512" on PWA Builder

158 views Asked by At

I am trying to package a PWA for the stores using PWABuilder, but efforts to proceed prove abortive due to missing or undetected icon of size "512X512", while all other icon sizes have been detected.

I have included several icons of sizes "512X512" in the manifest to no avail, the "Action Items" still shows: "Need at least one PNG icon "512x512" or larger". As a result, I can't proceed to "Package for Stores".

Any efforts to resolve this is highly appreciated, thank you.

My site.webmanifest looks like this:

{
  "short_name": "Lorem",
  "name": "Lorem",
  "icons": [
    {
      "src": "android-launchericon-512-512.png",
      "sizes": "512X512",
      "type": "image/png"
    },
    {
      "src": "android-launchericon-512-512.png",
      "sizes": "512X512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192X192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "https://lorem.ipsum",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "scope": "/",
  "description": "A Lorem Magazine.",
  "dir": "auto",
  "lang": "en",
  "orientation": "portrait",
  "categories": [
    "entertainment",
    "magazines",
    "social"
  ]
}
1

There are 1 answers

0
dave decay On

I'm working through this issue myself with the PWABuilder. This article, after reading many on the subject, led me to create a duplicate image with unique name to get past the error. https://web.dev/articles/maskable-icon

{
  "src": "android-launchericon-512-512.png",
  "sizes": "512X512",
  "type": "image/png",
  "purpose": "any"
}, {
  "src": "android-launchericon-512-512--maskable.png",
  "sizes": "512X512",
  "type": "image/png",
  "purpose": "maskable"
},

There is an option to use https://progressier.com/ which seems to do this better with built in tools, but for my project I don't want to switch gears this late in the game. I'd love to see better options that have worked with PWABuilder for other developers.