现代浏览器要求 favicon 的 link 标签必须严格匹配 type、sizes、文件格式和服务器 Content-Type，错一个即静默失败；type 决定文件类型绑定，sizes 仅对 PNG/SVG 有效且须与真实尺寸一致，路径须绝对，多个 link 仅首条生效。
现代浏览器不认“差不多就行”的 link 写法，rel="icon" 必须严格匹配 type、sizes、文件真实格式和服务器响应头，错一个就静默失败。
type 和文件格式必须一对一绑定
浏览器用 type 做第一道校验，不是提示，是开关。写错就跳过整条 link：
-
type="image/x-icon"→ 只能配.ico文件（哪怕你放了个 PNG 进去也白搭） -
type="image/png"→ 必须配.png，且必须带sizes（见下一条） -
type="image/svg+xml"→ 必须配.svg，Chrome 110+ 要求显式声明，Safari 当前完全不支持作 favicon - 服务器返回的
Content-Type响应头优先级高于 HTML 中的type：如果 HTML 写了type="image/png"，但 Nginx 返回text/plain，图标一定不加载
sizes 属性只对 PNG/SVG 有效，且格式不能错
sizes 不是 CSS 宽高，是告诉浏览器“这个文件物理像素尺寸是多少”。它对 .ico 无效（.ico 自带多尺寸），但对 .png 和 .svg 是硬性要求：
- 必须写成
sizes="32x32"——x是英文小写字母，不是中文乘号×，也不是px或空格 - 值必须和文件真实尺寸一致：用图片编辑器打开
favicon-32x32.png，确认画布确实是 32×32 像素 - 写
sizes="any"仅适用于type="image/svg+xml"，其他类型写了也无效 -
sizes在link标签里不会被浏览器用于“选图”，只是校验依据；真正决定用哪个图的是href指向的文件本身
路径必须绝对，且文件必须真实可访问
相对路径在子页面下极易 404，浏览器不会 fallback 到根目录找 /favicon.ico，除非你根本没写任何 link：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
href="/favicon-32x32.png"（文件放在网站根目录，如 Nginx 的root目录或 Vite 的public/下） - ❌ 错误：
href="assets/icon.png"（当页面是/blog/post.html时，浏览器会请求/blog/assets/icon.png） - 验证方式：直接在浏览器地址栏打开
https://yoursite.com/favicon-32x32.png，必须返回 HTTP 200 + 正确Content-Type - 注意：多个
link rel="icon"并存时，浏览器只取第一个合法且可加载的，后面的完全忽略 —— 把最兼容的（如.ico）放最前
别把 rel="apple-touch-icon" 和 rel="icon" 混为一谈
iOS/macOS 完全不读 rel="icon"，它只认 rel="apple-touch-icon"。这不是冗余，是平台强制要求：
-
rel="apple-touch-icon"必须单独声明，href指向纯色背景、无透明边距的 PNG（推荐 180×180） - 它不看
sizes是否匹配，但 iOS 会自动加圆角和阴影，所以图标本身要留足边距、禁用光泽效果 - Android PWA 启动图标走的是
manifest.json的icons数组，和link rel="icon"无关 —— 但 HTML 里必须有<link rel="manifest" href="/site.webmanifest">才能触发加载 -
rel="shortcut icon"已被 Chrome 90+、Firefox 84+、Edge 90+、Safari 15+ 全部废弃，写了不仅无效，还可能触发重复请求
最容易被忽略的是服务器响应头和缓存：改完 HTML 后图标还不变，大概率是 CDN 缓存了旧的 /favicon.ico，或者 Nginx 没配置 .ico 文件的 Content-Type。直接清“网站数据”比 Ctrl+Shift+R 有用得多。
