什么是图标制作器?

图标制作工具让您为应用、网站和网页图标创建简洁专业的图标。在网格画布上组合形状、字母和颜色,还能为底色加上双色渐变,然后以多种尺寸(16×16 到 512×512)导出 PNG、SVG、多尺寸 .ico,或一键打包整套 favicon ZIP。

底图可选圆形、方形或圆角方形,搭配自定义的背景色和前景色,中央叠加一个字母或一个内置符号(对勾、星星、箭头、爱心、加号)。微调字号和偏移让图形居中,再一键导出六种标准尺寸,从 16×16 的网站 favicon 到 512×512 的 PWA 清单图标都能搞定。

使用方法

  1. 第一步 — 选择一个基础形状(圆形、方形、圆角方形)并设定背景颜色。
  2. 第二步 — 添加字母、符号或简单形状作为前景图层。调整前景颜色、大小和位置。
  3. 第三步 — 在多种尺寸下预览效果,然后导出 PNG(16、32、48、128、256、512 像素)、SVG、.ico,或一键打包完整的 favicon ZIP 包,同时附带可直接粘贴的 HTML 代码片段。

何时使用

  • 做副业项目时给网站加一个 favicon,不想打开 Figma 也不想花钱买图标包。
  • 原型阶段给 Android 或 iOS 应用做一个临时占位图标,正式图待美工出。
  • 为个人网站或 GitHub 头像做一个带首字母的品牌色块。

结果

一位开发者为待办事项应用制作网页图标:蓝色圆角方形背景(#3B82F6)配白色对勾符号,导出 32×32 PNG 用于浏览器标签页和 512×512 PNG 用于 PWA 清单。

常见问题

网站 favicon 到底需要哪些尺寸?
至少要一张 32×32 PNG 给桌面浏览器标签页,加一张 180×180(或 192×192)给 iOS 主屏和 Android 快捷方式。如果是 PWA,还需要 512×512 给 manifest。「导出全部尺寸」按钮一次性生成整套。
导出 SVG 还是 PNG?
SVG 缩放永远清晰,适合在应用内多种尺寸下使用的图标,比如侧边栏 logo。PNG 是 favicon、应用商店、任何不接受矢量格式的平台所必需的。导出菜单两种都提供。
能用自己的图片或符号,而不是内置那几个吗?
可以。把叠加方式切到「图片」模式,上传 PNG、JPG、SVG 或 WebP——图片会按你选的形状裁切,导出前还能缩放、移动和旋转。想要简单标记,「字母」模式也接受任意单个字符,包括粘贴进来的表情。要做完整自家 logo,直接传透明 SVG 并把背景设为透明即可。
为什么导出小尺寸时字母看起来不居中?
字体的视觉中心和几何中心不一定重合。有下加部的字母(g、p、y)或较高的大写字母,要稍微偏移一两个像素才显得平衡。导出前用 X 偏移和 Y 偏移滑块微调即可。
圆角方形和 iOS、Android 系统的形状一致吗?
这是一个通用的圆角方形,接近 iOS 的样式。安卓(圆形、squircle、水滴形)和 iOS 都会对图标做自适应蒙版裁剪,所以设计时按满版输出即可,系统会按当前的形状自行裁切。

相关工具