移动Favicons

Question

所以我正在做一些关于移动网站用户体验的研究,并且偶然发现了整个favicon.ico完全过时的事实.

环顾四周,我已经聚集在一起,我需要各种新的图像/图标,以便在各种移动设备上正确呈现"favicon",如android,iphone和windows phone.

现在的问题是,我有以下代码:

<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.所以我想知道我能够删除什么以及我应该保持在"大多数"移动设备上正确呈现它.

大多数使用移动设备的其他网站仅使用少数上述代码,分别是: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">

这对我来说当然更好,因为代码/图像的数量已显着减少.只要它适用于大多数现代移动设备,我很高兴.

结合这个"备忘单",本教程和Philippe B的帮助,我设法得到了它.

无论哪种方式,感谢所有的帮助,并希望在未来几年,他们将为favicon做出适当的标准!

Answer 1

要在没有大量图标的情况下尽可能多地处理平台,您基本上需要四个图标:

• 一个PNG图标,适用于现代桌面浏览器.
• 适用于移动浏览器的Apple Touch图标(当然还有iOS Safari,还有Android Chrome和许多其他版本;还有Mac OS Yosemite Safari).
• favicon.ico,对于传统浏览器(想想IE 9,8,......).
• Windows 8和10上IE的磁贴图标.

这给了我们:

<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以这种方式命名并放在网站的根目录中,因为这是Apple的惯例.如果您放置它或以不同方式命名,您可能会注意到服务器日志中的404错误.没有什么可担心的,但如果你能避免它们......
• favicon.png是32x32.不是太小也不是太大.你可能会把它做大,但没有显着的好处.
• favicon.ico在您的网站的根目录中,因为这是来自IE的约定.例如,Yandex搜索引擎希望它在这里.
• 在这个例子中,我使用了mstile-144x144.png没有browserconfig.xml.我这样做是因为它看起来更容易(这只是两行HTML和一张图片;不涉及额外的XML文件).但这种选择是有争议的.的msapplication-TileImag和msapplication-TileColor由运8.0引入METAS/IE 10已经替换为browserconfig.xml在Win 8.1/IE 11.这browserconfig.xml是一个长期解决方案.另外,如果您将此文件放在站点的根目录中,则不必在HTML中声明它:IE 11将按惯例(" favicon.ico"样式)找到它.请注意,Coast by Opera选择msapplication-TileImag书签.现在做出你的选择!

最后一点:您在问题中引用的大代码块是由RealFaviconGenerator生成的.作为这个工具的作者,你的问题让我难过;-)