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），这将是一个小问题。此外，单PNG方法似乎与所有主要的现代浏览器兼容，并且在我自己的测试中看起来不错。是的，文件大小略大，但是我们在这里只说几千字节的差异。

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

Answer 1

RealFaviconGenerator的作者发言。

无论您何时找到此摘录，我都可能首先写出来。 RealFaviconGenerator是第一个生成这么多图标的人。那是一个功能。其他一些服务只是将此作为参考。

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

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

是否需要多个图标图标？

1 个答案: