我正在进行网站重新设计，其中包括一个新的图标。当前站点指定了以下所有大小：
<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年，有没有理由指定这么多版本的图标？
RealFaviconGenerator的作者发言。
无论你在哪里找到这个片段，我都可能是首先写的。 RealFaviconGenerator是第一个生成这么多图标的人。这是一个功能。其他一些服务只是将其作为参考。
但你猜对了：你只需要180x180 Touch图标。 iOS设备可以缩小它。您想要声明它们的唯一具体情况是iOS的缩放算法（Cubic的变体）不是最佳的，例如像素艺术。见https://realfavicongenerator.net/blog/how-ios-scales-the-apple-touch-icon/（我写了这篇文章）。现在，默认情况下，RealFaviconGenerator仅创建180x180图标。
对于桌面图标（在您的示例中为16x16,32x32和96x96），对我而言，这是正在进行的工作。我需要在最新和较旧的浏览器上测试所有这些尺寸，以及多尺寸的favicon.ico。到目前为止，我没有花时间进行所有这些实验，RealFaviconGenerator在这方面可能过于冗长。