本文详细介绍如何在 HTML 中通过 标签正确添加 favicon（网站图标），包括使用本地文件与 GitHub 远程图片的两种方式、推荐格式与尺寸、MIME 类型设置及常见注意事项。
本文详细介绍如何在 html 中通过 `` 标签正确添加 favicon（网站图标），包括使用本地文件与 github 远程图片的两种方式、推荐格式与尺寸、mime 类型设置及常见注意事项。
为网页添加 favicon（即浏览器标签页左侧显示的小图标）是提升品牌识别度和用户体验的重要一步。最标准的做法是在 HTML 文档的
区域中插入 标签，例如：<link rel="icon" type="image/x-icon" href="favicon.ico">
其中：
- rel="icon" 表示该资源为网站图标；
- type="image/x-icon" 明确指定 MIME 类型（.ico 文件专用）；
- href 指向图标的绝对或相对路径。
✅ 推荐实践：
- 优先使用 .ico 格式（兼容性最佳，支持多尺寸嵌入）；
- 推荐尺寸为 16×16 或 32×32 像素；
- 将 favicon.ico 放在网站根目录下，并使用相对路径 ，浏览器会自动识别，无需写全路径。
? 若需引用 GitHub 上的图片（如 PNG）：
GitHub 仓库中的原始图片需通过 Raw URL 访问（点击文件 → “Raw” 按钮，复制地址）。例如：
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/username/repo/main/favicon.png">
⚠️ 注意事项：
- GitHub 的 raw 链接可能受 CORS 限制，部分浏览器（尤其 Safari）可能拒绝加载；生产环境建议将图标托管在自有域名或 CDN；
- 若使用 PNG/SVG，type 属性需对应更新：image/png 或 image/svg+xml；
- 现代浏览器支持多种 rel 值，如 rel="apple-touch-icon"（iOS 主屏图标）或 rel="manifest"（PWA 清单），可按需补充。
? 小贴士：修改 favicon 后，浏览器常缓存旧图标，请强制刷新（Ctrl+F5）或清空缓存验证效果。也可在 Chrome 开发者工具的 Application → Clear storage 中一键清除站点数据。
