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" .. />它的主屏幕图标语法与收藏图标语法相同。

有没有人知道神秘的大小组合和顺序，以便能够使用单独的主屏幕图标定位 android 并仍然保持跨浏览器兼容性。

例如，我们最喜欢的图标有透明背景，我们更喜欢主屏幕的专用图标。

Answer 1

回答

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

• 192x192 PNG 图标(专为 Android 设计)
• 194x194 PNG 图标(经典图标设计，透明)
• 32x32 PNG 图标(经典网站图标设计，透明)

注意:Android Chrome 可能对主屏幕和书签使用 192x192 图标，尽管 v37 似乎没有这样做。

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

解释

供引用，Android Chrome uses a 192x192 icon

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

我做了 some experiments about the Android Chrome favicon .结论:

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

关于其他浏览器:据我所知，没有其他浏览器明确选择 192x192 图标。好的。否则，那将是一个阻塞问题。有两个策略需要处理:

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

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

关于订单的一点额外变化。通常，它是无关紧要的，因为浏览器应该只根据图标的大小来选择图标。 Except for Firefox, which picks the last declared icon .