androidwebiconsprogressive-web-appsmanifest

Material You icon on PWA


is there some way to implement monochrome icon to the PWA manifest, for android to use it with themed icon, in the new Material You design? https://developer.android.com/develop/ui/views/launch/icon_design_adaptive this but in PWA


Solution

  • It seems that the purpose monochrome (W3 reference) is what you are looking for.

    Simply add your icon in your manifest like so:

    {
      …
      "icons": [
        …
        {
          "src": "path/to/monochrome_icon.png",
          "sizes": "196x196",
          "type": "image/png",
          "purpose": "monochrome"
        },
        …
      ],
      …
    }
    

    Note that this feature is still not widely implemented. Here is an ongoing issue asking for the support of this feature on Chrome mobile.

    More details about monochrome icons.

    You will need to make your icon fully black and transparent for it to work properly.