首先看macOS任务栏的图标法则:

会发现第三个:YouTube Music(PWA版本)的图标很不对劲,不是因为它是圆形,其余都是方形。而是它很大,宽高显著大过其余图标。在我比照了VSC和YouTube Music的图标图片之后发现了区别所在:

下面看不显著的话,这么比照看就显著了:

解释下,图3是图2在控制台(F12)资源那里显示的图片,之所以看这个是因为能够看进去,图2外层有一圈红色的,其实也是图片的一部分,而且是通明的。
图1四角也有红色的,也是通明的。

所以当初能解释为什么VSC和YouTube Music的图标就算尺寸一样大,他们在macOS上显示的大小也不同了:VSC有一圈通明白边,YM没有。

在做PWA我的项目时,会波及到给PWA增加桌面图标的状况,即,在 manifest.icons 配置中增加图标设置,比方:

icons: [          {            src: 'logo64.png',            sizes: '64x64 48x48 32x32 24x24 16x16',            type: 'image/x-icon',          },          {            src: 'logo192.png',            type: 'image/png',            sizes: '192x192',          },          {            src: 'logo512.png',            type: 'image/png',            sizes: '512x512',          },        ],

在我这边的我的项目中,下面三个图标文件都是像VSC那种有一圈通明边的文件,但我发现到了Windows平台,任务栏的图标显示很小(最初一个):

和右边Brave浏览器比照下,显得更小。一开始我认为Windows PWA图标取的是下面的icons,所以我把logo64.pnglogo192.pnglogo512.png的图标都去掉了通明白边,发现到了Windows这边还是不行。

我最初才发现:原来 Windows(只测试了win7) PWA 利用在任务栏(包含桌面上)的图标取的是网页的favicon.ico,而 macOS平台取的是manifest.icons里的图标,真是坑。