现代浏览器严格校验rel="icon"的type、sizes、绝对路径及服务器content-type，任一不匹配即静默忽略；必须type与文件格式精确对应（如.ico配image/x-icon、png配image/png且sizes="32x32"），文件真实可访问并返回200状态码与正确mime类型。
只写 <link rel="icon"> 不够，现代浏览器会静默忽略——必须配对 type、sizes（如适用）、绝对路径，且服务器返回的 Content-Type 必须严格匹配文件真实类型。
为什么写了 rel="icon" 却不显示图标
浏览器根本不会报错，但也不会 fallback：只要 href 404、type 错、sizes 格式不对（比如写成 "32×32" 或 "32x32px"），整条 <link> 就被跳过。
- 打开浏览器地址栏，直接访问
https://yoursite.com/favicon-32x32.png—— 必须返回200状态码 +Content-Type: image/png - Nginx/Apache 需显式配置 MIME 类型：
types { image/svg+xml svg; image/x-icon ico; }，否则.svg可能被当成text/plain - 本地开发用
./favicon.png可能暂时有效，但上线后必须改/favicon.png（根路径），否则/blog/post.html页面会去请求/blog/favicon.png
type 和 sizes 怎么配才合法
不是“尽量匹配”，而是硬性校验。浏览器按 HTML 中顺序加载，只取第一个完全合法的项，后面的全丢弃。
-
type="image/x-icon"→ 只能用于.ico文件；sizes可省略（.ico 自带多尺寸），若写了也必须是"16x16 32x32"这种空格分隔格式 -
type="image/png"→ 必须带sizes="32x32"（注意是英文小写x，不能是中文 × 或加px）；图片实际尺寸必须真为 32×32 像素 -
type="image/svg+xml"→ Chrome 110+ 支持，Safari 完全不支持作 favicon，且无法指定sizes；别把它放最前面，否则 Safari 用户永远看不到图标
iOS 和 PWA 图标根本不走 rel="icon"
标签页图标和主屏幕图标是两套机制，混用等于白配。
- iOS 主屏幕添加快捷方式时，只看
<link rel="apple-touch-icon" href="/apple-touch-icon.png">；建议尺寸 180×180，PNG 格式，纯色背景（系统会自动加圆角和阴影） - PWA 安装横幅、Android 启动屏依赖
manifest.json中的icons字段（如192x192、512x512PNG），跟rel="icon"没半点关系 - 不要在
里塞rel="shortcut icon"—— 已废弃，写了无效，还可能触发重复请求
缓存比你想象得更难清
浏览器对 favicon 的缓存策略极其激进：即使你替换了文件内容，只要 URL 不变，就可能沿用旧缓存数小时。硬刷新（Ctrl+Shift+R）通常无效。
- 临时验证：给 URL 加版本参数，如
href="/favicon.ico?v=2" - 彻底清除：Chrome 访问
chrome://settings/clearBrowserData→ 勾选「Cached images and files」→ 清除 - 关键点：修改
<link>标签本身（比如改href）不会触发浏览器重新拉取图标，必须刷新整个页面，且确保 Network 面板里看到新请求返回 200
最容易被忽略的是：图标加载失败时浏览器完全沉默，控制台无警告，Network 面板里甚至可能连请求都不发——你得主动 curl 路径、查响应头、换 iOS/Android/Windows 多端实测，而不是只信自己电脑上看到的样子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
