截至 2018 年第一季度，渐进式 Web 应用程序 (PWA) 需要哪些图标大小？

Posted 2023-02-16

技术标签:

【中文标题】截至 2018 年第一季度，渐进式 Web 应用程序 (PWA) 需要哪些图标大小？【英文标题】：Which icon sizes are required for progressive web apps (PWA) as of Q1 2018? 【发布时间】：2018-07-28 02:30:32 【问题描述】：

渐进式网络应用 (PWA) 需要哪些应用图标和大小？例如，如果 Safari 不支持 PWA，我应该包含 Apple 图标吗？

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

【问题讨论】：

【参考方案1】：

根据万维网联盟 (W3C) 的渐进式 Web 应用程序清单规范 (8.7 icons member)：

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

MDN Web Docs 也没有列出所需的尺寸或格式，但补充说：

sizes 值是图标的“以空格分隔的尺寸列表”

示例：“72x72 96x96”

type 值是可选的，但有助于用户代理选择最适合其使用的图标。

使用上述规则，应用程序可以提供使用某些图标的条件，例如强制 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"
    ]

【讨论】：

实际上这在实践中是不正确的。 Chrome/Lighthouse 会抱怨缺少图标。您应该向 SVG 文件添加更多大小（在上述情况下至少为 512x512）。虽然，确实，他们是否记录了其他尺寸？我只是引用了规范。不在 W3C 页面上，没有。但谷歌的文档建议不这样做......另请注意，它可能是 Lighthouse（或 Chrome）中的一个错误。我在这里报告：github.com/GoogleChrome/lighthouse/issues/4883 只是好奇，在您的示例中，brand.ico 会是特定大小吗？似乎"sizes" 属性实际上指定的是纵横比？那么，如果是这样，为什么不将属性/属性称为“纵横比”？不，*.ico 文件可以嵌入多个图像。在上述情况下，icon/brand.ico 包含三个不同大小的三个不同图像。【参考方案2】：

根据Google Developers

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

Here是我们的博客。

【讨论】：

【参考方案3】：

如果您想为 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的一个很好的参考资料库

【讨论】：

酷，https://app-manifest.firebaseapp.com/ 帮助我生成不同的图标大小。现在，我的问题是；我应该使用生成的尺寸制作不同的图标，还是 512x512 尺寸的图标适用于所有其他生成的尺寸？拥有多个维度通常是一个好习惯，因此我建议您使用多个维度。 app-manifest.firebaseapp.com 不再有效。我得到 Go 1.9 不再可用。 app-manifest firebase 应用程序现在已损坏。应该更新这个答案。【参考方案4】：

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

48x48

57x57 (ios)

60x60 (iOS)

72x72 (iOS)

76x76 (iOS)

96x96

114x114 (iOS)

120x120 (iOS)

144x144

152x152 (iOS)

180x180 (iOS)