可靠的 HTML 网站图标并不依赖某一个神奇标签，而是一小组可访问的文件和放在 head 中的链接。以下步骤可覆盖现代标签页、旧客户端和移动端快捷方式，无需堆积历史版本。
准备文件
先准备一个在很小尺寸下仍清晰可辨的正方形符号。将 favicon.ico、favicon.svg、apple-touch-icon.png、site.webmanifest，以及清单引用的 PNG 文件，放入对外映射到域名根目录的公共文件夹。
例如 /favicon.svg 是从域名根目录开始的绝对路径，因此在 /products 或 /blog/article 页面上仍然正确；而 favicon.svg 可能被解析为相对于当前页面的路径。
将元素添加到 head
先用 rel icon 和 type image/svg+xml 声明 SVG，再用 rel icon 和 sizes any 声明 ICO。为 iOS 添加 rel apple-touch-icon，为网页应用安装添加 rel manifest。
type 必须与实际返回的文件匹配。不要把 PNG 改名为 .ico：文件内容和文件头必须采用 ICO 格式。
| 用途 | 关系 | 文件 |
|---|---|---|
| 现代浏览器 | icon | /favicon.svg |
| 兼容性 | icon | /favicon.ico |
| iOS 主屏幕 | apple-touch-icon | /apple-touch-icon.png |
| 网页应用 | manifest | /site.webmanifest |
部署时确保路径正确
部署后，直接打开每个文件的 URL。响应必须是状态成功的图片或清单，不能是登录页，也不能是用误导性状态码返回的 404 HTML 页面。
如果网站部署在子目录下，请调整路径或公共资源基础路径。在开发者工具中检查最终页面：浏览器应请求预期的 URL，且不会重定向到其他主机。
验证结果
禁用缓存后重新加载，检查生成的 DOM 中的 link 元素。随后测试标签页、书签，并在适用时用真实设备测试添加到主屏幕。
搜索结果中的网站图标还受搜索引擎规则和抓取计划影响。因此，图标在浏览器中可见，并不意味着搜索结果会立即更新。
一手资料
常见问题
网站图标元素要放在 body 中吗？
不要。描述图标和清单的 link 元素应放在文档 head 中。
根目录下有 favicon.ico 就够了吗？
它是有用的后备文件，但不会描述 Apple Touch 图标或可安装应用的清单图标。请为这些用途分别声明相应格式。
为什么路径要以 / 开头？
它表示从域名根目录开始，防止嵌套页面在自己的文件夹中查找图标。