必须将<link rel="icon" href="/favicon.svg" type="image/svg+xml">置于所有图标声明最前面，现代浏览器（Chrome 96+、Firefox 90+、Safari 15.4+）优先选用SVG；后续需按序提供PNG fallback（含sizes属性）、apple-touch-icon（iOS/macOS专用，至少180×180）、PWA manifest预加载（192×192/512×512）及Windows任务栏适配尺寸（48×48/64×64），IE则需单独支持.ico。
直接用多个 <link rel="icon"> 并列声明，而不是只写一个或试图靠 JS 动态加载——浏览器靠解析 <head> 里的这些标签自主选择最匹配的图标，手动干预反而容易失效。
必须把 SVG 放在所有 PNG/ICO 前面
现代浏览器（Chrome 96+、Firefox 90+、Safari 15.4+）优先使用 type="image/svg+xml" 的 <link>，且 SVG 是矢量格式，缩放无损、文件更小。但前提是它得排在最前面，否则浏览器可能跳过它去选后面的 PNG。
-
<link rel="icon" href="/favicon.svg" type="image/svg+xml">—— 必须首行 - 后面再跟 PNG fallback：
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"> - 不要省略
sizes属性：写成sizes="32x32"但图片实际是 64×64，部分 Android WebView 会直接忽略该条目
Apple 设备不认 rel="icon"，必须单独加 apple-touch-icon
iOS 和 macOS 完全忽略标准 rel="icon" 标签，只识别 rel="apple-touch-icon"。而且它不会自动缩放，尺寸错一点就模糊或拉伸。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 至少提供
sizes="180x180"的 PNG：<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180"> - 别加
precomposed：这个属性早已废弃，加上反而干扰 iOS 解析 - 路径必须是 HTTPS 且可公开访问：如果放在本地开发服务器（
http://localhost），Safari 会静默失败，不报错也不显示
Android PWA 启动图标依赖 manifest.json，但 link 可预加载关键尺寸
当网站注册为 PWA 时，Android 启动图标由 manifest.json 中的 icons 数组决定，<link> 不参与最终渲染。但它能提前下载关键图标，避免首次安装时白屏或 fallback 到默认图标。
立即学习“前端免费学习笔记（深入）”；
- 在
<head>加预加载：<link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png"> -
<link rel="manifest" href="/site.webmanifest">必须存在，且site.webmanifest文件中icons字段需包含至少 192×192 和 512×512 两种尺寸 - 别指望仅靠
<link>让 Android 桌面快捷方式显示高清图标——没manifest.json，一切白搭
最容易被忽略的是：Windows 10/11 任务栏固定网站时，会尝试读取 sizes="48x48" 或 "64x64" 的 PNG；而旧版 IE 只认 .ico 文件且必须带 type="image/x-icon"。同一套图标配置，在不同终端上触发的其实是完全不同的解析路径，不是“写全了就自动适配”。
