阅读完这两篇文章 ( 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):覆盖尽可能多的平台和浏览器的最佳方式是什么，推荐的图标尺寸是多少？
能够回答以下两个问题的人将获得赏金: 1. 覆盖尽可能多的平台和浏览器的最佳方式是什么； 2. 每次出现都需要哪些尺寸。
最佳答案
好的你看了http://mathiasbynens.be/notes/touch-icons因为他是建议更改 html5 样板中有关 apple-touch-icons 的人之一
从他的网站上有一个总结如下:
So, which technique to use? It all depends, really.
If Android support is a must, you’ll have to use HTML, and I’d recommend using the last code snippet under the “Different icon sizes” section. If iOS is all you care about, I strongly suggest using the no-HTML approach. If you’re lazy and don’t really care about Android, legacy iOS versions, or performance, I suppose you could just use a single 152×152 icon, name it apple-touch-icon-precomposed.png and place it in the root of your website.
这是他与脚本和所有大小一起使用的测试用例:
http://mathiasbynens.be/demo/touch-icon
这应该回答 1. 和 2. 而且你可以睡得很好，因为他实际上进行了人群测试并涵盖了所有测试用例。
关于cross-browser - 让网站图标跨浏览器/平台工作的最佳方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20037667/