Separate maskable / non-maskable images

[theguacamoleking]

Hello there!

I'm currently using vite-plugin-favicons-inject but would love to move to this tool. I'm currently hitting an issue where I'm not sure how to specify the maskable and non-maskable image 🤔

As an example, here's how this is done with vite-plugin-favicons-inject

viteFaviconsInject(
  'favicon.svg',
  {
    manifestMaskable: './favicon-maskable.svg', // <- different image for maskable
  }
)

And the resulting output in the manifest looks like this

{
  // ...
  "icons": [
    {
      "src": "/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "android-chrome-maskable-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "purpose": "maskable" // <- maskable image takes precedence
    },
  ]
}

Proposal

User can specify maskable/non-maskable from config

export default defineConfig({
  preset,
  images: [
    { path: 'src/favicon.svg', maskable: false },
    { path: 'src/favicon-maskable.svg', maskable: true }
  ]
})

In combination with vite-plugin-pwa, the app manifest will be generated containing maskable and non-maskable definitions (see above)

[theguacamoleking]

Any chance of this issue getting some attention? The current implementation assumes both images are the same when this is almost never the case. Here's an example from Twitter.

any image: Already masked (circle in this case) for use with legacy systems / favicon / tab icon. Can't be used as a maskable image because it is already masked.

maskable image: Not masked, masked by OS to match system theme. Can't be used as an any image because it needs to be masked.

I'd recommend checking out the web.dev article which does a good job of summarizing the differences between maskable and any icons as well as flagging why having one image for both maskable and any isn't recommended.