vscode: VSCode web icon doesn't fill area on Chrome OS

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.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 19 (18 by maintainers)

Most upvoted comments

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.

hello-smile6 on Mar 2, 2022

… 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.

hello-smile6 on Jan 28, 2022