Reference
详解 rel="icon" Link 标签
页面 <head> 里的 <link rel="icon"> 标签告诉浏览器该用哪个文件作为 favicon。href 指向图像，type 给出它的 MIME 类型，sizes 列出文件所含的像素尺寸，好让浏览器挑选最佳匹配。你可以包含多个 icon link 标签（每个尺寸或格式一个），浏览器会选择最合适的那个。
这个标签携带的四样东西
rel="icon" 声明了关系：这个文件是该文档的一个图标。href 是图像的路径。type 是 MIME 类型（image/x-icon、image/png、image/svg+xml），它让浏览器可以跳过一个它用不了的格式。sizes 列出文件所含的尺寸，比如 "32x32"，或者对可缩放的 SVG 用 "any"。
浏览器读取 head 里每一个 icon link，然后挑选最适合它正在绘制的位置的那个：标签页、书签、更大的磁贴。这就是为什么一个真实的 head 会携带好几个这样的标签、而非一个，也是为什么它们全都属于 head、放在 body 之前。
一套现代的 icon link 组
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />五个标签，各自面向不同的使用方。浏览器会忽略它看不懂的那些，并从其余中挑选最佳的。
每个属性的作用
| 属性 | 用途 |
|---|---|
| rel | 关系：favicon 用 "icon"，iOS 用 "apple-touch-icon" |
| href | 图像文件的路径 |
| type | MIME 类型，好让浏览器能跳过它无法渲染的格式 |
| sizes | 文件所含的尺寸，例如 "32x32"，或对 SVG 用 "any" |
rel="icon" 常见问题
icon link 上我需要 type 属性吗？
它可选但有用。type 让浏览器无需先下载就能跳过一个它用不了的格式。值得加在 PNG 和 SVG 的 link 上，加在其他地方也无害。
我可以有不止一个 icon link 标签吗？
可以，而且你通常应该这样做。声明多种尺寸和格式，能让每个位置挑选最贴近的匹配，而不是为标签页向下缩放一张大图、再为主屏幕把它放大。
link 标签放在哪里？
放在文档 <head> 里。浏览器在解析 head 时就会请求 favicon，所以放在 body 里的标签到得太晚，赶不上首次加载。