咕咕嘎工具箱 关于 友链

图片转 ICO

拖拽图片到这里,或

支持 PNG / JPEG / WebP / AVIF / GIF / BMP / HEIC,全部在浏览器本地处理,不上传服务器

多帧 ICO 怎么用

ICO 是「图标容器」格式,一个文件里可以同时放多张不同尺寸的图。你不用手动拆帧,也不用为不同场合导出好几个文件——把这一个文件放上去,由浏览器或系统按当前场景挑最合适的那帧渲染。

各帧分别在什么时候被用到

使用场景实际取用的帧
浏览器页签 / 地址栏 / 书签(普通屏)16×16
页签(高分屏、浏览器缩放放大后)32×32
Windows 任务栏固定、开始菜单32×32 / 48×48
资源管理器「大图标 / 特大图标」、快捷方式48×48 以上
Windows 7+ 大图标视图、部分 Linux 桌面256×256

当网站页签图标

两件事要一起做,因为有一部分客户端根本不看你的 HTML:

  1. 文件放进网站根目录,命名 favicon.ico,让 https://你的域名/favicon.ico 能直接访问。首次访问的浏览器、搜索引擎和各类抓取器会直接请求这个地址。

  2. 在每个页面的 <head> 里声明它:

    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 256x256">

    sizes 是告诉浏览器「这一份里有哪些尺寸」,不写也能用,但浏览器可能挑到不合适的帧。

如果同时提供了 SVG 图标,把 SVG 那条 <link> 写在前面:支持 SVG 的浏览器会优先用它(矢量,任意缩放都清晰),ICO 负责兜住不认 SVG 的旧浏览器和直接抓根路径的客户端。

当 Windows 桌面 / 程序图标

右键快捷方式或可执行文件 → 属性 → 「更改图标」→ 选中这个 .ico;Windows 会列出文件内的全部帧,并按当前视图缩放自动取用。做安装包时同理,把多帧 ICO 交给打包工具(Inno Setup 的 SetupIconFile 等)即可,不要只给一帧 16×16。

换图后没生效

favicon 的缓存比一般静态文件更顽固:改完加个版本号 /favicon.ico?v=2,并清一次该站点的缓存或重开浏览器,普通刷新往往看不出来。

使用说明

在浏览器本地生成 ICO 图标,不上传服务器:

  • 输入:PNG / JPEG / WebP / AVIF / GIF / BMP,以及 HEIC / HEIF(首次使用自动加载约 2 MB 解码组件)
  • 多尺寸:16 / 32 / 48 / 64 / 128 / 256 px 自由勾选,一个 .ico 文件内打包多张图
  • 非正方形:可选完整显示(透明留白)或居中裁剪填满
  • 兼容编码:256 px 使用 PNG,其余尺寸使用 32 位 BMP,兼容 Windows 资源管理器与常见 favicon 场景
  • 预览下载:每个尺寸按实际像素预览,标注单帧与 ICO 总体积
  • ICO 单帧上限为 256×256;GIF 只取第一帧

常见用途:给网站生成 favicon.ico、给 Windows 快捷方式或桌面程序准备多尺寸图标。

多帧 ICO 不需要拆开了用:一个文件里打包的尺寸,浏览器和 Windows 会按场景自己挑(页签取 16、高分屏取 32、 资源管理器大图标取 48 以上)。当 favicon 时把文件放到网站根目录,并在页面头部加 <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 256x256">; 详细场景对照与写法见工具区下方的「多帧 ICO 怎么用」。