← 返回工具箱
★ Favicon生成器

生成模式

📖 Favicon 相关知识

什么是 Favicon?

Favicon(Favorite Icon)是网站的小图标,显示在浏览器标签页、书签栏、任务栏等位置。一个好的 Favicon 能提升品牌识别度,让用户在多个标签页中快速找到你的网站。

推荐尺寸与用途

尺寸用途格式
16 × 16浏览器标签页(标准)ICO / PNG
32 × 32Windows 任务栏、标签页ICO / PNG
48 × 48Windows 桌面快捷方式ICO
64 × 64高分辨率标签页、通用PNG
180 × 180iOS 主屏图标(apple-touch-icon)PNG
192 × 192Android PWA 图标PNG

如何在网站中引用?

将生成的文件放置在网站根目录,并在 HTML <head> 中添加以下代码:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

SVG Favicon 的优势

现代浏览器支持 SVG 格式的 Favicon,SVG 是矢量格式,无论缩放到任何尺寸都保持清晰,且支持暗色模式下的动态颜色切换(通过 CSS prefers-color-scheme)。

💡 最佳实践:同时提供 favicon.ico(兼容旧浏览器)和 favicon.svg(现代浏览器),优先级由 HTML link 标签顺序决定,SVG 写在后面会被现代浏览器优先使用。