Favicon 站点图标生成器

怎么用

1. 选择一张图片（或直接拖到卡片上），所有尺寸立刻出现——没有「生成」按钮，看到的就是将要下载的。
2. 还没有 logo？切到「文字 / Emoji」输入一两个字符：取色器设背景色，文字色会按对比度自动在黑/白里挑一个。
3. 下载资源包解压到站点根目录，把复制到的 <link> 代码贴进 <head>，刷新站点——标签页图标就出现了。

示例

logo.png · 512×512，形状「圆角」

favicon.ico（16/32/48）
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png（180）
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
snippet.html

同一个源图 + 同一组选项，导出的 PNG 与 ZIP 是逐字节相同的（压缩包时间戳固定为 1980-01-01），可以直接提交进仓库做比对。换形状只改四角裁切，不重画内容。

范畴、局限与常见问题

• 不导出 SVG：16px 下能看清的 SVG 需要手工简化路径；把位图包成 SVG、或用系统字体的文本冒充矢量，都只是「看起来像矢量」。想要 SVG 就保留你自己的 .svg，和这套 PNG 一起放进站点。
• 图片只做等比适配、不裁切：非正方形的 logo 会留下透明边，需要构图请先用图片工具处理（站内的图片尺寸调整 / 格式转换）。
• 透明图标由平台自己补底：iOS 会在 apple-touch-icon 后面加一层背景，部分 Android 启动器也会。想要可控的底色，请用「文字 / Emoji」，或先把底色加进源图。
• site.webmanifest 只写图标，不写 name / short_name：站点名工具不知道，不替你猜。解压后自己补两行即可（name 是可选字段，缺省时浏览器用页面标题）。
• favicon.ico 内含 16 / 32 / 48（不含 64 / 128）：覆盖现代浏览器与 Windows；需要更多档位请用 PNG。
• 动图 GIF / WebP 只取第一帧——favicon 本身也不支持动画。
• 字符图标用的是你设备的系统字体：macOS、Windows、Linux、手机上字形不同，导出的 PNG 固定为当前设备的样子。这也是本工具不做字体选择的原因。
• 不抓取网址、不做线上检测：本工具不接受网址，也无法检查你部署后的 favicon 是否生效。部署完打开自己的站点看标签页即可。
• 单文件上限 20 MB、单边 8000 px；源图小于 180 px 时，大尺寸图标是放大得到的，可能偏糊。
• 不裁剪、不抠图、不批量、不保存历史：刷新即回空态（不落存储、不进 URL）。

相关工具

图标做好之后，大家通常接着要用的工具。