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

Question

渐进式Web应用程序(PWA)需要哪些应用程序图标和大小？例如,如果Safari不支持PWA,我是否应该包含Apple图标？

这似乎是开发人员的共同需求,但在这个时候,我不确定是否有官方规范或指导.

Answer 1

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

48x48

57x57（iOS）

60x60（iOS）

72x72（iOS）

76x76（iOS）

96x96

114x114（iOS）

120x120（iOS）

144x144

152x152（iOS）

180x180（iOS）

192x192

256x256

384x384

512x512

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

根据万维网联盟 (W3C) 的渐进式 Web 应用程序（8.7 图标成员）的应用程序清单规范：

• 您可以声明多个不同格式和大小的图标
• W3C 规范没有确定要求或推荐的大小，但允许您为您提供的图标指定属性（大小、格式、路径），以允许用户代理在这些规则中选择最合适的：
  • 用户代理必须使用声明适合其使用的 LAST 图标。
  • 如果第一个尝试由于任何原因失败，它必须回退到下一个最合适的。

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

Answer 4

根据Google Developers

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

这是我们相同的博客。