在线图片转 ICO 工具

上传任意图片,自动居中裁剪并生成包含 16×16 / 32×32 / 48×48 三种尺寸的 favicon.ico。文件不会上传,全部在浏览器本地处理。

文件不会上传,全部在浏览器本地处理,断网也可以使用。

图片转 ICO 工具使用说明

favicon 是浏览器标签页、书签栏、历史记录和手机主屏幕上显示的那个小图标,虽然只有十几像素见方,却是网站专业度的重要细节。本工具把任意图片打包成标准的 favicon.ico 文件,全过程离线完成。使用步骤:

  • 第一步:点击「选择图片」,挑选一张 Logo 或图标素材。PNG 等带透明通道的格式效果最佳;非正方形图片会自动居中裁剪成最大的正方形。
  • 第二步:点击「生成 ICO」,工具会在浏览器内把图片缩放绘制成 16×16、32×32、48×48 三个 Canvas,并编码为 PNG。
  • 第三步:三个 PNG 会被打包进一个标准的 ICO 容器文件,页面展示三种尺寸的实际预览效果与文件体积。
  • 第四步:点击「下载 favicon.ico」保存文件,上传到你的网站根目录即可生效。

部署提示:把 favicon.ico 放在网站根目录,浏览器会自动请求 /favicon.ico;也可以在页面 head 中加入 <link rel="icon" href="/favicon.ico"> 显式声明。上传后如果图标没有立即更新,通常是浏览器缓存所致,强制刷新(Ctrl+F5)或清缓存即可。

常见问题(FAQ)

favicon.ico 应该放在网站的哪个位置?
最简单的做法是把 favicon.ico 放在网站根目录(与首页 index.html 同级),浏览器会默认请求 /favicon.ico。也可以在 head 中用 link rel="icon" 标签显式指定路径。
ICO 文件里为什么要包含 16、32、48 三种尺寸?
不同场景会请求不同尺寸:浏览器标签页一般用 16×16,任务栏和书签常用 32×32,桌面快捷方式则用 48×48。一个 ICO 打包多种尺寸,系统会自动挑选最合适的一张,避免模糊拉伸。
我的图片会被上传到服务器吗?
不会。裁剪、缩放与 ICO 打包全部在你的浏览器中通过 Canvas 与 JavaScript 完成,图片不会离开你的设备,可以放心使用 Logo 等内部素材。
非正方形的图片可以直接转换吗?
可以。工具会自动把图片居中裁剪成一个最大的正方形,再缩放到 16、32、48 三种尺寸,因此 Logo 或照片无论横竖都能得到不变形的图标。
ICO 里的图标支持透明背景吗?
支持。本工具生成的 ICO 容器内部使用 PNG 编码,完整保留透明通道。如果原图是带透明的 PNG,生成的 favicon 在浏览器标签页上也会呈现透明背景。

相关知识:ICO 文件格式的内部结构

ICO 是一种「容器」格式:文件开头是一个 6 字节的文件头(依次为 2 字节保留字段、2 字节类型值 1 表示图标、2 字节图像数量),随后每个尺寸对应一个 16 字节的目录项,记录宽度、高度、色板数、色深、该张图像数据的字节长度以及在文件中的偏移量,最后按顺序拼接所有图像数据。目录项中的宽度与高度各占 1 字节,因此单个 ICO 最多容纳 255×255 的图像(256 用 0 表示)。现代浏览器支持在 ICO 里直接嵌入 PNG 数据,本工具正是采用「PNG 帧打包进 ICO 容器」的方式,比老式的 BMP 帧体积更小。

favicon 的历史可以追溯到 IE5 时代:浏览器默认向网站根目录请求 /favicon.ico,这一约定沿用至今。如今更现代的做法还包括 PNG 图标与 apple-touch-icon,但一个打包多尺寸的 ICO 仍是兼容性最好的选择。图标素材的处理可以用本站的 图片格式转换 先统一成 PNG,用 图片压缩 控制体积;如果是给 favicon 配色或从品牌色生成变体,颜色转换器 可以帮你快速在 HEX/RGB/HSL 之间换算。

🍪 隐私提示 我们仅收集提供服务所必需的信息(详见《隐私政策》),不出售、不追踪。