Android Chrome优先选用Apple Touch Icon而非SVG图标如何解决？

试试以下几个针对性的配置调整，能解决Android Chrome优先加载Apple Touch Icon的问题：

• 明确SVG图标的属性优先级：给SVG的<link>标签同时加上rel="icon shortcut icon"和type="image/svg+xml"，让浏览器清晰识别这是通用图标且为SVG类型。同时把Apple Touch Icon的rel严格限定为apple-touch-icon，不要混入icon相关值。
• 添加媒体查询声明适配性：给SVG的<link>加上media="(prefers-color-scheme: light), (prefers-color-scheme: dark)"，明确它支持明暗配色切换，强化浏览器对它的适配能力认知。
• 保持SVG viewBox的正确性：你当前的viewBox="0 0 160 160"已经符合规范，确保SVG内部没有多余的缩放或定位问题即可。

示例配置代码 #

<!-- 优先加载的SVG Favicon -->
<link rel="icon shortcut icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: light), (prefers-color-scheme: dark)">

<!-- Apple Touch Icon 仅用于苹果设备特定场景 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

原理说明 #

Android Chrome对Apple Touch Icon的优先级判定存在特殊逻辑，当通用图标（rel="icon"）和Apple Touch Icon同时存在时，容易误将后者作为常规favicon加载。通过明确SVG的通用图标属性、类型及适配能力，同时严格限定Apple Touch Icon的作用范围，就能引导浏览器优先选择SVG作为常规页面图标，Apple Touch Icon只会在苹果设备添加到主屏幕等特定场景生效。

内容的提问来源于stack exchange，提问作者superjos