浏览器标签页无图标，主因是/favicon.ico未被正确加载：根目录缺失该文件、路径错误、缓存顽固、MIME类型不匹配（需image/x-icon）四者缺一即失效。
直接在 HTML 文件的 <head> 里加 <link rel="icon"> 标签，不是拖文件、不是改 CSS、也不是用编辑器插件——所有“可视化操作”都无效。
为什么浏览器标签页没图标？先看控制台有没有 GET /favicon.ico 404
这是最常见现象，说明浏览器自动去根目录找 favicon.ico，但文件不存在或路径错。它和你是否写了 <link> 无关，是浏览器默认行为。解决办法只有两个：
- 把
favicon.ico文件放到网站根目录（和index.html同级），名字必须是favicon.ico，不能是icon.ico或favicon.png - 如果不想放根目录，就**必须**在
<head>中显式声明，且href要写绝对路径（以/开头），比如/assets/favicon.ico，不能写assets/favicon.ico - 本地用
file://打开 HTML 文件时，GET /favicon.ico会失败——这是浏览器安全限制，必须起一个本地 HTTP 服务（如 Python 的python3 -m http.server）才能测试
<link rel="icon"> 的 type 和 sizes 怎么配才不白写
浏览器按 type 和 sizes 匹配资源，写错就忽略。关键规则：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
type="image/x-icon"只认.ico文件；写成type="image/png"却指向.ico，图标空白 -
sizes属性只对type="image/png"或type="image/svg+xml"有效；对.ico加sizes="32x32"没用，也不报错，但纯属冗余 - 多个
<link rel="icon">并存时，Chrome 优先选 PNG（如果sizes匹配当前设备 DPR），IE/Edge Legacy 只读第一个type="image/x-icon" - 要支持 iOS 添加到主屏幕，必须单独加
<link rel="apple-touch-icon">，且sizes="180x180"必须准确，否则 Safari 静默跳过
改了图标却还是旧的？缓存比代码更难搞
favicon 是浏览器缓存最顽固的资源之一，哪怕你清了普通缓存，它可能还在磁盘深处蹲着。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 无痕窗口打开网站——最快速验证方式
- 临时改文件名，比如从
favicon.ico改成favicon-v2.ico，并同步更新href，绕过所有缓存 - 服务器响应头里加
Cache-Control: no-cache仅用于调试，上线后应设为长期缓存（如max-age=31536000） - 检查服务器是否返回了正确的 MIME 类型：Nginx/Apache 要配置
.ico对应image/x-icon，否则 Chrome 直接拒收
真正卡住人的从来不是怎么写那行 <link>，而是路径写对了没、文件名拼错了没、缓存清干净没、服务器 MIME 返回对没——四者缺一，图标就消失。
