favicon 必须用 声明在 中，href 用绝对或根相对路径，type 推荐 image/x-icon；font awesome v6 需加 fas/far/fab 前缀；内联 svg 应精简属性、设 fill="currentcolor"；iconfont 的 @font-face 中 url() 要按 css 文件位置写相对路径。
favicon 必须用 <link rel="icon"> 声明在
浏览器标签页左上角那个小图标，不是 CSS 控制的，也不是 JS 渲染的，它只认 <link rel="icon"> 标签。漏掉或放错位置，图标就永远不会出现。
-
href必须是绝对路径（/favicon.ico）或根相对路径，不能写./favicon.ico——子页面如/blog/下会 404 -
type强烈建议显式写成image/x-icon，尤其对旧版 IE 和 Safari 更稳；用 PNG 图标时则必须改type="image/png" - 优先用
.ico格式，单文件支持多尺寸（16×16、32×32、48×48），兼容性远超 PNG 或 SVG；若硬要用 SVG favicon，需额外声明sizes="any"且仅 Chrome/Edge 支持良好
Font Awesome 图标类名必须带前缀（fas/far/fab）
v6 起，fa-home 这种单类名已失效。不加前缀，图标渲染为空格或方块——这不是样式问题，是字体文件根本没匹配到字形。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
fas：实心图标（如<i class="fas fa-user"></i>） -
far：线框图标（如<i class="far fa-user"></i>） -
fab：品牌图标（如<i class="fab fa-github"></i>），fa-twitter在 v6 中已弃用，必须用fab fa-twitter - CDN 地址必须是 v6+，例如
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css；v5 的链接即使能加载，也会缺失大量新图标
内联 SVG 不要直接粘贴原始设计稿代码
从 Figma 或 Illustrator 导出的 SVG 常带冗余命名空间、版本号、无用属性，不仅体积大，还可能触发浏览器解析异常或样式冲突。
- 删掉
xmlns:xlink、version、xml:space等非必要属性 - 保留
viewBox（如viewBox="0 0 24 24"），这是响应式缩放的基础；width/height可删，由 CSS 控制更灵活 - 把
fill改成fill="currentColor"，这样图标颜色可继承父元素color，无需额外写 CSS - 避免在
<svg></svg>上设style="display: inline-block"——默认就是 inline，加了反而干扰垂直对齐
本地引入 iconfont 时，@font-face 的 url() 是相对 CSS 文件路径的
很多人把 iconfont.css 放进 /css/ 目录，字体文件放进 /fonts/，却在 CSS 里写 url('iconfont.woff2')，结果 Network 面板全是 404——因为浏览器按 CSS 文件位置解析路径，不是 HTML 页面位置。
- 正确写法是
url('../fonts/iconfont.woff2')（假设 CSS 在/css/，字体在/fonts/） - 别用绝对路径如
url('/fonts/iconfont.woff2')，本地开发服务器（如 vite dev）和生产部署路径常不一致，极易断裂 - 检查 DevTools → Network → Filter “font”，确认
.woff2文件返回 200；若显示 blocked，可能是广告屏蔽插件或 CSP 策略拦截 - Computed 样式中看
font-family是否最终生效为'iconfont'，如果 fallback 到sans-serif，说明字体未加载或被父级 CSS 覆盖
href 路径、url() 路径、CDN 版本、类名前缀，这四点任何一处断链，图标就彻底消失，且控制台往往不报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
