Favicon 生成器

输入 1–4 个文字、emoji 或上传图片，生成 16/32/48/64/128/180/192/512 多尺寸 PNG favicon，支持圆角、纯色或透明背景，并给出 <link rel="icon"> 写法。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

文字或 Emoji

背景

主题色

圆角 (%)22

内边距 (%)8

或上传图片

上传后会忽略上面的文字，直接用图片生成各尺寸图标。

各尺寸预览

尺寸与体积

16×16—

32×32—

48×48—

64×64—

128×128—

180×180—

192×192—

512×512—

使用方式

图标路径前缀

<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">

本工具输出 PNG 序列，不打包成 .ico 二进制（现代浏览器已普遍支持 <link rel="icon" type="image/png">）。

这个工具能做什么

没有设计资源时，用一两个文字或一个 emoji 快速生成一整套 favicon：16/32/48/64/128/180/192/512 八个尺寸的 PNG。
给新项目搭骨架：直接复制工具生成的 <link rel="icon"> 片段，粘贴进 <head> 就能用，不必再逐个手写标签。
做侧项目或内部工具时省掉 .ico 打包步骤：现代浏览器都能直接吃 PNG favicon，180×180 那份还能当 iOS 主屏图标。
对照不同圆角、内边距与主题色的效果，选出在浏览器标签页里最清楚的那一版（小尺寸下细节会糊掉）。

示例

输入

文字 U，主题色 #6366f1，圆角 22%，内边距 8%，纯色背景

输出

16×16：字号 10px、圆角 4px、内边距 1px、前景色 #ffffff
32×32：字号 19px、圆角 7px、内边距 3px
48×48：字号 29px、圆角 11px、内边距 4px
512×512：字号 310px、圆角 113px、内边距 41px

导出的是 PNG 序列，不打包 .ico；图标文件名形如 favicon-32x32.png，180 尺寸在 <link> 片段里自动写成 apple-touch-icon。

常见问题

为什么只输出 PNG，不生成 .ico？

因为现代浏览器都支持 <link rel="icon" type="image/png">，PNG 还能保留透明与多尺寸，比单文件 .ico 更清晰。只有必须兼容 IE11 之类的老环境时，才需要额外用别的工具把 16/32 的 PNG 合成为 .ico。

前景色是怎么定的？能自己改吗？

前景色由主题色的相对亮度自动决定：亮底用 #111827（近黑），暗底用 #ffffff，保证对比度。它跟随主题色联动，不单独设置，所以换个主题色就能拿到合适的前景色。

小尺寸下文字看不清楚怎么办？

16×16 只够放 1 个字形，塞 2–4 个字必然糊。建议小图标用单个字母或 emoji，圆角别超过 30%、内边距别超过 10%，留出足够的笔画空间；多字只适合 180 以上的大尺寸。

可以上传自己的图片吗？

可以。上传图片后会忽略上面的文字，直接用这张图生成八个尺寸；图片只在你自己的浏览器里通过 Canvas 缩放，不会上传到任何服务器。

一次能输入几个字符？

最多 4 个「用户感知的字符」，emoji、肤色修饰、国旗、组合符都算一个。空输入或超过 4 个会直接提示，不会生成半成品图标。

关键词：favicon generatorfavicon图标生成icopng faviconemoji faviconapple touch icon网站图标

这个工具能做什么

示例

常见问题

同类工具