Favicon 生成器。

用一两个字母或你自己的 logo，生成网站或 Web App 需要的所有图标：favicon.ico、苹果触控图标、安卓图标和 maskable 图标、web manifest，以及可以直接放进 HTML 或 Next.js 的代码；上传的 logo 是 SVG 时还会生成 SVG favicon。可以预览浏览器标签页、iPhone 和安卓主屏幕上的效果，再一次打包成 ZIP 下载。全部在浏览器里完成，图片不会上传。

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2F6FEB">

怎么生成 favicon

1. 选择用什么来做。
   • 字母： 输入一到两个字母，选字体和形状（方形、圆角或圆形），设置背景色和字母颜色。想要一套好看的配色，可以直接点我们设计系统里的颜色。
   • 图片： 上传 PNG、JPG、WebP 或 SVG 格式的 logo，调整四周的留白。favicon 可以选透明背景。
2. 看预览：浅色和深色模式下的浏览器标签页、iPhone 主屏幕，以及带圆形遮罩的安卓主屏幕。
3. 下载全部图标，打包成一个 ZIP。
4. 把文件放到网站根目录（大多数项目是 public/），再从页面上复制 HTML 标签或 Next.js 的 metadata 代码到项目里。

ZIP 里有什么

maskable 图标会把字母或 logo 放在图片中间 80% 的范围内，这是安卓永远不会裁掉的安全区。苹果和安卓图标总是带纯色背景，因为主屏幕显示透明效果不好。

用 Codex 把图标加进项目

把下载的文件放进项目，然后让 Codex 接上：

我把新的 favicon 文件放到了 [public/]：favicon.ico、favicon.svg（如果有）、apple-touch-icon.png、安卓和 maskable 图标，以及 site.webmanifest。删掉旧的 favicon 和图标文件，把 head.html 里的标签加到[根布局]里，把 site.webmanifest 里的 App 名称改成[你的 App 名字]，并检查没有遗留其他图标引用。

如果你用的是 Next.js 的 App Router，从工具里复制 metadata 和 viewport 代码，而不是 HTML 标签。

常见问题

这个 favicon 生成器免费吗？

免费。不用注册，没有水印，也没有次数限制。

图片会上传吗？

不会。浏览器在你的设备上绘制每个图标并打包 ZIP。网站只统计工具被用过，从不记录你放进去的内容。

我需要哪些尺寸的 favicon？

几乎所有网站都需要：包含 16、32、48 像素的 favicon.ico，180 像素的苹果触控图标，以及写在 web manifest 里的 192 和 512 像素图标。ZIP 里正好就是这些。如果 logo 是 SVG，再加一个 SVG favicon，让新版浏览器里的图标更清晰，ZIP 里也会包含。

为什么还显示旧的 favicon？

浏览器会把 favicon 缓存很久。先确认项目里的旧文件已经删掉，再用无痕窗口打开网站，或者清除浏览器缓存，就能看到新的。

继续阅读

• SVG 转 PNG把 SVG logo 转成 1 倍、2 倍、4 倍或任意宽度的清晰 PNG。
• 配色生成器从任意颜色生成五个和谐的颜色，锁定喜欢的，复制为 HEX、Tailwind 或 DESIGN.md。
• 给 AI agent 用的设计系统免费的网页和 App 设计系统，附 DESIGN.md 和 shadcn 主题。