关于前端:PWA-图标显示大小问题兼顾-macOSWindows

首先看 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 里的图标，真是坑。