定义您的应用图标

设计您的图标

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

大多数用户通过图标来识别应用程序。图标会出现在操作系统的许多地方，包括主屏幕、任务栏、应用程序启动器或设置面板。确保您的图标既有视觉吸引力，又能代表您的应用程序，以便用户能够轻松找到您的应用。

图像应具有透明背景，以便可以在各种背景上显示。它至少应为 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