favicon生效需解决路径、缓存、格式三问题；根目录放favicon.ico最省心，自定义路径须显式声明并配对type属性；更新需破缓存；ios/pwa图标须单独配置。
直接在 里加一行 <link rel="icon"> 就能生效，但多数人卡在路径错、缓存没清、格式不匹配这三处——不是代码不会写，是浏览器静默失败，连控制台都不报错。
favicon.ico 必须放根目录吗
不必强制，但强烈建议。浏览器会自动请求 /favicon.ico，哪怕你 HTML 里一个 <link> 都没写。如果文件真在根目录，它大概率就显示了；如果放错位置（比如 /assets/icon.ico），又没显式声明，那图标一定不出现。
- 根目录最省心：
/favicon.ico→ 只需确保文件存在，不用改 HTML - 自定义路径必须显式声明：
<link rel="icon" href="/assets/icon.ico" type="image/x-icon"> - 相对路径（如
./icon.ico）在子页面（如/blog/post.html）下会变成/blog/icon.ico，404 是常态 - 服务器返回 404 不影响页面功能，但 favicon 就没了——且 Network 面板里可能被你忽略
type 属性为什么不能省
浏览器靠 type 判断怎么解析图标文件，不是靠后缀名。写错或漏掉，图标加载就静默失败。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
.ico文件必须配type="image/x-icon"，写成image/png或不写，Chrome/Firefox 都不认 -
.png图标必须写type="image/png"；Safari 对非.ico支持偏弱，尤其在标签页缩小时 -
.svg要用type="image/svg+xml"，但注意：IE 完全不支持，Android Chrome 低版本也有渲染问题 - 不要混用：
href="/icon.png" type="image/x-icon"这种组合必失败
换了图标但还是旧的？别改 HTML，先破缓存
favicon 缓存比 JS/CSS 激进得多，本地改完几乎肯定看不到效果，这不是配置问题，是浏览器策略。
- 最有效：在
href后加版本号，比如href="/favicon.ico?v=2"，每次更新改数字 - Chrome 用户可访问
chrome://settings/clearBrowserData，勾选“图像和文件缓存”再清 - 开发者工具 Network 标签页，右键已加载的
favicon.ico请求 → “Clear browser cache”，然后 Ctrl+Shift+R 硬刷 - 如果用了 Service Worker，它可能也缓存了
/favicon.ico，得去 Application → Service Workers → unregister
多尺寸和 iOS/PWA 图标不是“锦上添花”，而是必须分开处理
<link rel="icon"> 只管浏览器标签页，iOS 添加到主屏幕、安卓 PWA 安装界面、微信分享预览图，全都不读它。
- iOS 需单独加：
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">（PNG，无透明边框） - PWA 必须配
manifest.json，其中icons字段列明192x192和512x512PNG，不能复用favicon.ico - 多尺寸
<link rel="icon">如sizes="32x32"仅对高 DPI 屏幕有实际意义，普通桌面浏览器基本只取第一个匹配项 - 测试时别只看自己电脑：拿 iPhone 无痕窗口点“添加到主屏幕”，拿安卓 Chrome 点“安装应用”，才是真实场景
最容易被忽略的是：图标加载失败时浏览器完全不提示。你看到的空白小方块，背后可能是路径 404、MIME 类型错、Service Worker 拦截、甚至服务器没配 .ico 的正确响应头——得手动 curl https://yoursite.com/favicon.ico 看状态码和 Content-Type，不能只信眼睛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
