如何将网站图标添加到 HTML
将网站图标添加到普通的 HTML 页面只需一行更改 - 但现代、完整的设置是六行，涵盖 iOS、Android、深色模式和 PWA 安装。
每个浏览器都遵循的单一标签是 <link rel="icon" href="/favicon.ico">。将 favicon.ico 放到您的站点根目录下，您就完成了 80%。
剩下的 20% — apple-touch-icon、PNG 变体、支持深色模式的 SVG 以及 webmanifest — 是默认图标与精美品牌体验的区别所在。
工作原理
- 1
生成您的网站图标包
使用 FetchFavicon 包生成器 — 生成您需要的每个文件以及可粘贴的标记。
- 2
将文件拖放到站点根目录
favicon.ico、apple-touch-icon.png、android-chrome-192/512.png、site.webmanifest。
- 3
将代码片段粘贴到 <head> 中
六个 <link> 标签 + 一个 <meta name="theme-color">。
立即尝试
获取 HTML 片段
Favicon 生成器常见问题
<link> 标签去哪里了？+
在 <head> 内，任何地方 — 只要它们出现在 </head> 之前，顺序并不重要。
我需要 .ico 和 PNG 吗？+
是的。 .ico 是通用后备； PNG 在高 DPI 屏幕上呈现最清晰的效果。
深色模式呢？+
发送一个 SVG 变体，该变体在其 <style> 块中嵌入了偏好颜色方案媒体查询。