Question

渐进式网络应用程序（PWA）需要哪些应用程序图标和大小？例如，如果Safari不支持PWA，我是否应该包含Apple图标？

这似乎是开发人员的共同需求，但目前我还不确定是否有官方规范或指导。

Answer 1

图标必须包含 192px 和 512px 大小的图标

Answer 2

如果您要包括用于 Android 的完整图标集：

icon-72x72
icon-96x96
icon-128x128
icon-144x144
icon-152x152
icon-192x192
icon-384x384
icon-512x512

有一些有用的工具，例如https://app-manifest.firebaseapp.com/，用于创建图标。

对于 iOS ，您需要：

icon-120x120
icon-180x180

背景为正方形（不能为透明背景）。一个很好的参考资料库，位于https://github.com/gokulkrishh/awesome-meta-and-manifest

Answer 3

对于那些强迫症患者，这里是完整列表

48x48

57x57 (iOS)

60x60 (iOS)

72x72 (iOS)

76x76 (iOS)

96x96

114x114 (iOS)

120x120 (iOS)

144x144

152x152 (iOS)

180x180（iOS）

192x192

256x256

384x384

512x512

Answer 4

根据万维网联盟（W3C）针对渐进式网络应用程序的App Manifest规范（8.7 icons member）：

您可以声明多种不同格式和尺寸的图标
W3C规范未标识必需或建议的大小，但允许您为您提供的图标指定属性（大小，格式，路径），以允许用户代理在这些规则中选择最合适的：
- 用户代理必须使用适合其使用的声明的最后一个图标。
- 如果第一个尝试因任何原因失败，它必须回落到下一个最合适的位置。

MDN Web Docs也未列出所需的尺寸或格式，但添加了：

尺寸值是图标的“空格分隔维度列表”
- 示例：“72x72 96x96”
类型值是可选的，但有助于用户代理选择最合适的图标供其使用。

使用上述规则，应用程序可以提供使用某些图标的条件，例如强制PNG获得特定分辨率，并回退到任何未指定大小的SVG，并允许用户代理选择最佳选择。该系统的好处是与尚未公布的用户代理的向前兼容性。

清单图标示例：（基于上面引用的W3C规范）

{
  "icons": [
    {
      "src": "assets/brand_small.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon/brand.ico",
      "sizes": "96x96 128x128 256x256"
    },
    {
      "src": "icon/brand_large.svg",
      "sizes": "257x257"
    }]
}

从2018年第一季度开始，渐进式网络应用程序（PWA）需要哪些图标大小？

4 个答案: