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"
    }
  ]
}