ICO/Favicon 生成

单图→16/32/48/64/multi-ico

438 次访问

选 择 生 成 源

拖入或点击选择 LOGO 图片
建议方形 PNG / SVG ≥ 512×512 · 自动生成全套图标 + ICO + manifest
字符(最多 4 字)
65
字符预设
提示
· 输入站点首字母或缩写
· 中文最多 2 字 / 英文最多 4 字
· 字号过大会贴边,建议 ≤ 70%

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

🖥️

浏览器标签栏图标

个人博客站长或独立开发者,在部署网站后需要一个 16×16 或 32×32 的 favicon.ico 文件,让浏览器标签页和书签栏显示品牌标识。本工具从一张设计好的方形 logo 图(PNG/SVG)直接输出标准尺寸的 .ico 文件,无需手动裁剪或转换格式,上传即得,确保所有主流浏览器兼容。

📱

PWA 应用图标

前端开发者构建渐进式 Web 应用(PWA)时,需要同时准备 48×48、72×72、96×96、144×144、192×192 等多套图标用于 manifest.json 和不同设备启动屏。本工具一次生成 16/32/48/64 四档尺寸,配合手动导出更大尺寸,可快速覆盖 PWA 图标清单,避免反复打开图像编辑软件逐一调整。

🏢

企业内网系统图标

公司 IT 管理员在搭建内部 OA 或 CRM 系统时,需要为每个子系统配置 favicon 以区分功能模块(如财务系统用钱袋图标、考勤系统用时钟图标)。本工具支持从单张设计稿批量生成 16×16 到 64×64 的多尺寸 .ico,一次上传即可得到适配 Windows 资源管理器、浏览器标签页和收藏夹的全套图标文件。

🎨

设计稿交付检查

UI 设计师在向开发交付 favicon 资源时,需要验证设计稿在 16×16 极小尺寸下的可识别性。本工具将原始设计图压缩为 16×16 和 32×32 预览,让设计师直接看到细节丢失程度(如线条是否糊成一片、文字是否可读),从而决定是否需要简化图形或加粗轮廓,避免开发上线后图标模糊不清。

🔧

多平台 favicon 兼容

WordPress 站点管理员需要同时满足 Chrome(推荐 32×32)、Firefox(16×16 和 32×32)、IE(16×16 和 32×32 内嵌于 .ico)以及 macOS Safari 的 favicon 要求。本工具生成的 multi-ico 文件将 16/32/48/64 四种尺寸打包在一个 .ico 里,上传到网站根目录后即可被所有主流浏览器自动识别,无需为不同平台单独准备文件。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具RealWorld Icon (rw-designer.com)传统方法 (Photoshop + 手动)
数据隐私纯浏览器处理,图片不上传服务器需上传图片至服务器完全本地处理,依赖本地软件
处理速度1-3 秒内完成多尺寸生成取决于网络和服务器负载,约 5-15 秒取决于操作熟练度,通常 5-15 分钟
离线可用首次加载后完全离线可用必须联网完全离线
输出格式自动生成 .ico (含 16/32/48/64 多尺寸)可自定义输出尺寸和格式,含 .ico/.png需手动导出每个尺寸并合并为 .ico
操作门槛上传图片 → 下载结果,零配置需选择输出尺寸、格式等选项需掌握 Photoshop 切片、导出、ICO 插件等技能
批量处理单次处理 1 张图片支持批量上传和转换可批量处理,但需编写动作或脚本
收费模式完全免费,无水印免费版有功能限制,高级功能付费需付费购买 Photoshop 或使用开源替代品

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例6 个典型场景,覆盖常规、边界与易错

输入输出说明
logo.png (512x512, 透明背景)favicon.ico (包含 16x16, 32x32, 48x48, 64x64 四个尺寸)典型场景:网站 logo 转多尺寸 favicon
icon.svg (矢量图)favicon.ico (包含 16x16, 32x32, 48x48, 64x64 四个尺寸)典型场景:矢量图源文件,自动栅格化
photo.jpg (2000x2000, 非方形)favicon.ico (自动裁剪为正方形后生成四个尺寸)边界 case:超大非方形图,自动居中裁切
tiny.png (10x10 像素)favicon.ico (16x16 放大填充,其余尺寸模糊)边界 case:源图过小,放大后质量下降
animated.gif (带透明帧)favicon.ico (仅取第一帧生成静态图标)易错 case:GIF 动图只保留第一帧
icon.ico (已有单尺寸 32x32)favicon.ico (重新生成包含 16/32/48/64 的多尺寸文件)易错 case:输入已是 .ico,但尺寸不全

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 源图尺寸远小于目标尺寸,导致放大模糊

错误
用 16×16 像素的源图直接生成 64×64 或 128×128 的 ICO
修复
源图至少 256×256 像素,让工具从大图向下采样压缩到各目标尺寸

ICO 格式本身不包含矢量数据;小图强行放大 = 像素插值模糊,边缘锯齿明显。向下采样(大→小)保留更多细节。

2. 使用非正方形源图,导致图标被拉伸变形

错误
输入 800×600 或 1920×1080 的横屏截图,期望自动裁切成正方形
修复
提前用图像编辑软件把源图裁为 1:1 正方形(如 512×512),或选择工具提供的「居中裁剪」模式

ICO 标准要求所有尺寸均为正方形(16×16、32×32 等);非正方形输入若不裁剪直接缩放,图标会压扁或拉长。

3. 透明背景图片存为 JPEG 格式再上传

错误
把带透明区域的 PNG 另存为 JPG,然后上传 JPG 生成 ICO
修复
直接上传原始 PNG(带 Alpha 通道),或上传 WebP / GIF 等支持透明的格式

JPEG 不支持透明通道;透明区域会被填充为白色或黑色方块,最终 ICO 的透明效果丢失。

4. 用 24 位色深的 ICO 在 Windows 资源管理器上显示花边

错误
生成时选择「24-bit」或「16-bit」色深,期望透明背景正常显示
修复
生成时选择「32-bit」(含 8 位 Alpha 通道),或勾选「启用透明通道」选项

Windows 资源管理器对 ICO 的透明支持依赖 Alpha 通道;24-bit 无 Alpha 通道的 ICO 透明区域会显示为黑色或杂色。

5. 一次性上传超大源图(如 4096×4096)导致浏览器卡死

错误
上传 4096×4096 的 4K 截图,浏览器标签页直接无响应或内存溢出
修复
上传前把源图缩放到 1024×1024 以内,或使用工具提供的「限制最大尺寸」功能

浏览器中处理大图(解码、重采样)会占用大量内存和 CPU;4096×4096 的 RGBA 位图约 64MB,多次缩放操作可能触发浏览器崩溃。

6. 把 ICO 文件直接重命名为 .png 使用

错误
下载得到 favicon.ico,直接改名为 favicon.png 并引用到 <link> 标签
修复
保持 .ico 扩展名,在 HTML 中用 <link rel="icon" href="/favicon.ico"> 引用

ICO 与 PNG 的文件头结构完全不同;浏览器按扩展名判断 MIME 类型,重命名后会被当作 PNG 解析失败,图标不显示。

7. 期望一张 ICO 同时包含高分辨率(256×256)和低分辨率(16×16)

错误
生成时只选择「单一尺寸 256×256」,认为浏览器会自动缩放
修复
生成 Multi-ICO(多尺寸 ICO),勾选 16、32、48、64、256 等尺寸,让浏览器按场景选择最佳尺寸

Windows 任务栏用 16×16,桌面快捷方式用 32×32,浏览器标签页用 16×16 或 32×32;单一尺寸 ICO 在部分场景下会被拉伸或模糊。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

ICO 文件大小 = Σ (各尺寸位图数据 + 位图信息头 + 调色板 + 掩码) + ICO 文件头 + 目录项

变量说明

  • 各尺寸位图数据 — 16×16、32×32、48×48、64×64 等 PNG/BMP 压缩后数据
  • 位图信息头 — 每个尺寸的 BITMAPINFOHEADER 结构(40 字节)
  • 调色板 — 仅 8 位及以下色深时存在,32 位真彩色无此部分
  • 掩码 — 每个尺寸的透明通道掩码(AND 掩码 + XOR 掩码)
  • ICO 文件头 — 6 字节:保留 0 + 类型 1 + 图像数量
  • 目录项 — 每个尺寸对应 16 字节目录:宽/高/色深/偏移/大小

示例

生成一个含 16×16 和 32×32 的 32 位真彩色 ICO。文件头 6 字节 + 2 个目录项 32 字节 = 38 字节。16×16 位图数据:16×16×4=1024 字节(PNG 压缩后约 300 字节)+ 位图信息头 40 字节 = 约 340 字节。32×32 同理约 1024 字节。总大小 ≈ 38 + 340 + 1024 ≈ 1402 字节。

适用范围

适用于标准 ICO 格式(Windows 图标),32 位色深时无调色板。8 位及以下色深需额外计算调色板(256×4=1024 字节)。不适用于 CUR 光标格式或 Mac ICNS 格式。参考 Microsoft ICO 文件格式规范。

原理图

上传图片PNG / JPG / SVG浏览器内缩放Canvas API生成 ICO多尺寸打包下载尺寸处理细节16×16(小图标)32×32(标准)48×48(大图标)64×64(高清)所有尺寸合并为一个 .ico 文件,浏览器自动选择合适尺寸
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image
import io

# 打开源图并调整到最大尺寸
src = Image.open('input.png').convert('RGBA')

# 生成多尺寸 ICO(16/32/48/64)
sizes = [16, 32, 48, 64]
frames = [src.resize((s, s), Image.LANCZOS) for s in sizes]

# 保存为 ICO(多帧)
buf = io.BytesIO()
frames[0].save(
    buf, format='ICO', sizes=[(s, s) for s in sizes],
    append_images=frames[1:]
)
with open('output.ico', 'wb') as f:
    f.write(buf.getvalue())

print('已生成 output.ico,含 16/32/48/64 四个尺寸')
package main

import (
	"bytes"
	"image"
	"image/png"
	"log"
	"os"

	"golang.org/x/image/draw"
	"golang.org/x/image/tiff" // ICO 编码依赖此包
	"golang.org/x/image/vp8l" // 用于无损压缩
)

func main() {
	// 读取源图
	f, _ := os.Open("input.png")
	src, _, _ := image.Decode(f)
	f.Close()

	// 生成 4 个尺寸
	sizes := []int{16, 32, 48, 64}
	var icoBuf bytes.Buffer

	for i, s := range sizes {
		dst := image.NewRGBA(image.Rect(0, 0, s, s))
		draw.ApproxBiLinear.Scale(dst, dst.Bounds(), src, src.Bounds(), draw.Over, nil)

		// 编码为 PNG 帧(ICO 内部格式)
		var frameBuf bytes.Buffer
		png.Encode(&frameBuf, dst)

		// 写入 ICO 目录和帧数据(简化:仅演示核心逻辑)
		// 真实场景建议使用 github.com/biessek/golang-ico
		_ = i
		_ = frameBuf
	}

	log.Println("ICO 生成完成(需完整 ICO 编码库)")
}
// 浏览器端:Canvas 生成多尺寸 ICO(需 toDataURL 拼接)
const img = new Image();
img.src = 'input.png';
img.onload = () => {
  const sizes = [16, 32, 48, 64];
  const icoData = [];

  sizes.forEach((s) => {
    const canvas = document.createElement('canvas');
    canvas.width = s;
    canvas.height = s;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, s, s);
    icoData.push(canvas.toDataURL('image/png'));
  });

  // 输出为 ICO 格式需手动拼接 BMP 头(此处简化演示)
  console.log('生成 4 帧 PNG 数据,需 ICO 编码库打包');
  console.log('尺寸:', icoData.length);
};

// 服务端 Node.js 示例(使用 sharp + ico-endec)
// const sharp = require('sharp');
// const { encodeICO } = require('ico-endec');
// sharp('input.png')
//   .resize(16, 16)
//   .toBuffer()
//   .then(buf => console.log('单尺寸 ICO 帧就绪'));

常见问题

8 个高频疑问

上传的图片直接转成 ICO 文件,为什么浏览器里显示的 favicon 还是模糊的?
浏览器对 favicon 的显示尺寸有不同要求:地址栏通常用 16×16,标签页用 32×32,收藏夹用 64×64。本工具生成的 multi-ico 文件包含 16/32/48/64 四种尺寸,但如果源图本身像素不足(例如 32×32 的源图强制放大到 64×64),大尺寸就会模糊。建议上传至少 256×256 像素的源图,这样各尺寸缩小时清晰度损失最小。
生成的 .ico 文件在 Windows 下能显示,上传到网站后 Chrome 不认,怎么回事?
Chrome 对 ICO 文件的内部结构有严格要求。本工具生成的 multi-ico 文件包含 16/32/48/64 四种 PNG 格式的位图,Chrome 完全支持。常见原因是:上传路径写错了(比如文件名大小写不匹配),或者服务器返回的 Content-Type 不是 image/x-icon。检查网页的 <link> 标签路径,并确认服务器配置:.ico 文件应返回 image/x-icon 或 image/vnd.microsoft.icon。
为什么我上传的透明 PNG 转成 ICO 后,透明部分变成了白色或黑色背景?
ICO 格式本身支持透明通道,但某些旧版浏览器或系统图标预览工具会忽略 Alpha 通道,将透明区域渲染为白色或黑色。本工具生成的 ICO 内部使用 PNG 编码的位图,保留了原图的透明信息。如果发现背景异常,先确认查看工具是否支持 Alpha 通道(Windows 资源管理器在缩略图模式下不支持透明预览,需用专业图标查看器)。网页使用场景下,Chrome/Firefox/Edge 均正常显示透明。
这个工具和那些在线 ICO 转换网站比,有什么不同?
主要两点区别:一是所有处理在浏览器本地完成(纯前端实现),图片不上传服务器,隐私性更强;二是生成的 ICO 文件严格遵循微软 ICO 格式规范,内部嵌入的是 PNG 数据而非 BMP,体积更小、兼容性更好。大多数在线转换站用后端服务处理,图片会经过第三方服务器,且部分站点只输出单尺寸 BMP 编码的 ICO,在 Chrome 下可能不显示。
生成的 ICO 文件只有几 KB,网站图标加载不出来,是不是文件坏了?
几 KB 的 ICO 文件是正常的。favicon 通常只有 1-5 KB,因为只有 16×16 和 32×32 尺寸需要较高清晰度,64×64 尺寸本身像素量不大。如果网页上加载不出来,先确认文件是否上传到网站根目录,并检查 <link> 标签的 href 路径是否正确(推荐用绝对路径)。另外,浏览器有 favicon 缓存,上传新文件后需要 Ctrl+F5 强制刷新或清除缓存才能看到更新。
支持批量上传多张图片生成一个 ICO 文件吗?比如给不同尺寸指定不同图片?
不支持。本工具的设计逻辑是:一张源图缩放生成所有尺寸。如果希望不同尺寸用不同图片(例如 16×16 用logo小图,64×64 用logo大图),需要先用其他工具分别生成各尺寸的单尺寸 ICO,再用 ICO 合并工具(如 IcoFX、Greenfish Icon Editor Pro)手动打包。本工具适合快速从单图生成完整 multi-ico 的场景。
生成的 ICO 文件苹果设备上用不了,Safari 不显示 favicon,怎么办?
Safari 对 favicon 的处理与其他浏览器不同:它优先读取 <link> 标签中 rel='apple-touch-icon' 的 PNG 图片,而非 ICO 文件。建议在网页的 <head> 中额外添加一行:<link rel='apple-touch-icon' sizes='180×180' href='apple-icon.png'>。ICO 文件仍保留给 Windows 和 Chrome 使用,两者互不冲突。本工具只生成 ICO,苹果专用图标需单独准备 180×180 PNG。
为什么我上传 500KB 的图片,生成的 ICO 文件只有 20KB,质量会不会损失?
20KB 的 ICO 文件对于 favicon 场景完全够用。ICO 文件内部包含 4 张不同尺寸的 PNG 图片(16/32/48/64),每张 PNG 经过无损压缩,总大小通常在 15-30 KB 之间。大尺寸 PNG(如 64×64)压缩后约 5-8 KB,不会明显损失画质。如果源图是 500KB 的高分辨率照片,缩放到 64×64 后细节必然丢失,这是尺寸缩小导致的,与压缩算法无关。建议上传图标类图片(非照片),效果更好。
选择 打开 +新窗口 esc关闭