必须手动在中声明标签，最通用写法是，路径须为绝对路径，type属性增强旧浏览器兼容性；支持PNG、SVG等现代格式时需注意浏览器兼容差异及多尺寸适配。
在 index.html 中添加 <link rel="icon"> 标签
浏览器默认不会自动加载 favicon，必须手动在 里声明。最通用写法是：
<link rel="icon" href="/favicon.ico" type="image/x-icon">注意路径以
/ 开头表示根目录，避免相对路径出错；type 属性虽非必需，但显式声明能减少旧版浏览器兼容问题。
支持现代格式（如 .png、.svg）时的写法差异
.ico 兼容性最好，但不支持透明渐变和高倍屏缩放；用 .png 或 .svg 需额外处理：
-
<link rel="icon" href="/favicon.png" type="image/png">—— 简单替换，但 Safari 15 之前不支持.svg作为 favicon - 若同时提供多尺寸，可加
sizes属性：<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"> - Chrome / Edge 支持
<link rel="icon" href="/favicon.svg" type="image/svg+xml">，但 Firefox 目前仅支持部分 SVG 特性（不能含 script 或外部引用）
常见错误：图标不显示的几个硬坑
不是代码写错，而是部署或缓存导致的“假失败”：
- 浏览器强缓存
favicon.ico：即使你替换了文件，旧图标仍可能显示；强制刷新无效，需清空浏览器 favicon 缓存（Chrome 地址栏输入chrome://settings/clearBrowserData→ 勾选“图像和文件缓存”） - 服务器未正确返回
200：访问https://yoursite.com/favicon.ico直接返回404或403，说明路径不对或服务器配置拦截了该路径 - 图标尺寸不符合规范：.ico 文件应至少包含
16x16和32x32两个尺寸；.png 推荐用32x32或64x64，否则在桌面 PWA 或书签中可能模糊 - 没有放在网站根目录：很多工具（如某些 CMS、CDN）只认
/favicon.ico，即使你在 HTML 里写了其他路径，它们也可能忽略
验证是否生效的最快方式
别等部署完再检查：
立即学习“前端免费学习笔记（深入）”；
- 本地测试时，确保用
http://localhost:xxxx/打开，而不是双击打开file://协议 —— 后者多数浏览器禁用 favicon 加载 - 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 搜索
favicon，看是否发起请求且返回200 - 右键标签页 → “将此页面添加到书签”，观察书签图标是否更新；这是比地址栏更敏感的验证场景
/favicon.ico 的隐式拦截，尤其是用了 Nginx 或 Cloudflare 的时候——它们常默认屏蔽该路径或返回空响应，得单独配一条 location = /favicon.ico { try_files $uri =200; } 规则。 
