HTML页面图标最直接方式是用<link rel="icon">声明于<head>，需绝对或根相对路径、推荐.ico格式及image/x-icon类型；第三方图标库如Font Awesome需引入CSS并用<i>标签调用；SVG内联更可控；多尺寸适配需多次声明不同sizes的link标签。
HTML 页面图标用 <link rel="icon"> 引入最直接
浏览器标签页左上角那个小图标，不是靠 CSS 或 JS 控制的，而是通过 HTML 的 <link> 标签声明。最稳妥的方式是放在 <head> 里，用 rel="icon" 指定路径：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
注意三点：
-
href必须是绝对路径或根相对路径（如/favicon.ico），不能是./favicon.ico—— 否则在子路径页面（如/blog/post.html）会 404 -
type推荐显式写上image/x-icon，避免某些旧浏览器误判 MIME 类型 - 图标文件建议用
.ico格式，兼容性最好；若用.png，需改type="image/png"，且 Safari 对非.ico支持不稳定
用第三方图标库（如 Font Awesome）要在 HTML 中引入 CDN 并用 class 调用
Font Awesome、Remix Icon 这类是「字体图标」或「SVG 图标库」，它们不替换 favicon，而是用来在页面内插入装饰性小图标（比如按钮旁的放大镜、菜单里的齿轮）。调用分两步：
1. 在 <head> 引入库的 CSS（以 Font Awesome 6 为例）：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
2. 在需要位置用 <i> 标签 + 对应 class：
<i class="fas fa-search"></i> <i class="fas fa-user"></i>
常见误区：
- 混淆
fas（solid）、far（regular）、fab（brands）前缀 —— 用错会导致图标不显示 - 没查文档直接写
fa-home，但 Font Awesome 6 默认不包含fa-home（已改为fa-house），命名有 breaking change - 用
<i>标签时未加aria-hidden="true"，影响可访问性
用 SVG 内联方式插入图标最可控，适合少量关键图标
把 SVG 代码直接写进 HTML，不依赖外部资源、无加载延迟、样式可直接用 CSS 控制颜色/大小：
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2L10.828 4.828L7 8.657L10.828 12.485L8 15.314L4.172 12.485L8 8.657L4.172 4.828L8 2Z" fill="currentColor"/> </svg>
要点：
- 用
fill="currentColor"让 SVG 颜色跟随父元素color值，方便统一主题色 - 避免直接复制在线生成器导出的带
style="fill:#000"的 SVG —— 会覆盖 CSS 控制 - 如果图标来自 Figma 或 Illustrator，导出时选「Inline SVG」并手动删掉冗余
id、class和style
favicon 多尺寸适配要靠 rel="icon" 多次声明
现代设备对图标尺寸要求不同：桌面浏览器常用 32×32，Android Chrome 用 192×192，iOS Safari 用 180×180。单靠一个 .ico 文件不够，得叠加声明：
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
关键细节：
-
apple-touch-icon不是rel="icon"，必须单独写，且 iOS 不读取sizes属性，只认文件名后缀或link标签顺序 -
site.webmanifest是 PWA 必需，里面定义icons数组，格式为 JSON，和 HTML 中的<link>是互补关系，不是替代 - 所有图标文件建议提前压缩（用 Squoosh 或 svgomg），否则一个未压缩的 192×192 PNG 可能超 20KB，拖慢首屏
favicon 看似简单，但路径、格式、尺寸、声明顺序、缓存策略任意一环出错，都会导致图标不显示或显示错位——尤其上线后清过缓存还看不到，大概率是路径写成相对路径或服务器没配对 MIME 类型。
