首先看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用）。

更新： Windows11的Chrome/Edge取的是manifest.icons配置，這就很尷尬了。如果你配置的圖標不留外層一圈透明空白，你的圖標在Windows11上顯示正常，在macOS上顯示就和上面的YouTube Music一樣顯得大。反之macOS上正常，那麼Windows11上就顯得比其他圖標小。

然後iPad也需要單獨處理：

• 首先Safari不會讀PWA的 manifest 配置文件，會去讀html的<link rel="apple-touch-icon" href="/apple-pwa.png">
• 其次，不能有透明像素，透明像素就會顯示為黑色。（上面VSCode圖標最外層那一圈就是透明像素）
• 還有個特點 就是得貼邊 外框是safari給加（這條不確定，應該是指不應該給圖標增加box-shadow陰影效果）

• safari的title透明是這樣搞：apple-mobile-web-app-capable+apple-mobile-web-app-status-bar-style

  然後還有個安全區（劉海，豎屏、橫屏）的坑。上面這個設置好之後，safari就會遵守theme-color設置的顏色