Favicon（全称 "favorite icon"，即"收藏夹图标"）是显示在浏览器标签页中、紧挨页面标题的小图标。它是网站最具辨识度的元素之一，但很多开发者却忽视了它。
Favicon 出现在哪些地方？
Favicon 出现的地方比你想象的要多：
- 浏览器标签页 — 最常见的位置。每个标签页都会显示网站的 Favicon。
- 书签栏 — 用户收藏你的网站后，Favicon 帮助他们快速找到。
- Google 搜索结果 — 自 2019 年起，Google 在移动端搜索结果中显示 Favicon，现在桌面端也支持了。
- 浏览历史 — 浏览历史使用 Favicon 来快速识别网站。
- PWA 主屏幕 — 如果你的网站被安装为 PWA，Favicon 就是应用图标。
为什么 Favicon 很重要
1. 品牌识别
设计精良的 Favicon 强化品牌印象。想想 Google 的 "G"、Twitter 的小鸟、YouTube 的播放按钮 — 即使只有 16×16 像素，也一眼就能认出。
2. 用户体验
当用户打开 20 多个标签页时，Favicon 是区分不同网站的唯一方式。没有 Favicon 的标签页会显示默认空白图标 — 容易被关掉、容易被遗忘。
3. SEO 影响
Google 在搜索结果中展示 Favicon。缺少 Favicon 或质量低劣会让你的搜索结果看起来不专业，降低点击率（CTR）。研究表明，有 Favicon 的网站点击率可提升高达 20%。
4. 信任与可信度
专业的 Favicon 表明有人在乎细节。虽然是小事，但它对整体质量印象贡献很大。
Favicon 文件格式
| 格式 | 最适合 | 浏览器支持 |
|---|---|---|
| .ico | 向后兼容，可包含多个尺寸 | 所有浏览器 |
| .png | 现代浏览器，清晰渲染 | 所有现代浏览器 |
| .svg | 可缩放，支持暗黑模式 | Chrome、Firefox、Edge（Safari 不支持） |
| .gif | 动画 Favicon（少见） | 有限支持 |
常见 Favicon 尺寸
- 16×16 — 浏览器标签页（经典尺寸）
- 32×32 — 浏览器标签页（高清/Retina 屏）
- 180×180 — Apple Touch Icon（iOS 主屏幕）
- 192×192 — Android Chrome
- 512×512 — PWA 启动画面
如何开始
获取现有网站 Favicon 最快的方法是使用专用工具。Mzu favicondl 只需输入域名即可下载多种尺寸的 Favicon — 无需注册。
如果需要从零开始制作 Favicon，可以使用我们工具页的图片转 Favicon 转换器，从一张图片生成所有需要的尺寸。
最简 Favicon 配置
最简方式：在 HTML 的 <head> 中添加这两行：
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">这覆盖了 99% 的使用场景。更完整的配置请参考我们的详细 HTML 指南。