最可靠方式是在中用标签引入favicon，需指定type和sizes属性，提供多尺寸.ico与.png文件，确保https路径、正确mime类型及无缓存干扰。
直接在 里加 <link rel="icon"> 就能生效，但多数人卡在图标格式、路径或浏览器缓存上，不是代码写错，而是没踩对点。
favicon 必须是 .ico 格式？不一定，但得看浏览器
老浏览器（如 IE）只认 type="image/x-icon" + .ico 文件；现代浏览器（Chrome/Firefox/Edge）支持 .png、.svg，但必须显式声明 type 和尺寸。不写 type 或格式不匹配，图标就静默失败。
-
.ico最稳妥：16×16 和 32×32 多尺寸打包进一个文件，兼容性最好 -
.png可用但需写明type="image/png"，且推荐提供sizes="32x32" -
.svg支持缩放，但 Safari 直到 v17 才稳定支持，且必须带type="image/svg+xml" - 别用
.jpg或未声明type的任意图片——浏览器会忽略
rel="icon" 还是 rel="shortcut icon"？用前者
rel="shortcut icon" 是 IE 时代的遗留写法，现在所有主流浏览器都支持更标准的 rel="icon"。混用或同时写两个没意义，反而可能触发旧逻辑。
- ✅ 正确写法：
<link rel="icon" href="favicon.ico" type="image/x-icon"> - ❌ 过时写法：
<link rel="shortcut icon" href="favicon.ico">（缺type，部分环境不加载） - ⚠️ 不要这样：
<link rel="icon shortcut icon" ...>（无效值，被当作rel="icon"处理，但语义混乱）
路径写错是最常见的“不显示”原因
图标文件找不到，浏览器连请求都不会发——开发者工具 Network 标签里搜 favicon 看不到任何请求，基本就是路径问题。
- 根目录放
favicon.ico？那就直接写href="/favicon.ico"（开头加/表示绝对路径） - 和 HTML 同级？写
href="favicon.ico" - 放在
assets/icons/下？写href="assets/icons/favicon.png"，注意是相对当前 HTML 文件的位置，不是相对于服务器根目录 - 用在线图标？
href="https://example.com/logo.svg"没问题，但确保 CORS 允许跨域加载
改了代码却还是旧图标？清缓存比重写代码还重要
浏览器对 favicon 缓存极强，尤其当它曾加载失败过一次，后续即使你修好路径，它也可能继续返回 304 或直接读本地缓存。
- 强制刷新：Ctrl+Shift+R（Windows）或 Cmd+Shift+R（macOS）
- 隐身窗口测试：避免干扰
- 手动清 favicon 缓存：Chrome 地址栏输入
chrome://settings/clearBrowserData→ 勾选“缓存的图像和文件” - 临时加版本号绕过缓存：
href="favicon.ico?v=2"（仅调试用，上线前删掉）
真正麻烦的不是写那一行 <link>，而是图标生成是否含多尺寸、路径是否经 HTML 当前位置计算、以及浏览器到底有没有真去请求它——这三处任一出错，都会让图标彻底消失，且无报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
