工具 03 · P0
Favicon 生成器
拖入一张方形原图，在真实的标签页背景上预览效果，然后打包成 ZIP 下载——全程在浏览器里生成。
在真实标签页背景上的效果
把方形图片拖到这里，或使用上传按钮
建议 512×512 或更大 · PNG / JPG / WebP / SVG
源图
生成 16 / 32 / 48 / 150 / 180 / 192 / 512 px 的 PNG、打包 16/32/48 的 ICO、site.webmanifest 与 browserconfig.xml。全部在本地渲染 —— 不上传任何文件。
ZIP 内容
- 尚未生成任何内容
link 标签
怎么用
- 01
上传一张方形原图
用 512×512 或更大。方形图片会从中心裁剪，所以让标记居中，四周留一点余量。
- 02
设置名称与颜色
名称会写进 site.webmanifest，两个颜色分别作为 theme_color 和 background_color。在浅色、深色和品牌色的标签页背景上预览效果。
- 03
把文件放进站点根目录
生成的 link 标签用的是绝对路径，例如 /favicon-32x32.png，所以把 ZIP 内容传到网站根目录，并保持文件名不变。
常见问题
▸ 该从什么样的图片开始？
512×512 或更大的方形 PNG 或 SVG。更小的图会被放大到 512 的 PWA 图标，看起来发虚。生成器会从中心裁成正方形，所以让标记居中并留一点边距——16px 时标签页会裁掉最外面几个像素。
▸ ZIP 里包含哪些文件？
favicon.ico（打包 16、32、48）；16、32、48、150、180、192、512 的 PNG；apple-touch-icon.png；android-chrome-192x192.png；android-chrome-512x512.png；mstile-150x150.png；site.webmanifest；browserconfig.xml；以及含可直接粘贴的 link 代码的 head-tags.html。如果原图是 SVG，也会一并包含原始矢量文件。
▸ 我的图片会被上传吗？
不会。缩放、ICO 打包和 ZIP 组装都在浏览器里用 Canvas 和原生 JavaScript 完成，不会发送到服务器，关闭标签页即全部丢弃。
▸ 2026 年了，为什么还要放 favicon.ico？
因为它是默认回退：页面没有任何声明时，浏览器、feed 阅读器和爬虫都会请求 /favicon.ico，不少工具也仍在读取它。而且它一次请求就带上三个旧版尺寸，能缩短关键路径。
▸ 替换文件后，为什么旧 favicon 不更新？
浏览器对 favicon 缓存很激进，常常缓存好几天，而且缓存键就是 URL。在新标签页直接打开 /favicon.ico 并强制刷新，或在 link 标签里加上查询串如 /favicon.ico?v=2 强制重新抓取。