首先看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.png
、logo192.png
、logo512.png
的图标都去掉了通明白边,发现到了Windows这边还是不行。
我最初才发现:原来 Windows(只测试了win7) PWA 利用在任务栏(包含桌面上)的图标取的是网页的favicon.ico
,而 macOS平台取的是manifest.icons
里的图标,真是坑。