ICO图标生成 - PNG转favicon.ico多尺寸（本地处理）

浏览器标签页那个小图标、收藏夹里的站点标志、Windows 桌面快捷方式——都认 ICO 格式，而且要一个文件里装好多个尺寸：标签页用 16 像素、任务栏用 32、桌面用 48。本工具把一张清晰的 PNG 源图自动缩放成各尺寸帧，按标准 ICO 容器打包，下载即用，不用再装转换软件。

口径提醒：ICO 帧是方形的，非正方形源图会先按最长边补成方形（居中）再缩放，介意留白请先裁成方形；源图建议 256 像素以上且背景干净，小尺寸缩放后细节会糊，标志类图形用纯色或透明底效果最好；favicon.ico 习惯放网站根目录，改图标后浏览器缓存较顽固。

这个工具解决你的问题了吗？

使用步骤

选一张 256px 以上的方形 PNG 源图。
选尺寸组合：经典三帧或全尺寸六帧。
点「生成 ICO」本地打包。
下载 favicon.ico 放到网站根目录。

计算原理与示例

尺寸组合怎么选

「经典三帧（16/32/48）」覆盖浏览器标签页、书签与桌面快捷方式，是 favicon.ico 的传统口径；「全尺寸六帧」额外带 64/128/256，适合还要做 Windows 应用图标的场景；只想生成一个指定尺寸就选单尺寸。

源图有什么要求

建议正方形、纯色或透明背景、256 像素以上。ICO 各尺寸帧由源图缩放生成，源图分辨率不足时小帧会发糊；标志里文字多的，16 像素下几乎不可读，建议用图形主体做源图。

favicon.ico 怎么部署

把下载的 favicon.ico 放到网站根目录，多数浏览器会自动请求它；显式引用可在页面 head 里加一行 link 标签，rel 设为 icon、href 指向网站根下的 favicon.ico。改图标后浏览器缓存较顽固，强刷或无痕窗口可见效。

ICO 和 PNG favicon 的区别

现代浏览器其实支持直接用 PNG 做 favicon，兼容性足够时更简单；但部分旧版浏览器、桌面场景与 Windows 快捷方式仍只认 ICO——要到处都认，就用本工具生成 ICO。

代码示例

JavaScript 多尺寸合成一个 ICO

// ICO = 目录 + 多张图（通常 16/32/48/256）。目录每项 16 字节，PNG 可直接内嵌（Vista 起支持）
async function packIco(bitmaps) {
  const pngs = [];
  for (const bmp of bitmaps) {
    const canvas = document.createElement('canvas');
    canvas.width = bmp.width;
    canvas.height = bmp.height;
    canvas.getContext('2d').drawImage(bmp, 0, 0);
    pngs.push(new Uint8Array(await (await new Promise((r) => canvas.toBlob(r, 'image/png'))).arrayBuffer()));
  }
  const header = new Uint8Array(6 + 16 * pngs.length);
  const dv = new DataView(header.buffer);
  dv.setUint16(0, 0, true);              // reserved
  dv.setUint16(2, 1, true);              // type = 1（图标）
  dv.setUint16(4, pngs.length, true);    // 图片数量
  return { header, pngs };               // 每项填宽/高/偏移与长度后拼接即可
}

Python Pillow 一行生成 ICO

from PIL import Image

img = Image.open('logo.png').convert('RGBA')

# sizes 里给几个尺寸，Pillow 会逐尺寸缩放后打包进同一个 .ico
img.save('favicon.ico', format='ICO', sizes=[(16, 16), (32, 32), (48, 48), (256, 256)])

常见问题

图片会上传吗？

不会。缩放与 ICO 打包都在浏览器本地完成，还没定稿的保密标志也可以放心生成。

JPG 源图可以吗？

可以，工具会先经画布再缩放输出；但 JPG 不支持透明，做图标建议用带透明通道的 PNG，否则图标会带白色底块。

为什么小尺寸看起来糊？

16 像素只有两百多个像素点，再清晰的源图缩到这个尺寸细节都会丢弃，这是物理极限；缓解办法是简化图形、加粗线条、去掉细文字。

ICO 里能塞多少个尺寸？

本工具提供 16 到 256 六帧的组合，覆盖网站与 Windows 常用场景；帧数越多文件越大，网站图标场景三帧足够，不必追求全。

favicon 显示不出来怎么办？

按顺序排查：文件是否在根目录且名为 favicon.ico、页面是否有 link 引用、浏览器缓存（无痕窗口验证）、服务器对 .ico 的返回类型。九成是缓存。

能生成苹果触屏图标吗？

那是单张 180×180 的 PNG，不需要 ICO 容器；用图片尺寸调整工具把源图缩到 180×180 输出 PNG，命名为约定文件名放根目录即可。

生成记录会被保存吗？

不会。打包是纯本地计算，服务器不接触你的源图；最近使用记录只存在你自己浏览器的本地存储里。

延伸阅读

二维码与 ICO 图标：两个小资源怎么生成

来自本站原创文章，讲清这个工具背后的算法与口径。

ICO 图标生成