[main-site] - Support maskable icon

[markozxuu]

This suggestion goes to the Frontend team in charge of vercel.com. 192×192 resolution icon displayed on an Android home screen. Although this is defined in the mainifest.webmanifest file, it does not support maskable icon

What are maskable icons?

If you've installed a Progressive Web App on a recent Android phone, you might notice the icon shows up with a white background. Android Oreo introduced adaptive icons, which display app icons in a variety of shapes across different device models. Icons that don't follow this new format are given white backgrounds.

Example:

I highly recommend this tool that facilitates the creation of this icon, you have the option to export the icon to 192*192

Once you have your icon you will only have to make a small adjustment in your manifest.webmanifest file

{
   "icons": [
       {
           "sizes": "192x192",
           "src": "icon.png",
           "type": "image/png",
           "purpose": "maskable"
       }
   ]
}

The "purpose" property tell for the browser as it should represent the icon and with the value "maskable", our icon will adapt to different forms depending on the android phone. This way, your icons will not have a white background.

Expected result