必须将置于所有图标声明最前面，现代浏览器（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 动态加载——浏览器靠解析 里的这些标签自主选择最匹配的图标，手动干预反而容易失效。
必须把 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"。而且它不会自动缩放，尺寸错一点就模糊或拉伸。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 至少提供
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 到默认图标。
- 在
加预加载：<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"。同一套图标配置，在不同终端上触发的其实是完全不同的解析路径，不是“写全了就自动适配”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
