定義您的應用圖示

設計您的圖示

定義應用圖示的第一步是設計它。

大多數使用者透過圖示來識別應用程式。圖示會出現在作業系統的許多地方，包括主螢幕、工作列、應用程式啟動器或設定面板。確保您的圖示既有視覺吸引力，又能代表您的應用程式，以便使用者能夠輕鬆找到您的應用。

影像應具有透明背景，以便可以在各種背景上顯示。它至少應為 1024x1024 畫素，或可縮放至該尺寸，因為這是您的圖示可能顯示的最大尺寸。您可能還希望建立細節較少的圖示版本，以用於圖示顯示尺寸較小的地方。

將圖示設計成 SVG 檔案是一個好主意，因為這樣可以無損地縮放到任何尺寸。

在 Web 應用清單中引用您的圖示

使用 Web 應用清單成員 icons 來為您的 PWA 定義一組圖示。

正如 建立必要的圖示尺寸 中所述，您應該建立圖示的多個版本，以確保它在所有使用的地方都正確顯示。這就是為什麼 icons 成員是一個物件陣列，每個物件代表一個圖示，並具有自己的尺寸、型別和用途。每個圖示物件都具有以下屬性：

src

圖示影像檔案的 URL。

sizes

圖示可以使用的尺寸。

type

作業系統可以用來快速忽略不支援的影像的影像檔案的 MIME 型別。

用途

影像的特定於作業系統的用途。

例如，以下 Web 應用清單定義了五個 PNG 圖示，每個圖示的尺寸都不同：

{
  "name": "My PWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "icon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

建立必要的圖示尺寸

不同的作業系統在不同的地方和針對不同的裝置功能使用不同的圖示尺寸。建立圖示的多個版本很重要，以確保它在所有使用的地方都正確顯示。

例如，Windows 可以將您的應用圖示顯示為工作列上的 44x44 畫素影像，或開始選單上的 150x150 畫素影像。使用下面的連結，瞭解有關不同作業系統使用的圖示尺寸以及建立有效圖示的技巧的更多資訊：

• 對於 Windows，請參閱 learn.microsoft.com 上的 定義圖示和主題顏色。
• 對於 Android，請參閱 developer.android.com 上的 Google Play 圖示設計規範。
• 對於 iOS 和 macOS，請參閱 developer.apple.com 上的 應用圖示。

您的圖示的顯示尺寸取決於作業系統，並且可能會隨時間而變化。最好在所有您想要支援的裝置和作業系統上測試您的圖示，並生成最能帶來良好效果的尺寸和影像型別。您還可以使用 PWA Image Generator 等工具，從單個高解析度影像為您生成必要的圖示尺寸。

請注意，某些作業系統支援 SVG 圖示，這有助於減少您需要建立的影像數量，因為 SVG 可以自動縮放到任何尺寸。如果您的 SVG 圖示在縮小到小尺寸時效果不佳，則可能需要建立更多細節少、複雜度低的圖示。為了支援所有作業系統和小型尺寸，也請建立 PNG 版本的圖示。

以下 Web 應用清單示例使用了 WebP 影像作為小圖示，ICO 影像作為中等尺寸圖示，以及可縮放的 SVG 影像作為更高解析度的圖示：

{
  "name": "My PWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "icon-small.webp",
      "sizes": "48x48",
      "type": "image/webp"
    },
    {
      "src": "icon-medium.ico",
      "sizes": "72x72 96x96 128x128 256x256"
    },
    {
      "src": "icon-high.svg",
      "sizes": "257x257"
    }
  ]
}

在 在 Web 應用清單中引用您的圖示 中詳細瞭解如何引用各種圖示尺寸。

支援蒙版

根據作業系統和裝置功能，可能會對您的圖示應用蒙版，以匹配特定的形狀。可蒙版圖示是自適應圖示，可以在作業系統提供的各種形狀中顯示。例如，在 Android 上，應用圖示可以具有圓形蒙版。

您的 PWA 應用圖示應特別支援蒙版，以便與應用蒙版的作業系統良好整合。不支援蒙版的圖示可能會顯示為裁剪或比預期的小。在 Android 上，非蒙版圖示會居中顯示在圓形蒙版內，並帶有白色背景，這可能與您的圖示不搭。

下圖說明了在 Android 上蒙版圖示和非蒙版圖示之間的區別：

要開始讓您的應用圖示支援蒙版，請在 Web 應用清單的圖示物件中使用 purpose 屬性，並將其值設定為 maskable。例如：

{
  "icons": [
    {
      "src": "icon-192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

使用 purpose 屬性只是讓您的圖示支援蒙版的最後一步。您需要首先確保您的圖示與宿主作業系統良好整合，方法是確保圖示的重要部分顯示在蒙版的安全區域內。

安全區域是蒙版應用後保證始終可見的區域，它被定義為一個圓，其直徑是圖示最小尺寸的 80%。

例如，如果您的圖示是正方形，請確保正方形在安全區域內完全可見，並且其角不會被裁剪。

最後，為您的可蒙版圖示設定一個不透明的背景顏色，以填充整個圖示區域。

您還可以使用 Maskable.app 等工具來預覽您的圖示在不同作業系統上應用蒙版後的效果。

另見

• icons 清單成員
• web.dev 上的 應用設計
• web.dev 上的 使用可蒙版圖示在 PWA 中支援自適應圖示
• microsoft.com 上的 定義圖示和主題顏色
• pwabuilder.com 上的 PWA Image Generator