cross-browser - 让网站图标跨浏览器/平台工作的最佳方式

Question

阅读完这两篇文章 ( 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. 每次出现都需要哪些尺寸。

Answer 1

好的你看了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. 而且你可以睡得很好，因为他实际上进行了人群测试并涵盖了所有测试用例。