是否需要多个图标大小？

Question

我正在重新设计网站，其中包括一个新的网站图标。当前网站指定了以下所有尺寸：

  <link rel="apple-touch-icon" sizes="57x57" href="/img/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/img/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/img/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/img/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/img/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/img/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="/img/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">

就我个人而言，我从来没有这样做过。我总是简单地创建一个大 (192x192) png 并允许浏览器/设备根据需要调整它的大小。是的，从技术上讲，如果源大小和目标大小之间的关系不是均分的，这可能会导致一些伪影。但是，如果源材料足够大（目前是 192x192），这是一个小问题。此外，single-PNG 方法似乎与所有主要的现代浏览器兼容，并且在我自己的测试中看起来不错。是的，文件大小稍微大了一点，但我们这里说的只是几千字节的差异。

当然，如果您想自定义每种尺寸的设计，则需要不同的文件。但是假设您的 192x192 与您的 16x16 图形相同，那么在 2019 年，是否有任何理由指定这么多版本的网站图标？

Answer 1

RealFaviconGenerator 的作者发言。

无论你在哪里找到这个 sn-p，我可能一开始就写了它。 RealFaviconGenerator 是第一个生成这么多图标的人。那是一个特点。其他一些服务只是将此作为参考。

但您猜对了：您只需要 180x180 触摸图标。 iOS 设备可以按比例缩小。您想要全部声明它们的唯一具体情况是 iOS 的缩放算法（Cubic 的一种变体）不是最优的，例如像素艺术。看 https://realfavicongenerator.net/blog/how-ios-scales-the-apple-touch-icon/（我写了这篇文章）。现在，默认情况下，RealFaviconGenerator 仅创建 180x180 图标。

对于桌面图标（在您的示例中为 16x16、32x32 和 96x96），对我来说，这是正在进行的工作。我需要在最新和较旧的浏览器上测试所有这些尺寸以及多种尺寸的favicon.ico。到目前为止，我还没有花时间完成所有这些实验，RealFaviconGenerator 在这方面可能过于冗长。