什么图标大小是需要进步的网络应用程序(PWA)，从Q1 2018年？

Question

渐进式web应用程序(PWA)需要哪些应用程序图标和大小？例如，如果Safari不支持PWAs，我应该包括苹果图标吗？

这似乎是开发人员的共同需求，但此时，我不确定是否有正式的规范或指南。

Answer 1

如果您想为Android包括一组完整的图标

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

有一些有用的工具，比如https://www.simicart.com/manifest-generator.html/，可以创建图标。

对于iOS，您需要：

icon-120x120
icon-180x180

有正方形背景(不能是透明背景)。一个很好的https://github.com/gokulkrishh/awesome-meta-and-manifest参考资源库

Answer 2

根据Google开发人员

图标必须包括192 and 和512 and大小的图标。

这里也是我们的博客。

Answer 3

根据万维网联盟(W3C)的进步网络应用(8.7图标成员)应用程序声明规范：

• 您可以声明多种不同格式和大小的图标。
• W3C规范不确定所需或推荐的大小，但允许您为您提供的图标指定属性(大小、格式、路径)，以便用户代理在这些规则中选择最合适的：。
  • 用户代理必须使用声明适合其使用的最后一个图标。
  • 如果第一次尝试因任何原因失败，则必须在下一次最适当的情况下退却。

​

MDN Web文档也没有列出所需的大小或格式，但添加：

• sizes值是图标的“以空格分隔的维度列表”。

- Example: "72x72 96x96"

​

• 类型的值是可选的，但可以帮助用户代理选择最合适的图标供其使用。

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

Manifest图标示例：(基于上面引用的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"
    }]
}