什么是 favicon.ico?
一文讲清经典网站图标:它是什么、该用哪些尺寸以及如何制作。
favicon.ico 是浏览器从网站根目录请求的小图标文件,会显示在标签页、书签和地址栏中。
快速回答
简而言之:
favicon.ico 是一个多尺寸 ICO 文件,应包含 16×16, 32×32, 和 48×48 图标,以确保在所有浏览器、任务栏和桌面快捷方式中都能正常显示。
favicon.ico 尺寸
单个 favicon.ico 文件可打包多个尺寸,以下是你需要的尺寸。
| 尺寸 | 用途 |
|---|---|
| 16×16 | 浏览器标签页 |
| 32×32 | 任务栏 |
| 48×48 | 桌面快捷方式 |
favicon.ico vs PNG vs SVG
保留 favicon.ico 以兼容旧环境,再添加 PNG 和 SVG 以支持现代浏览器。
| 格式 | 最适合 |
|---|---|
| favicon.ico | 旧浏览器和 Windows;单个文件包含 16×16、32×32 和 48×48 |
| PNG | 适合标签页和书签的清晰现代图标 |
| SVG | 可缩放矢量图标,支持深色模式 |
如何添加 favicon.ico
将 favicon.ico 放在网站根目录,并在 HTML 中添加以下标签:
<link rel="icon" href="/favicon.ico" sizes="any">常见的 favicon.ico 错误
- ICO 文件内只保存了一个尺寸
- 把 PNG 文件直接改名为 favicon.ico
- 忘记将 favicon.ico 放在根目录
- 上传了低分辨率或非正方形的原图
常见问题
favicon.ico 是什么意思?
favicon.ico 是经典的“收藏夹图标”文件。它是一个小型 ICO 图像,浏览器会从网站根目录加载它并显示在标签页、书签和地址栏中。
favicon.ico 应包含哪些尺寸?
favicon.ico 应包含 16×16、32×32 和 48×48 图标。旧浏览器使用 16×16,而 Windows 任务栏和快捷方式会使用更大的尺寸。
2026 年还需要 favicon.ico 吗?
需要。现代浏览器更偏好 PNG 和 SVG,但 favicon.ico 仍是兼容性最好的回退方案,尤其是在 Windows 和旧浏览器上。