VSCode web icon doesn't fill area on Chrome OS

[hello-smile6]

The VSCode icon doesn't display well on Chrome OS. To fix it, you'd just have to add the purpose: "any maskable" property to each icon in the PWA manifest. Could you fix it? Sorry if I'm doing something wrong, I don't know what to do.

[bpasero]

/gifPlease

[hello-smile6]

/gifPlease

Would a screenshot work?

[bpasero]

Yes!

[hello-smile6]

Yes!

Okay.

If you look at the blog post for the native app, you'll notice that the icon fills the entire space. In order to get the same result on the PWA, you'd have to add the purpose: "any maskable" property for each image in the manifest.

[bpasero]

... each icon in the PWA manifest...

Just to clarify, you are using vscode.dev as PWA?

[hello-smile6]

... each icon in the PWA manifest...

Just to clarify, you are using vscode.dev as PWA?

Yes. Here's what I'm saying.

{
    "name": "Visual Studio Code",
    "short_name": "Code",
    "start_url": "/",
    "lang": "en-US",
    "display": "standalone",
    "icons": [
-       { "src": "/static/stable/code-192.png", "type": "image/png", "sizes": "192x192" },
-       { "src": "/static/stable/code-512.png", "type": "image/png", "sizes": "512x512" },
+       { "src": "/static/stable/code-192.png", "type": "image/png", "sizes": "192x192", "purpose": "any maskable" },
+       { "src": "/static/stable/code-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
    ]
}

I made an example of how the icon would look that way. Please note that you'd need to add more padding.

[rzhao271]

Hi @hello-smile6, has the issue been fixed on the latest Insiders?

[hello-smile6]

Checking @rzhao271

[hello-smile6]

@rzhao271 No.

[hello-smile6]

The Insiders icon is actually slightly smaller than the main one.

[miguelsolorio]

We are in the process of deploying the fix today so it's not yet available (don't think the bot can verify when it's been released since it's the web version).

[hello-smile6]

@misolori Okay, I'll reinstall the PWA a few times

[miguelsolorio]

Deployment is now complete, please try again using https://insiders.vscode.dev/ and remember to uninstall the app from chrome://apps

[hello-smile6]

It doesn't seem to work.

[miguelsolorio]

This is what i see when I try this out on a android emulator, the cropping isn't the best but it at least appears to be working:

[hello-smile6]

On Chrome OS, the icon doesn't show with a transparent background. I got an app to show it once, but I since changed that app, so I showed another. Here's a screenshot. I was meaning that it isn't as big as is shown in the blog post originally.

[miguelsolorio]

Ah, so we did change it so that the browser apps on Chrome/iOS use the white background and on desktop they use the transparent version so that looks as expected (for some reason it looks better on your screenshot than mine).

[hello-smile6]

Ah, so we did change it so that the browser apps on Chrome/iOS use the white background and on desktop they use the transparent version so that looks as expected (for some reason it looks better on your screenshot than mine).

Oh, would it be possible to somehow have the transparent version?