Android 上的 Chrome 更喜欢苹果触摸图标而不是 SVG favicon

Question

我正在本地非 HTTPS vitejs 开发服务器的网页中测试 favicon。

这是与favicon相关的部分：

<link
  rel="icon"
  href="/favicon-32x32-light.png"
  sizes="32x32"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="icon"
  href="/favicon-32x32-dark.png"
  sizes="32x32"
  media="(prefers-color-scheme: dark)"
/>
<link
  rel="apple-touch-icon"
  href="/apple-icon-180x180-light.png"
  sizes="180x180"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="apple-touch-icon"
  href="/apple-icon-180x180-dark.png"
  sizes="180x180"
  media="(prefers-color-scheme: dark)"
/>
<link
  rel="icon"
  href="/favicon.svg"
  type="image/svg+xml"
  sizes="any"
/>

SVG 有一个像

viewBox="0 0 160 160"

这样的 viewBox，不确定这是否会影响浏览器选择算法。它包含一个

<style>

标签来支持两种配色方案：

.inside {
  fill: green;
}
@media (prefers-color-scheme: dark) {
  .inside {
    fill: red;
  }
}

在 Windows Chrome（以及 Firefox、Edge）中，仅请求并应用 SVG 图标：

在 Android Chrome (v129.0.xxx) 中，同时请求 SVG favicon 和 apple touch 图标，然后应用 apple touch 图标（SVG 具有不同的颜色，以便被发现）：

我的理解是Android Chrome支持SVG作为favicon，它的选择算法应该选择SVG。所以我想我的页面设置一定有问题。这是MDN：

如果有多个 ，浏览器将使用它们的媒体、类型和大小属性来选择最合适的图标。如果多个图标同样合适，则使用最后一个。如果后来发现最合适的图标不合适，例如因为它使用了不受支持的格式，则浏览器将继续使用下一个最合适的图标，依此类推。

realfavicongenerator.net 上的

post 解释说，Android Chrome 也依赖于苹果触摸图标，基于宽度/高度计算。但 SVG 可以根据需要缩放，所以我的理解是它应该优先。

我尝试过的事情，但没有运气：

更改
• <link>

  标签的顺序

删除 Apple Touch 图标或 SVG 或两者中的
• sizes

   属性

使用不同的
• <link>

   属性复制 SVG 

  media

  ，以实现暗/亮方案

使用大于 180x180 的 viewBox 创作放大的 SVG，例如200x200
通过 HTTPS 公开本地站点

让它选择 SVG 的唯一方法是删除两个苹果触摸图标

<link>

 标签。此时，在 32x32 PNG 和 SVG 之间，Android Chrome 选择了 SVG。

这是一个显示问题的代码和框，设置也更简单（没有深色/浅色变体）：

https://s3cnww.csb.app/

有谁知道如何让 Android Chrome 选择 SVG？ TA

Answer 1

当浏览器需要在多个 Favicon 中进行选择时，您无法选择首选 Favicon。每个浏览器都有自己的实现，正如

Robert Longso所建议的，您唯一的解决方案是直接联系每个浏览器以检查它是否是预期的行为。

例如，以下是使用

apple-touch-icon

 的 Safari 浏览器的规则： 

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/ uid/TP40002051-CH3-SW4.