所以我正在做一些有关移动网站用户体验的研究，并且偶然发现了整个favicon.ico完全过时的事实。
环顾四周我已经聚集起来，我需要各种新的图像/图标来实际呈现＆＃34; favicon＆＃34;适用于各种移动设备，如Android，iphone和Windows手机。
现在问题是，我已经得到以下代码：
<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">
但对我来说，这只是一个太大的代码块才能正确显示favicon。所以我想知道我能够删除什么以及我应该保持什么才能正确地将它呈现在＆＃34;大多数＆＃34;移动设备。
大多数使用移动设备的其他网站只使用少数上述代码，分别为：57x57,72x72,114x114和144x144，这些都是苹果触摸图标。那么图像/代码部分对于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的帮助。我设法得到了它。
无论哪种方式都要感谢所有的帮助，并希望在未来几年内，他们会为favicon做出适当的标准！
答案 0 :(得分：25)
要在没有大量图标的情况下尽可能多地处理平台，您基本上需要四个图标：
favicon.ico，适用于旧版浏览器（想想IE 9,8，...）。这给了我们：
<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将按惯例找到它（＆＃34; favicon.ico＆＃34;样式）。请注意Coast by Opera picks msapplication-TileImag for bookmarks。现在做出选择！最后一点：您在问题中引用的大代码块是由RealFaviconGenerator生成的。作为这个工具的作者，你的问题让我感到难过; - ）