定义您的应用程序图标

定义应用程序图标的第一步是设计它。

大多数用户通过图标识别应用程序。图标在整个操作系统中都会出现，包括主屏幕、任务栏、应用程序启动器或设置面板。确保您的用户能够轻松找到您的应用程序，方法是使图标在视觉上具有吸引力，并且代表您的应用程序。

图像应具有透明背景，以便可以在各种背景上显示。它应该至少为 1024x1024 像素，或者可缩放至该大小，因为这是图标可能显示的最大尺寸。您可能还想创建具有更少细节的图标版本，用于在图标显示在较小尺寸的位置使用。

将图标设计为 SVG 文件是一个好主意，因为这将允许它按任何比例缩放，而不会损失质量。

使用 icons Web 应用程序清单成员定义 PWA 的图标集。

如 创建必要的图标大小 中所述，您应该创建图标的多个版本，以确保它在所有使用它的位置都正确显示。这就是 icons 成员是对象数组的原因，每个对象都代表一个图标，具有其自己的大小、类型和用途。每个图标对象都具有以下属性

src

图标图像文件的 URL。

sizes

图标可用于的尺寸。

type

图像文件的 MIME 类型，操作系统可以使用该类型快速忽略它不支持的图像。

purpose

图像的特定于操作系统的用途。

例如，以下 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 图像生成器 等工具从单个高分辨率图像中生成所需的图标尺寸。

请注意，一些操作系统支持 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 上
• 使用可蒙版图标在 PWA 中提供自适应图标支持 在 web.dev 上
• 定义图标和主题颜色 在 microsoft.com 上
• PWA 图像生成器 在 pwabuilder.com 上