Bra*_*roy 7 favicon icons cross-platform cross-browser
在阅读了这两篇文章(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.每次出现都需要哪些尺寸.
好的你看了http://mathiasbynens.be/notes/touch-icons,因为他是那些提出关于apple-touch-icons的html5 boilderplate变化的人之一
从他的网站上总结如下:
那么,使用哪种技术？这一切都取决于,真的.
如果必须使用Android支持,则必须使用HTML,我建议您使用"不同图标大小"部分下的最后一个代码段.如果您只关注iOS,我强烈建议您使用无HTML方法.如果你偷懒不真正关心的Android,iOS版的传统版本,还是性能,我想你可以只使用一个152×152的图标,将其命名为苹果触摸图标precomposed.png并将其放置在你的网站的根.
这是他使用脚本和所有大小的测试用例:
http://mathiasbynens.be/demo/touch-icon
这应该回答1.还有2.加上你可以睡得好,因为他实际上进行了人群测试并且覆盖了所有测试用例.