PWA 图标显示大小问题，兼顾 macOS、Windows

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

所以解决方法就是：在manifest.icons配置时用有一圈透明边缘的图（macOS用），然后html favicon.ico的图用不带透明边缘的图（Windows用）。