icons

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

icons 清單成員用於指定一個或多個影像檔案，這些檔案定義了代表您的 Web 應用的圖示。

語法

json

/* Single icon with the minimum required property */
"icons": [
  {
    "src": "icon/basic-icon.png"
  }
]

/* Single icon with multiple purposes */
"icons": [
  {
    "src": "icon/basic-icon.png",
    "purpose": "monochrome maskable"
  }
]

/* Two icons with various properties */
"icons": [
  {
    "src": "icon/low-res.png",
    "sizes": "48x48"
  },
  {
    "src": "maskable_icon.png",
    "sizes": "48x48",
    "type": "image/png"
  }
]

值

icons

這是一個物件陣列。每個物件代表一個將在特定上下文中使用的圖示。例如，您可以新增圖示來代表您的 Web 應用在具有不同螢幕尺寸的裝置上、與各種作業系統整合、用於啟動螢幕或用於應用通知。

每個圖示物件可以有一個或多個屬性。其中，只有 src 是必需的。可能的屬性包括：

src

一個字串，指定圖示影像檔案的路徑。如果 src 是相對路徑，則該路徑將相對於清單檔案的 URL 進行解析。例如，對於位於 https://example.com/manifest.json 的清單檔案，相對 URL images/icon-192x192.png 將解析為 https://example.com/images/icon-192x192.png。

sizes 可選

一個字串，指定圖示檔案可以使用的一個或多個尺寸。每個尺寸都指定為 <寬度（畫素）>x<高度（畫素）>。如果指定了多個尺寸，它們將用空格分隔；例如，48x48 96x96。當有多個圖示可用時，瀏覽器可能會為特定的顯示上下文選擇最合適的圖示。對於 PNG 等柵格格式，建議指定實際可用的尺寸。對於 SVG 等向量格式，您可以使用 any 來表示可伸縮性。如果未指定 sizes，則圖示的選擇和顯示可能因瀏覽器的實現而異。

請注意，sizes 的格式與 HTML <link> 元素的 sizes 屬性類似。

type 可選

一個字串，指定圖示的 MIME 型別。值應為 image/<子型別> 格式，其中 <子型別> 是特定的影像格式；例如，image/png 表示 PNG 影像。如果省略，瀏覽器通常會從副檔名推斷影像型別。

purpose 可選

一個區分大小寫的關鍵字字串，用於指定瀏覽器或作業系統可以使用該圖示的一個或多個上下文。該值可以是一個單獨的關鍵字，也可以是多個用空格分隔的關鍵字。如果省略，瀏覽器可以出於任何目的使用該圖示。

瀏覽器使用這些值作為提示來確定圖示的顯示位置和方式。例如，monochrome 圖示可能用作純色填充的徽章或固定圖示，這與全綵色啟動圖示在視覺上有所區別。使用多個關鍵字，例如 monochrome maskable，瀏覽器可以出於其中任何目的使用該圖示。如果包含一個未識別的用途以及有效值（例如 monochrome fizzbuzz），則圖示仍可用於有效用途。但是，如果只指定了未識別的用途（例如 fizzbuzz），則會被忽略。

有效值包括：

monochrome: 指示該圖示旨在用作純色填充的單色圖示。使用此值時，瀏覽器將丟棄圖示中的顏色資訊，僅使用 alpha 通道作為任何純色填充的蒙版。
maskable: 指示該圖示在設計時考慮了圖示蒙版和安全區域，因此安全區域以外的影像部分可以被忽略並隱藏。
任意: 指示該圖示可用於任何上下文。這是預設值。

提供了兩種相同尺寸（48x48）但不同格式的圖示。第一個使用 type 屬性顯式指定為 WebP。如果瀏覽器不支援 WebP，它將回退到第二種相同尺寸的圖示。對於第二個圖示，瀏覽器將透過 HTTP 標頭確定 MIME 型別，或透過推斷影像檔案的內容來確定。此尺寸的圖示通常用於瀏覽器標籤頁和書籤。
提供了一個 ICO 檔案，其中包含從 72x72 到 256x256 的多種尺寸。ICO 檔案包含多個柵格圖示，這些圖示針對各種顯示尺寸進行了單獨最佳化。此尺寸的圖示通常用於桌面快捷方式。
對於較大的圖示（257x257 及以上），指定了一個 SVG 檔案。此圖示的 sizes 值設定為 any，這允許瀏覽器在任何尺寸下使用此圖示。SVG 圖示在大尺寸下保持其質量。這些圖示非常適合高解析度顯示器，例如在漸進式 Web 應用（PWA）中。

json

{
  "icons": [
    {
      "src": "icon/low-res.webp",
      "sizes": "48x48",
      "type": "image/webp"
    },
    {
      "src": "icon/low-res",
      "sizes": "48x48"
    },
    {
      "src": "icon/hd_hi.ico",
      "sizes": "72x72 96x96 128x128 256x256"
    },
    {
      "src": "icon/hd_hi.svg",
      "sizes": "any"
    }
  ]
}