单独的 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" .. /> 语法，这与最喜欢的图标语法相同。

有没有人有神秘的尺寸组合和命令能够使用单独的主屏幕图标定位 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.