HTML5中添加favicon需在中用声明，推荐同时使用/favicon.ico和/favicon.svg双格式，并将.ico文件置于根目录以避免404。
HTML5 页面里怎么加 favicon
直接在 里写 <link rel="icon"> 就行，但浏览器兼容性和实际生效效果取决于路径、格式和声明方式。不写或写错位置，Chrome/Firefox 可能会悄悄去请求 /favicon.ico，而你根本没放——结果控制台一堆 404。
favicon 的三种常见写法及适用场景
不是所有写法都等效，不同浏览器对 rel 值和 type 的容忍度不一样：
-
rel="icon"：最通用，支持所有现代浏览器，推荐作为基础声明 -
rel="shortcut icon"：IE 旧版遗留写法，现在仍可保留（尤其要兼容 IE11），但不是必须 -
rel="apple-touch-icon"：仅用于 iOS Safari 添加到主屏幕时的图标，和桌面 favicon 无关，别混用
建议至少保留这两行：
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
前者兼容老浏览器（包括 Edge Legacy），后者让支持 SVG 的浏览器（Chrome 92+、Firefox 98+）加载更清晰的矢量图标。
立即学习“前端免费学习笔记（深入）”；
favicon.ico 文件必须放在网站根目录吗
不一定，但强烈建议这么做。原因很实际：
- 很多爬虫、RSS 阅读器、甚至某些 CDN 缓存策略，会默认向根路径发起
GET /favicon.ico请求 - 如果页面里没写
<link>，浏览器也会 fallback 到这个路径找图标 - 如果你把
favicon.ico放在/assets/img/favicon.ico，又忘了加<link>，就只剩 404
所以最佳实践是：根目录放一个 favicon.ico，再在 HTML 里显式声明一次，双保险。
SVG favicon 的坑和注意事项
虽然 favicon.svg 看起来很现代，但容易踩几个隐性问题：
- 必须带
type="image/svg+xml"，否则 Chrome 当普通 PNG 处理，报 MIME 类型错误 - SVG 文件里不能有外部引用（比如
<image xlink:href="..."></image>）、JS 或 CSS，否则加载失败 - 部分旧版 Safari（iOS 15.4 之前）不支持 SVG favicon，会忽略该行，所以仍需保留
.ico回退 - 图标尺寸建议设为
256×256，<svg></svg>标签需明确指定viewBox，例如：viewBox="0 0 256 256"
简单有效的 SVG favicon 示例（保存为 favicon.svg）：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256"> <rect width="256" height="256" fill="#4a6fa5"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="white" font-size="160">F</text> </svg>
别小看这一行 <link>，它既不是装饰也不是可选项——它是页面身份的一部分。路径写错、类型漏写、格式不兼容，都会导致图标不显示，而且往往查半天才发现是 href 多了个斜杠或者服务器没配对 MIME 类型。
