在阅读了这两篇文章（One Two）之后，我对如何覆盖所有平台和浏览器以获得最佳图标以供其使用感到困惑。
现在，我有这个，但我不确定这是否是最佳的。
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">
我不确定apple-touch-icon-precomposed.png应该是多少。
但要切入追逐（tl; dr）：覆盖尽可能多的平台和浏览器以及推荐用于图标的最佳尺寸是什么？
Bounty将给予能够回答这两个问题的人：1。尽可能多地覆盖尽可能多的平台和浏览器的最佳方式是什么; 2.每次出现都需要哪些尺寸。
答案 0 :(得分：5)
好的，你看了http://mathiasbynens.be/notes/touch-icons因为他是那些提出关于苹果触摸图标的html5 boilderplate变化的人之一
从他的网站上总结如下：
那么，使用哪种技术？这一切都取决于，真的。
如果必须使用Android支持，则必须使用HTML， 我建议使用“不同图标大小”下的最后一个代码片段 部分。 如果您只关注iOS，我强烈建议您使用无HTML方法。 如果你很懒，并不关心Android，旧版iOS或性能，我想你可以只使用一个 152×152图标，将其命名为apple-touch-icon-precomposed.png并将其放入 你网站的根源。
HERE是他用于脚本和所有尺寸的测试用例：
http://mathiasbynens.be/demo/touch-icon
这应该回答1.还有2.加上你可以睡得好，因为他实际上进行了人群测试并且覆盖了所有测试用例。
答案 1 :(得分：2)
问题1很简单。在您的站点根目录中删除favicon.ico，所有浏览器都会读取它，即使是像IE4这样的遗留浏览器。 favicon可以包含多个尺寸，浏览器将选择最佳尺寸，但推荐尺寸为128x128（高分辨率桌面），64x64（桌面），16x16（浏览器标签）。该解决方案依赖于微软的事实上的标准，这些标准本身并不是最佳标准，但浏览器支持非常出色。这涵盖了我所知道的所有情况，除了愚蠢的iDevice特定的“apple-touch-icon-precomposed”垃圾，你似乎已经掌握了它。
如果您使用此方法，您甚至不需要元标记，但元标记有一个优点，它允许您强制执行favicon刷新：
<link rel="shortcut icon" href="/favicon.ico?ver=2" />
问题2很难回答，因为新设备总是会出现。我个人并不认为覆盖“所有可能性”甚至是必要的，因为大部分时间最好的配合将由设备根据需要进行缩放。拥有至少一个高分辨率版本就足够了。
不要过度思考这个问题。我使用单个64x64图标文件启动了大多数网站，并且没有客户抱怨质量或兼容性问题。我只在高分辨率版本看起来不太好16x16的情况下添加其他尺寸。