移动网站图标
Mobile Favicons
所以我正在做一些关于移动网站用户体验的研究，偶然发现整个 favicon.ico 已经完全过时了。
环顾四周，我发现我需要各种新的 images/icons 才能在 android、iphones 和 [=44= 等各种移动设备上正确显示 "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">
但对我来说，这只是一大堆代码，无法正确显示网站图标。所以我想知道我可以删除什么以及我应该保留什么才能在 "most" 移动设备上正确显示它。
大多数其他使用移动网站图标的网站仅使用上述代码中的一小部分，即：57x57、72x72、114x114 和 144x144，这些都是 apple-touch-icons。那么 images/code 部分对于 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">
这对我来说当然更好，因为 code/images 的数量已经显着减少。只要它能在大多数现代移动设备上运行，我就很高兴。
结合这个 "cheat sheet", this tutorial 和 Philippe B 的帮助。我设法做到了这一点。
无论如何感谢所有的帮助，希望在未来几年他们能为网站图标制定一个合适的标准！
要在没有大量图标的情况下解决尽可能多的平台问题，您基本上需要四个图标：
- 用于现代桌面浏览器的 PNG 图标。
- 用于移动浏览器的 Apple Touch 图标（iOS 当然是 Safari，还有 Android Chrome 和许多其他浏览器；还有 Mac OS Yosemite Safari）。
favicon.ico，适用于旧版浏览器（想想 IE 9、8，...）。- Windows8 和 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 支持的最高分辨率（iOS 8 on iPhone 6+ 和 Retina iPad）。较小的平台会缩小图标。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. So browserconfig.xml is a longer term solution. Plus, if you put this file in the root directory of your site, you don't have to declare it in the HTML: IE 11 will find it by convention ("favicon.ico" style). Note that Coast by Opera picks msapplication-TileImag for bookmarks 取代。现在做出选择！
最后一点：您在问题中引用的大代码块是由 RealFaviconGenerator 生成的。作为这个工具的作者，你的问题让我很难过;-)
所以我正在做一些关于移动网站用户体验的研究，偶然发现整个 favicon.ico 已经完全过时了。
环顾四周，我发现我需要各种新的 images/icons 才能在 android、iphones 和 [=44= 等各种移动设备上正确显示 "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">
但对我来说，这只是一大堆代码，无法正确显示网站图标。所以我想知道我可以删除什么以及我应该保留什么才能在 "most" 移动设备上正确显示它。
大多数其他使用移动网站图标的网站仅使用上述代码中的一小部分，即：57x57、72x72、114x114 和 144x144，这些都是 apple-touch-icons。那么 images/code 部分对于 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">
这对我来说当然更好，因为 code/images 的数量已经显着减少。只要它能在大多数现代移动设备上运行，我就很高兴。
结合这个 "cheat sheet", this tutorial 和 Philippe B 的帮助。我设法做到了这一点。
无论如何感谢所有的帮助，希望在未来几年他们能为网站图标制定一个合适的标准！
要在没有大量图标的情况下解决尽可能多的平台问题，您基本上需要四个图标：
- 用于现代桌面浏览器的 PNG 图标。
- 用于移动浏览器的 Apple Touch 图标（iOS 当然是 Safari，还有 Android Chrome 和许多其他浏览器；还有 Mac OS Yosemite Safari）。
favicon.ico，适用于旧版浏览器（想想 IE 9、8，...）。- Windows8 和 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 支持的最高分辨率（iOS 8 on iPhone 6+ 和 Retina iPad）。较小的平台会缩小图标。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.xmlin Win 8.1 / IE 11. Sobrowserconfig.xmlis a longer term solution. Plus, if you put this file in the root directory of your site, you don't have to declare it in the HTML: IE 11 will find it by convention ("favicon.ico" style). Note that Coast by Opera picksmsapplication-TileImagfor bookmarks 取代。现在做出选择！
最后一点：您在问题中引用的大代码块是由 RealFaviconGenerator 生成的。作为这个工具的作者，你的问题让我很难过;-)