favicon生成器

使用方法

1. 在图标内容里填 1～4 个字符。汉字、字母、emoji 都行，示例是汉字「柳」。超过 4 个会被拒绝，因为 16 px 画布上挤 5 个字必然糊成一团。
2. 选背景色与前景色，都写成 6 位或 3 位 HEX。示例是 #2563eb 配 #ffffff，这组对比度约 5.17:1，16 px 下也能分辨。
3. 选档位。默认 3 档（16 / 32 / 48），需要高分屏和PWA 就选 5 档。16 与 32 始终包含在内，不会被裁掉。
4. 点「生成图标」（或在任一单行框按 Enter）重画。三个预览画布按真实像素尺寸显示，带棋盘格底，方便看清透明区。
5. 「下载 favicon.ico」拿走多尺寸容器，「下载 32px PNG」单独拿一档，「复制嵌入代码」把 head 标签与 manifest 一起带走。

这个favicon生成器能解决什么问题

一是一次拿到多档尺寸，不用开三次图。浏览器标签页、Windows 资源管理器书签、旧版 Android 都只吃 16 px，现代高分屏桌面吃 32 px，Windows 任务栏 Alt-Tab 与部分网站收藏图标会取 48 px 以上。用画图软件逐个尺寸导出、再手工拼 ICO 容器，是一件机械且容易错位的事；这个 favicon生成器把 16/32/48/64/128 五档一次画完并按规范拼进一个文件。

二是把「图标做出来了」和「代码怎么写」放在一起。多数人卡住的不是画图，而是不知道 head 里要写哪几行、apple-touch-icon 是什么、manifest 要不要给。本页输出的代码块直接给了三行 link 标签和一份 manifest 骨架，尺寸与文件一一对应。

三是能算出体积，而不是凭感觉。每档的 PNG 字节数是canvas.toBlob 出来的真实值，ICO 头部的 6+16×N 也是按规范算的。示例 3 档合计约 597 字节，5 档约 1516 字节，放在绝大多数站点的首屏请求里都无感。

四是不上传图片也能有图标。本页不提供图片上传入口——站点图标本来就不该用产品截图，文字或单个字母反而更清晰。要把现有 PNG 转成 ICO 容器，请用「PNG转ICO转换器」；要按宽高比裁剪现有图片，请用「按宽高比裁剪图片」；要压缩已有图，请用「图片压缩工具」。

原理与规则说明：ICO 容器怎么拼、PNG 为什么能直接塞进去

ICO 是个容器，不是格式。整个文件分三段：ICONDIR 固定 6 字节（reserved 写 0 占 2 字节、type 写 1 占 2 字节、count 写档位数占 2 字节）；接着是 count 个 ICONDIRENTRY，每个固定 16 字节；最后是各档的图像数据块。ICONDIRENTRY 里的 imageOffset 是该档数据在文件中的绝对起始位置，必须在头部算完之后逐档累加偏移——这是最容易写错的一处，偏移差1 字节整个文件就废了。示例 3 档的头部是 6 + 16 × 3 = 54 字节，5 档是 6 + 16 × 5 = 86 字节。

每档 16 字节的字段布局是固定的。width 与 height 各 1 字节（256 像素要用 0 表示，这是规范里的特例，本页最大只到 128，不触发）、colorCount 与 reserved 各 1 字节、planes 与 bitCount 各 2 字节、bytesInRes 与 imageOffset 各 4 字节（小端序，所以要按字节写，不能直接往 DataView 里塞一个 JS number 而不指定 endianness）。

PNG 负载是 Vista 以后才被接受的写法。早期 ICO 里的每档必须是 BMP：BITMAPINFOHEADER 40 字节，加上 w × h × 4 字节的 XOR 像素区，再加一行按 4 字节对齐的 AND 掩码。按这个公式，32 px 一档的 BMP 负载是 40 + 4096 + 128 = 4264 字节，48 px 是 9640 字节。Windows Vista 起支持直接内嵌 PNG 负载，本页就走这条路，实测 32 px 圆环图标只有 180 字节，比同样尺寸的 BMP 小 23.7 倍。

绘制走CanvasRenderingContext2D，导出走 toBlob。每档新建一个边长为 N 的 canvas，填背景色圆角矩形，再用 fillText 画字符，字体按 Math.round(N × 0.62) 像素的 sans-serif 设定——0.62 这个系数是让单字在 N×N 画布里占到约六成高度，留出边距。canvas.toBlob(cb, 'image/png') 拿到的 Blob 就是可直接塞进 ICO 的 PNG 字节。PNG 没有quality 参数，那是 JPEG 与 WebP 才有的，所以本页不提供「导出质量」滑块，避免做成一个完全无效的控件。

data URI 走 base64，会胀三分之一。按 RFC 4648 第 4 节，base64 每 3 字节原始数据变成 4 个字符。示例 32 px 的 180 字节 PNG 编成 240 字符的 data URI，膨胀 1.333 倍。所以能放文件就别内联进 HTML——内联的好处是省一次请求，代价是每个引用点都重复一份字节。

完整示例（数值仅作演示）

示例条件与这个 favicon生成器打开页面时的默认值完全一致：字符「柳」、背景 #2563eb、前景 #ffffff、3 档（16 / 32 / 48）。实测结果如下：

• ICO 头部 54 字节（6 + 16 × 3），三档 PNG 负载实测 127 / 180 / 236 字节，合计 543 字节；
• ICO 总体积约 597 字节（0.58 KB），未压缩 BMP 方案同尺寸要 15032 字节，是它的 25.2 倍；
• 32 px 单独导出 PNG 是 180 字节，转data URI 后 240 字符；
• 切到 5 档时头部变86 字节，负载加 284 + 603 = 887 字节，总体积 1516 字节（1.48 KB）；
• 三档画布总像素 16² + 32² + 48² = 256 + 1024 + 2304 = 3584 个。

下面这段是示例的真实输出代码，可直接粘进 <head>：

<!-- 把 favicon.ico 放到站点根目录，浏览器会自动请求 /favicon.ico -->
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

{
  "name": "柳",
  "icons": [
    { "src": "/favicon.ico", "sizes": "16x16 32x32 48x48", "type": "image/x-icon" }
  ]
}

下表是 16 档常用边长的完整对照，数字由同一套 toBlob 逻辑与 BMP 公式算出，前 12 行默认显示，点「加载更多」看后 4 行（20/24/72/96/144/152/180/192/256/512）：

输入范围与对照表

每个字段的范围与超限动作如下，右列是填错时会看到的具体提示：

边界与字节数说明

• 每档图像数据的上限是 65535 字节。bytesInRes 字段只有 4 字节但 ICO 规范把它当无符号 32 位用，而 BMP 负载另有一条 65535 字节的实际上限约束。本页生成的图标实测最大 603 字节（128 px），离这个上限有两个数量级的余量，复杂位图另说。
• 128 px 一档的 BMP 负载 67624 字节（66.04 KB），已经超过整个 5 档 PNG 方案（1516 字节）的 44 倍。这就是为什么本页坚持用 PNG 负载：128² × 4 = 65536 字节的像素区本身就很大，压缩后才能进一个合理体积的 favicon。
• 256 px 是 ICO 里的特殊尺寸，在 ICONDIRENTRY 的 width/height 字段里要用 0 表示而不是 256。本页档位上限是 128，不涉及这个特例；若要加 256 档，字段必须写 0，否则部分老程序读不出来。
• 内容最多 4 个码元，长度按 UTF-16 计。一个常用 emoji（如 U+1F600）在 JS 里是 2 个码元，所以「😀」占 2 个额度；少数由多个码点组成的 emoji（如带变体选择符的序列）会占 4 个以上，直接触发拒绝。这是 String.length 的语义，不是字符实际观感。
• 字体是系统 sans-serif，字形不可控。用 fillText 画字，渲染结果取决于操作系统装了什么字体。同一份代码在Windows 和 macOS 上画出的「柳」字边缘不同，笔画粗细也不同。要像素级可控就得改成手绘路径或导入字体文件，本页不做。
• 圆角半径固定为边长的 22%。这是 roundRect 的参数选择——iOS 风格图标习惯圆角，但站点图标普遍留小圆角，因为 16 px 下大圆角会让有效图形区太小。22% 在 16 px 上约 3.5 像素，视觉上刚好。
• HEX 大小写与 3 位简写都接受，内部会展开成 6 位再交给 fillStyle。#abc 展开成 #aabbcc，这是 CSS 颜色规范里的既定规则，不是本页自定的。
• 预览画布是 3 个，不是全部档位都预览。只画 16 / 32 / 48 三个代表档，避免 DOM 里挂太多 canvas；实际生成时按所选档位逐档新建用完即弃的离屏 canvas。

常见问题

相关工具

• 图片尺寸调整：已有位图要精确改到某个像素尺寸时用它，改完再回本页思路做多档导出。
• 缩略图生成：一次生成多档缩略图，和本页「一次画多尺寸」是同一类批量思路。
• 按宽高比裁剪图片：方形图标来源不规则时，先裁成正方形再画到画布上。
• 图片格式转换：需要 WebP 或 JPG 版本的图标素材时用它换格式。
• 图片裁剪：手动框选裁切，适合从截图里取一角做图标。
• Open Graph图片尺寸指南：站点图标之外的分享卡片尺寸口径，PWA 与社交分享一起配时看它。