Favicon生成器

📖 工具介绍

做网站图标的小工具，不用装设计软件，也不用去记各种尺寸规范。中间是一块实时预览画布，左边改任何参数，右边立刻重画，所见即所得。支持文字和 Emoji 两种内容模式，透明背景和圆角都能调。

字体给了十来种开源中英文字体，字重从 200 到 900 九档，还能叠斜体、下划线、删除线、描边、发光、大小写转换和字距调整。背景色默认跟着你网站的主题色走，文字颜色会按背景亮度自动取深色或浅色，保证任何配色下都看得清。

导出时一次能打包好几种尺寸，16×16 到 512×512 之间任意勾选，格式支持 PNG、ICO、WebP 和 SVG。ICO 会把多个尺寸合成一个真正的多分辨率图标文件，SVG 则是矢量，放大不模糊。

做图标时最容易踩的坑是尺寸和背景。浏览器标签页上只有十六像素见方，塞三个字进去就是一团糊；而 favicon 文件如果背景是白的，放在深色浏览器工具栏上会显得突兀。所以这里把默认背景直接设成网站主题色，并让文字颜色按亮度自动取深色或浅色，省掉这一步的反复试错。

生成完之后别忘了收尾：把 favicon.ico 放在网站根目录，多数浏览器会自动去找它；再在页面 head 中加入 PNG 版本的 link 标签，移动端保存到主屏幕时会用上更高清的那张。改过图标之后如果浏览器还显示旧的，清一下缓存就能看到新的。

圆角这个参数值得单独提一句。同一份图标，圆角设成零是方的，设到百分之五十会变成完整的圆形，中间的取值是常见的圆角矩形效果。不同平台对图标形状的处理不一样，iOS 倾向于给方形图标加圆角遮罩，Android 则常见圆形，所以选一个中间值通常两边都不突兀。

✨ 功能特点

• 文字与 Emoji 两种内容模式，文字可单独调字号、字重、字距与偏移量
• 十几种开源字体可选，字重九档，另有斜体、下划线、双下划线、删除线等样式开关
• 描边、阴影、发光等效果可叠加，做出有层次的图标
• 大小写转换与宽窄字距一键切换，省掉手动调整
• 背景色默认跟随网站主题色，文字色按背景亮度自动取黑白，切主题时同步更新
• 一次导出多种尺寸，PNG、ICO、WebP、SVG 四种格式，ICO 支持多分辨率合成

🚀 使用方式

1. 在文字模式输入品牌缩写或首字母，或切到 Emoji 模式挑一个图形
2. 选字体与字重，需要就打开描边、发光等效果开关
3. 调整背景色与圆角，勾选透明背景可获得无底色图标
4. 在尺寸区勾选需要的尺寸，选择导出格式
5. 点导出按钮下载，把生成的文件放到网站根目录并加上对应的 link 标签

⚠️ 注意事项

• 字体需联网加载：字体文件来自在线字体服务，断网时会退回系统字体，预览与导出外观会有差异
• 小尺寸会丢细节：16×16 下复杂文字和细描边会糊成一团，小图标建议只用一两个字符
• SVG 不含位图：导出 SVG 时它是纯矢量描述，用位图字体渲染的效果在别的机器上可能不一致
• 浏览器兼容性：WebP 在老旧浏览器上支持有限，追求最大兼容请用 PNG 或 ICO
• ICO 合成有上限：一次勾选的尺寸过多会让 ICO 文件变大，通常选 16、32、48 三档就够用