Favicon(Favorite Icon)是网站的小图标,显示在浏览器标签页、书签栏、任务栏等位置。一个好的 Favicon 能提升品牌识别度,让用户在多个标签页中快速找到你的网站。
| 尺寸 | 用途 | 格式 |
|---|---|---|
| 16 × 16 | 浏览器标签页(标准) | ICO / PNG |
| 32 × 32 | Windows 任务栏、标签页 | ICO / PNG |
| 48 × 48 | Windows 桌面快捷方式 | ICO |
| 64 × 64 | 高分辨率标签页、通用 | PNG |
| 180 × 180 | iOS 主屏图标(apple-touch-icon) | PNG |
| 192 × 192 | Android PWA 图标 | PNG |
将生成的文件放置在网站根目录,并在 HTML <head> 中添加以下代码:
现代浏览器支持 SVG 格式的 Favicon,SVG 是矢量格式,无论缩放到任何尺寸都保持清晰,且支持暗色模式下的动态颜色切换(通过 CSS prefers-color-scheme)。
favicon.ico(兼容旧浏览器)和 favicon.svg(现代浏览器),优先级由 HTML link 标签顺序决定,SVG 写在后面会被现代浏览器优先使用。