Bug Sur icons glitched on non-hidpi screens

[shaonianruntu]

OS: macOS 11.2.3 (20D91)
Device: Mac mini (M1, 2020)
Desktop: Benq 24' inch 1080P

New Icon (v1.55) garbled under Big Sur M1 Mac both for apple scallion version and universal version.

But interestingly, there's no problem with my 13-inch M1 Macbook air, and it's this problem under the M1 Mac mini on my 24-inch external display.

The following example of icon garbled comes from Mac mini:

This is the installation package downloaded from the official website, you can see that after unziping its little icon is garbled:

This is the introduction to this unzipping installation package, you can see that the small icon is in disarray but the large icon is correct:

This is the display of the launch desk page, the same small icon is wrong but the big icon is correct:

[shaonianruntu]

VS Code version: Code 1.55.0 (c185983, 2021-03-30T16:07:58.402Z)
OS version: Darwin arm64 20.3.0
Remote OS version: Linux x64 4.15.0-20-generic

System Info

Item	Value
CPUs	undefined
GPU Status	2d_canvas: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	1, 1, 2
Memory (System)	8.00GB (0.11GB free)
Process Argv	--crash-reporter-id aebaf2e0-6548-4ea1-8ed8-5823f58efc9c
Screen Reader	no
VM	0%

Item	Value
Remote	SSH: g1080
OS	Linux x64 4.15.0-20-generic
CPUs	Intel(R) Core(TM) i7-6950X CPU @ 3.00GHz (20 x 3803)
Memory (System)	125.82GB (63.43GB free)
VM	0%

Extensions (25)

Extension	Author (truncated)	Version
bracket-pair-colorizer-2	Coe	0.2.0
remote-containers	ms-	0.166.0
remote-ssh	ms-	0.65.1
remote-ssh-edit	ms-	0.65.1
remote-wsl	ms-	0.54.6
vscode-remote-extensionpack	ms-	0.20.0
svg-preview	Sim	2.8.3
markdown-preview-github-styles	bie	0.1.6
path-intellisense	chr	2.3.0
EditorConfig	Edi	0.16.4
prettier-vscode	esb	6.3.1
code-runner	for	0.11.3
todo-tree	Gru	0.0.209
rainbow-csv	mec	1.8.1
vscode-filesize	mkx	3.1.0
python	ms-	2021.3.680753044
vscode-pylance	ms-	2021.3.4
jupyter	ms-	2021.5.702919634
cpptools	ms-	1.2.2
korofileheader	OBK	4.8.5
indent-rainbow	ode	7.5.0
svg-preview	Sim	2.8.3
tabnine-vscode	Tab	3.2.16
vscode-wakatime	Wak	5.0.1
markdown-all-in-one	yzh	3.4.0

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vstry244:30276681
pythonvsdeb440:30248342
pythonvsded773:30248341
pythonvspyt875:30259475
pythonvsnew554:30281908
pythontbcf:30265426
openwsldoc:30282072
vspre833cf:30267465
pythonptprofiler:30281270
vshan820cf:30276953
pythondataviewer:30283453

[shaonianruntu]

And dragging the '/Applications/Visual Studio Code.app/Contents/Resources/Code.icns' file in the package file to the small icon in the upper left corner of the software's introduction page still doesn't solve the problem.

[robjwells]

Same on Catalina (10.15.7), on an Intel MacBook Air. Dock icon fine, but smaller icon garbled.

Version: 1.55.0
Commit: c185983a683d14c396952dd432459097bc7f757f
Date: 2021-03-30T16:01:05.981Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Darwin x64 19.6.0

[yume-chan]

Duplicate of #118754, #106429

[sataset]

Intel - macOS Big Sur 11.2.3 (20D91)

• normal in dock
• distorted in Finder toolbar

vscode info

Version: 1.55.0
Commit: c185983a683d14c396952dd432459097bc7f757f
Date: 2021-03-30T16:01:05.981Z (1 day ago)
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Darwin x64 20.3.0

[robjwells]

@yume-chan:

Duplicate of #118754, #106429

Not sure it’s a duplicate of #106429 as it is just the icon affected for me.

[yume-chan]

@robjwells I agree with you and that's why I included #118754. Which had been marked as a duplicate of #106429

[bpasero]

I can see the garbled icon too (macOS ARM & macOS Intel).

[miguelsolorio]

We've been closing issues related to the blue lines on the app icon and pointing to #106429

[bpasero]

@misolori this is just the icon, nothing else for me. And only in the menu such as here:

[estruyf]

Same for me, got it on my Macbook (Catalina) and Mac Mini (Big Sur). Noticed it when I used the "open with".

[gjdass]

Same here. Fresh install or not.
MaxBook Air M1.

Seems to affect only small icons. Medium / big icons are fine.

[aryadaroui]

Same issue here when using external 1440p display. Intel mac on Big Sur.
Seems only to be the smaller icons that are distorted.
The icon in the dock switches back and forth between the old one and the new one; might be related.

[deepak1556]

@misolori this not an issue on the users' device but on the icn files we have shipped.

* Download https://github.com/microsoft/vscode-distro/raw/distro/quality/stable/resources/darwin/code.icns
* iconutil -c iconset -o /tmp/vscode.iconset ~/Downloads/code.icns
* open /tmp/vscode.iconset
* 16x16, 32x32 and 48x48 are not correct however their 2x counterparts (hiDPI templates) are fine, that is why only certain set of users are seeing this issue.

[miguelsolorio]

@deepak1556 thanks for investigating this, marking as a candidate and will work on a fix for this.

[butuzov]

same on mojave

[widersky]

The same issue here on macOS 11.2.3

[supriyo-biswas]

I see the same issue on macOS 10.14.6 within Spotlight:

[ventulus95]

same issue on macOS 10.15.7

[miguelsolorio]

I've got updated icon files, can someone who's encountering this issue verify that these work?

Steps

1. Close VS Code
2. Download and extract this zip file
3. Right-click on VS Code from finder > Get Info
4. Drag the new code.icns file into the top left of the Get Info window
5. Restart the dock by running killall Dock from the terminal
6. Open VS Code

[david-ns]

@misolori It is working fine now, I'm on Big Sur 11.2.3

[shaonianruntu]

I've got updated icon files, can someone who's encountering this issue verify that these work?

Steps

1. Close VS Code
2. Download and extract this zip file
3. Right-click on VS Code from finder > Get Info
4. Drag the new code.icns file into the top left of the Get Info window
5. Restart the dock by running killall Dock from the terminal
6. Open VS Code

It works for me! Thank You !

[Lamparter]

I once had the same issue with a drive icon.

[miguelsolorio]

@DeveloperWOW64 @heismauri let's please keep this issue focused on the official VS Code icons.

[miguelsolorio]

Since a few people have already confirmed that the new fix works, going to lock this issue to reduce the noise. Thanks everyone in reporting this, will close this issue once the PR has been merged.

[miguelsolorio]

For verification:

1. cd into the directory that has the icns files
2. run iconutil -c iconset -o ~/Desktop/code-temp.iconset Code.icns to deconstruct icns file (this will create a folder on your desktop)
3. Open folder and verify that all icons appear normally without any glitches

[miguelsolorio]

Merged 91fa7f0