一键生成 favicon 套件:文字或上传图,输出 16/32/180/512 px PNG。
- 本地处理
- 分类 图片
- 适合 发布前把图片尺寸、格式或体积调到合适范围。
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> <meta name="theme-color" content="#06e6d7">
这个工具能做什么
100% 本地运行的 favicon 套件生成器。可选两种玩法:打字模式 输入 1–3 个字符,挑背景色、文字色、字重、圆角度,实时画出 4 个尺寸的 favicon;上传模式拖一张 PNG / JPG / SVG / WebP 进来,工具自动 cover 裁切到 4 个尺寸。输出永远是现代站点 的标准套件:16×16 / 32×32 给浏览器标签页,180×180 给 iOS "添加到主屏幕"的 apple-touch-icon,512×512 给 Android Chrome 和 PWA manifest。预览下方直接给出对应的 `<link rel="icon">` 代码片段,文件名跟"下载"按钮产出的完全一致,贴进 `<head>` 就能用,不用自己 rename。文件不上传不出浏览器,网络层面 只有你主动点"下载"那一下。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 16 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 图片 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Favicon 生成器 适合怎么用
适合在网站、店铺、社媒、表单上传或素材交付前处理图片。
适合处理的图片任务
- 发布前把图片尺寸、格式或体积调到合适范围。
- 分享照片前检查 EXIF、GPS 和其他隐藏元数据。
- 不上传私有素材,也能生成可发布的图片变体。
图片检查项
- 先按真实展示尺寸改图,再压缩。
- 转格式后检查透明度、动画和色彩配置是否变化。
- 图片可能含隐私时,先检查或清理元数据。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
业余项目上线了,标签页还顶着框架默认图标
Next.js 或 Vite 写完了,浏览器标签页却还是那个通用地球或 Vite 的闪电。打上产品名的头两个字母,挑一个品牌色当背景, 点下载,把 4 个 PNG 加代码片段丢进 public 目录。两分钟内 标签页就认得出是你的站,不用开 Photoshop,也不用找 .ico 转换器。
iOS 用户把你的 PWA 加到主屏,图标却是一片空白
少了 apple-touch-icon,iOS Safari 会直接截一张页面缩图, 在主屏上糊成一团。上传 512px 的 logo,拿工具产出的 180x180 apple-touch-icon.png,加上那行 rel="apple-touch-icon"。 下次别人点「添加到主屏幕」,拿到的是一张清晰方图,圆角 由 iOS 自动补,和旁边的原生 App 摆在一起也不违和。
200 页文档站要一个统一图标,又懒得开设计软件
内部工具或文档站,很少有人愿意为一个 16px 方块专门开设计 软件。挑两个字母的字母组合,圆角调到 25%,配个深色背景, 一个在拥挤标签栏里 16x16 还认得清的 favicon 就好了。同一 套字母组合连 Android 512px manifest 图标一起出,安装弹窗 也跟着统一。
给现成站点换 logo,又不想碰服务器
市场部下午四点甩来一张新 SVG logo,旧 favicon 满站都是。 把 SVG 拖进来,工具自动 cover 裁切到 4 个尺寸,按代码片段 里用的同样路径把文件覆盖掉。因为文件名跟你早就引用的一致, 只换字节、不动 HTML,新标识下次强制刷新就生效。
常见踩坑
只放一个 32x32 PNG。Android 和 iOS 会把它放大,主屏图标就糊了;180 和 512 两个尺寸也一起导出,这工具一次就出全。
上传贴边带文字的 logo。缩到 16x16 文字全糊成一团,喂一个加粗的标识或 1 到 3 个字母的字母组合,别喂整段品牌字。
忘了对齐文件名。代码片段写的是 apple-touch-icon.png,你却存成 apple-touch-icon-180.png,iOS 直接 404;严格用「下载」按钮产出的文件名。
隐私说明
全部在你浏览器的 canvas 上跑。你打的字母、挑的颜色、上传的 任何图片都不出这个标签页,不发往任何服务器。唯一的网络请求 是你自己点「下载」时触发的文件保存。这里没有任何输入写进 URL,所以哪怕把页面链接分享出去,也不会泄露你填过的内容。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。