分开的favicon和android主屏幕图标

Question

参考这些关于疯狂的全面写作是最喜欢的图标:

http://www.jonathantneal.com/blog/understand-the-favicon/

https://mathiasbynens.be/notes/touch-icons

http://en.wikipedia.org/wiki/Favicon

Android现在开始使用<link rel="icon" .. />它的主屏幕图标的语法,这与fav图标语法相同.

有没有人有神秘的大小组合和订购能够使用单独的主屏幕图标定位android并仍然保持跨浏览器兼容性.

例如,我们的fav图标具有透明背景,我们更喜欢主屏幕的专用图标.

Answer 1

回答

按此顺序构建并声明以下图标:

• 192x192 PNG图标(专为Android设计)
• 194x194 PNG图标(经典的favicon设计,透明)
• 32x32 PNG图标(经典的favicon设计,透明)

注意:Android Chrome 可能会将 192x192图标用于主屏幕和书签,但v37似乎不会这样做.

您可以使用此favicon生成器创建可用作模板的代码和图片.由于它不支持Android的差异化图片,因此您需要手动添加194x194图片.完全披露:我是这个网站的作者.

说明

作为参考,Android Chrome使用192x192图标

<link rel="icon" sizes="192x192" href="/favicon-192x192.png">

我已经对Android Chrome图标做了一些实验.结论:

• Android Chrome确实使用了192x192图标.
• 如果找不到192x192图标,则会查找较低分辨率的图标:191x191.否则,190x190.其他...
• 它不使用192x192以上的任何东西.例如,如果您提供16x16图标和194x194图标,则Chrome会选择16x16图标,即使194x194图标听起来是更好的选择.

关于其他浏览器:据我所知,没有其他浏览器明确选择192x192图标.好.否则,这将是一个阻塞问题.有两种政策需要处理:

• 有些浏览器会选择一些低清PNG图标(例如,Windows Firefox使用32x32 PNG图标).
• 某些浏览器选择具有最高清晰度的PNG图标(例如,IE 11).

有了这些信息,游戏现在可以为他们想要的两种浏览器提供,所以没有人(但Android Chrome)会采用特殊的192x192图标.因此上面的答案.

关于订单的一点额外的扭曲.通常,它是无关紧要的,因为浏览器应该仅根据其大小选择图标.除了Firefox,它选择最后声明的图标.