favicon 是浏览器标签页等位置显示的小图标，必须添加以避免404请求和警告；最简方式是将 favicon.ico 放根目录并在 head 中用 引入。
favicon 是什么，为什么必须加
favicon 是浏览器标签页、书签栏、地址栏左侧显示的小图标，尺寸通常为 16×16 或 32×32 像素。它不是装饰——缺少 favicon 时，Chrome、Edge 等现代浏览器会默认发起一次 /favicon.ico 请求，404 后仍会重试，造成无意义的网络请求和控制台警告（如 GET https://example.com/favicon.ico 404）。
最简有效的添加方式：用 link 标签 + .ico 文件
这是兼容性最好、最被广泛识别的方式，适用于所有 HTML 页面（包括静态页、PHP、Jekyll 等）：
- 把图标文件命名为
favicon.ico，放在网站根目录（即与 index.html 同级）
- 在 HTML 的
- 不需要
shortcut、apple-touch-icon 等额外属性，基础场景下一条就够了
link 标签 + .ico 文件
这是兼容性最好、最被广泛识别的方式，适用于所有 HTML 页面（包括静态页、PHP、Jekyll 等）：
- 把图标文件命名为
favicon.ico，放在网站根目录（即与index.html同级） - 在 HTML 的
中加入： - 不需要
shortcut、apple-touch-icon等额外属性，基础场景下一条就够了
注意：路径必须以 / 开头（绝对路径），否则子目录页（如 /blog/post.html）可能加载失败。
想支持高清屏或更多设备？加一组 png 变体更稳妥
仅靠 .ico 在 Safari iOS、PWA 安装、Windows 任务栏等场景可能不生效。推荐补充：
- 准备一张
favicon-32x32.png 和 favicon-192x192.png（推荐尺寸：32×32、192×192、512×512）
- 放在
/static/ 或 /assets/ 目录下（例如 /static/favicon-32x32.png）
- 在
-
sizes 属性必须写准确，否则部分浏览器（尤其是 Android Chrome）会忽略该条目
常见踩坑点：路径、格式、缓存全得对上
- 浏览器强缓存 favicon，改了图标但没变？强制清空浏览器缓存，或临时用隐身窗口测试
- 图标是 JPG 或 WebP？不行。type="image/x-icon" 只认 .ico；type="image/png" 才认 .png
- 用了相对路径如 href="favicon.ico"？子页面会拼成 /blog/favicon.ico，404
- 图标文件实际是 PNG 却声明为 image/x-icon？解析失败，显示空白
- 没加 rel="icon"，只写了 rel="shortcut icon"？现代浏览器已不依赖 shortcut，可删
favicon-32x32.png 和 favicon-192x192.png（推荐尺寸：32×32、192×192、512×512）/static/ 或 /assets/ 目录下（例如 /static/favicon-32x32.png）sizes 属性必须写准确，否则部分浏览器（尤其是 Android Chrome）会忽略该条目type="image/x-icon" 只认 .ico；type="image/png" 才认 .png
- 用了相对路径如 href="favicon.ico"？子页面会拼成 /blog/favicon.ico，404
- 图标文件实际是 PNG 却声明为 image/x-icon？解析失败，显示空白
- 没加 rel="icon"，只写了 rel="shortcut icon"？现代浏览器已不依赖 shortcut，可删
真正起作用的从来不是“加了多少行”，而是路径是否可达、MIME 类型是否匹配、尺寸是否声明正确——三者错一个，图标就消失。
