移动网站图标

Question

所以我正在做一些关于移动网站用户体验的研究，并偶然发现整个 favicon.ico 已经完全过时了。

环顾四周，我发现我需要各种新的图像/图标集才能在各种移动设备（如 android、iphone 和 windows 手机）上正确呈现“favicon”。

现在的问题是，我有以下代码：

<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/favicons/manifest.json">
<meta name="apple-mobile-web-app-title" content="JoJo Productions">
<meta name="application-name" content="JoJo Productions">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="theme-color" content="#555555">
<link rel="shortcut icon" href="favicon.ico">

但对我来说，这只是一个太大的代码块，无法正确显示网站图标。所以我想知道我可以删除哪些内容，以及我绝对应该保留哪些内容才能在“大多数”移动设备上正确呈现。

大多数使用移动网站图标的其他网站只使用上述代码中的一小部分，即：57x57、72x72、114x114 和 144x144，这些都是 apple-touch-icons。那么图像/代码部分对 iPhone 或其他移动用户来说真的那么重要吗？还是可以优化一下？

无论如何感谢您的信息。

---

编辑

所以通过一些进一步的研究，我得到了这个结果，它似乎在大多数现代设备上都可以正常工作：

<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="msapplication-TileImage" content="images/favicons/mstile-large.png">
<meta name="msapplication-TileColor" content="#ae8160">
<meta name="application-name" content="JoJo Productions">
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

这对我来说当然更好，因为代码/图像的数量已显着减少。只要它能在大多数现代移动设备上运行，我就很高兴。

结合"cheat sheet"、this tutorial 和 Philippe B 的帮助。我设法做到了。

无论如何感谢所有帮助，希望在未来几年他们能为网站图标制定适当的标准！

Answer 1

要在没有大量图标的情况下处理尽可能多的平台，您基本上需要四个图标：

• PNG 图标，适用于现代桌面浏览器。
• 适用于移动浏览器的 Apple Touch 图标（当然是 iOS Safari，还有 Android Chrome 和许多其他浏览器；还有 Mac OS Yosemite Safari）。
• favicon.ico，适用于旧版浏览器（想想 IE 9、8、...）。
• Windows 8 和 10 上 IE 的磁贴图标。

这给了我们：

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#00aba9">

关于这段代码的几点说明：

• apple-touch-icon.png 是 180x180，这是 iOS（iPhone 6+ 和 Retina iPad 上的 iOS 8）支持的最高分辨率。较小的平台会缩小图标。
• apple-touch-icon.png 以这种方式命名并放置在网站的根目录中，因为这是一个convention from Apple。如果您放置或命名不同，您可能会在服务器日志中注意到 404 错误。没什么好担心的，但如果你能避免它们......
• favicon.png 是 32x32。不能太小也不能太大。您可能会扩大规模，但不会带来显着的好处。
• favicon.ico 位于您网站的根目录中，因为这是 IE 的约定。例如，Yandex 搜索引擎在此处期望它。
• 在这个例子中，我使用了mstile-144x144.png，没有使用browserconfig.xml。我这样做是因为它看起来更容易（这只是两行 HTML 和一张图片；不涉及额外的 XML 文件）。但这个选择是有争议的。 Win 8.0 / IE 10 引入的msapplication-TileImag 和msapplication-TileColor 元数据已被browserconfig.xml in Win 8.1 / IE 11 取代。所以browserconfig.xml 是一个长期的解决方案。另外，如果您将此文件放在站点的根目录中，则不必在 HTML 中声明它：IE 11 会按照约定（“favicon.ico”样式）找到它。请注意Coast by Opera picks msapplication-TileImag for bookmarks。现在就做出选择吧！

最后一点：您在问题中引用的大代码块是由RealFaviconGenerator 生成的。作为这个工具的作者，你的问题让我很伤心;-)