如何制作 Favicon
制作 favicon 很简单:在上方添加你的 Logo(或输入一个字母、表情符号),调整外观,然后下载 ZIP。预览会显示图标在各个实际尺寸下的效果,以及在浅色和深色模式下浏览器标签页中的效果。
- 选择来源。PNG 或 SVG 格式的 Logo 效果最好;其他图片会被放入正方形中。没有 Logo?可以在彩色背景上使用字母或表情符号。
- 设置外观。选择背景颜色或透明背景、形状(圆角方形、方形或圆形),以及图片周围的边距。
- 下载。下载全部图标会给你完整的压缩包;仅下载 favicon.ico则只下载这一个文件。
Favicon 压缩包里有什么
| 文件 | 尺寸 | 用途 |
|---|---|---|
favicon.ico | 16、32 和 48 px | 所有浏览器、Windows、搜索结果 |
favicon-16x16.png, favicon-32x32.png | 16 和 32 px | 浏览器标签页和书签 |
apple-touch-icon.png | 180 px | iPhone 和 iPad 主屏幕 |
android-chrome-192x192.png, -512x512.png | 192 和 512 px | Android 主屏幕、已安装的网页应用 |
site.webmanifest | - | 为 Android 和网页应用指定图标名称和颜色 |
favicon-html.txt | - | 可粘贴到页面中的标签 |
Apple 图标始终使用纯色背景和直角:iPhone 会自动处理圆角,并把透明区域显示为黑色。
把 Favicon 添加到你的网站
- 解压压缩包,把文件上传到网站根目录(与首页放在一起),这样通过
yoursite.com/favicon.ico就能打开图标。 - 把 HTML 标签(见上方,以及
favicon-html.txt)粘贴到页面的<head>中。 - 清除缓存后重新加载。浏览器会保留旧的 favicon,所以用隐私窗口检查最快。
在 WordPress 中,你也可以在"自定义"里把 512 px 图标设为站点图标,其他尺寸会自动生成。
让 Favicon 更清晰的小技巧
- 尽量简化。在 16 像素下,复杂的 Logo 会变得模糊。请使用 Logo 中的图形或首字母,而不是带文字的完整 Logo。
- 注意对比度。标签页会随浏览器主题变浅或变深,请同时查看两种预览。
- 留意边距。边距越小,图标在标签页中越大;稍微多留一点边距,在手机主屏幕上更好看。
需要其他尺寸的单个 .ico 文件?图片格式转换可以把任意图片保存为 ICO。
常见问题
如何制作 favicon?
在本页的框中添加你的 Logo 或任意正方形图片,也可以输入一个字母或表情符号。调整背景、边距和形状,然后下载包含所有图标尺寸的 ZIP 压缩包,以及可粘贴到网站中的 HTML 代码。
favicon 需要哪些尺寸?
包含 16、32 和 48 像素版本的 favicon.ico 适用于浏览器和 Windows;180 像素的 apple-touch-icon 适用于 iPhone 和 iPad;192 和 512 像素的图标适用于 Android 和已安装的网页应用。压缩包中包含所有这些图标。
如何把 favicon 添加到我的网站?
把 ZIP 中的文件上传到网站根目录,让 favicon.ico 可以通过 yoursite.com/favicon.ico 打开。然后把 HTML 标签粘贴到页面的 head 部分。
为什么新的 favicon 没有显示?
浏览器会长时间缓存 favicon。你可以直接打开 favicon 的地址、刷新页面,或者使用隐私窗口试试。搜索结果中的图标可能需要几周才会更新。
可以用文字或表情符号制作 favicon 吗?
可以。选择"字母或表情符号",输入一两个字符并选好颜色即可。没有 Logo 时,这是快速得到简洁图标的好办法。
我的图片会被上传吗?
不会。所有图标都在你的浏览器中生成,图片不会离开你的设备。