Favicon 制作教程：一张图片生成 favicon.ico、苹果触控图标和 HTML 代码
一句话答案
准备一张至少 512×512 的正方形图片，打开 Favicon 生成器上传，下载 favicon.ico 和各尺寸 PNG 放到网站根目录，点“复制 HTML 代码”粘贴到网页 head 里即可。
Favicon 是浏览器标签页、书签栏和手机桌面上显示的网站小图标。不同位置需要的尺寸不同：标签页用 16–48 像素，iPhone 添加到主屏幕用 180 像素，安卓和 PWA 用 192、512 像素。Favicon 生成器 用一张图一次生成全套文件和 HTML 代码。
操作步骤
- 准备图片：用至少 512×512 的正方形图片，Logo 四周留少量边距；非正方形会自动居中裁剪。
- 上传：打开 Favicon 生成器，点击或拖入图片，下方立即显示 16 到 512 像素的预览。
- 下载文件：点“favicon.ico”下载 ico 文件，再点各尺寸预览下载 PNG（180 像素的文件名为 apple-touch-icon.png）。
- 上传到网站：把这些文件放到网站根目录。
- 粘贴代码：点“复制 HTML 代码”，粘贴到网页的 head 标签里。
⭐ Favicon 生成器
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
生成的文件和用途
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 内含 16、32、48 像素 | 浏览器标签页、老版本浏览器 |
| icon-32.png 等 | 16 / 32 / 48 像素 | 标签页、书签栏 |
| apple-touch-icon.png | 180 像素 | iPhone、iPad 添加到主屏幕 |
| 192、512 像素 PNG | 192 / 512 像素 | 安卓桌面、PWA 应用图标 |
设计小建议
- 16 像素只有一个指甲盖大小，细字和复杂图案会糊成一团，用 Logo 的图形部分或一个字母即可；
- 图案四周的空白太多会显得很小，先用 裁剪图片白边 去掉；
- 原图太小时先准备高清版本，或用矢量 Logo（见 图片转 SVG）导出大图。
换了图标浏览器还是旧的
浏览器会长时间缓存 favicon。上传新文件后，可以在 HTML 代码的文件名后加版本号（例如 favicon.ico?v=2），或者清除浏览器缓存后再看。
常见问题
favicon 用什么尺寸的图片？
建议用至少 512×512 的正方形图片，工具会自动缩小生成 16 到 512 像素的各个尺寸。
favicon.ico 里包含哪些尺寸？
包含 16、32、48 像素三个尺寸，浏览器会自动选用合适的那个。
改了 favicon 为什么不生效？
浏览器缓存了旧图标。给文件地址加版本号，例如 favicon.ico?v=2，或清除缓存后刷新。
图片会上传吗？
不会。图标在浏览器本地生成。