文件格式
什么是 ICO？图标文件与网站图标详解
ICO 是 Windows 的图标格式，能在一个文件中容纳多种尺寸。本文介绍它的结构、favicon 的历史，以及如今需要准备哪些尺寸。
作者: Hemen Dönüştür Editör Ekibi发布日期: 阅读约 8 分钟
ICO 是 Windows 用于程序和文件夹图标的格式，在网页上则用于浏览器标签页中的小网站图标（favicon）。它与其他图片格式的不同之处在于，一个文件可以容纳同一图标的多种尺寸。本文将介绍 ICO 文件的内部结构、它在各 Windows 版本中的演变、favicon 的历史、如今需要哪些尺寸，以及如何正确地制作 ICO 文件。
什么是 ICO？
ICO（扩展名 .ico）是 Microsoft 为图标资源定义的一种容器格式。ICO 文件以“图标目录”开头，把文件中的每张图片（例如 16x16、32x32 和 48x48 像素）列为单独的条目。Windows 或浏览器随后会选择最适合图标显示位置的尺寸。
在 IANA 注册的官方 MIME 类型是 image/vnd.microsoft.icon，但 Microsoft 软件和许多服务器仍在使用 image/x-icon。鼠标指针使用的 CUR 格式几乎与之相同；它在目录的类型字段中使用 2 而不是 1，并保存指针的点击位置（热点）。
历史：从 Windows 图标到 favicon
- Windows 1.0：图标是单色的。
- Windows 3.0：出现了我们今天所知的、基于目录、可容纳多张图片的结构。
- 1995 年：John Hornick 在 Microsoft 发表的文章“Icons”详细记录了 ICO 的结构，并建议开发者至少包含 16x16（16 色）、32x32（16 色）和 48x48（256 色）的图片。
- 1999 年 3 月：Internet Explorer 5 成为第一个支持 favicon 的浏览器。网站根目录中的
favicon.ico文件会显示在收藏夹和地址栏中。 - Windows XP：32 位图片加入了 8 位 alpha 通道，使柔和的半透明边缘成为可能。
- Windows Vista：加入了 256x256 图片以及 ICO 内的 PNG 压缩。
- 2003 年：
image/vnd.microsoft.iconMIME 类型由第三方提交给 IANA。
ICO 文件的结构
图标目录（ICONDIR）
文件以 6 字节的文件头开始：一个保留字段（0）、类型（图标为 1，指针为 2）以及图片数量。随后每张图片对应一个 16 字节的目录条目。
目录条目（ICONDIRENTRY）
| 字段 | 含义 |
|---|---|
| bWidth、bHeight | 宽度和高度（各 1 字节）。值为 0 表示 256 像素。 |
| bColorCount | 调色板颜色数（8 位及以上为 0） |
| wPlanes、wBitCount | 颜色平面数和每像素位数 |
| dwBytesInRes | 图像数据的字节数 |
| dwImageOffset | 图像数据在文件中的起始位置 |
由于尺寸字段只有一个字节，ICO 中的图片最大为 256x256 像素。
图像数据：BMP 或 PNG
在传统的 ICO 中，每张图片都是一个去掉文件头的 BMP（DIB）。根据 Hornick 的文章，它包含一张彩色图像（XOR 掩码），后面跟着一个 1 位透明掩码（AND 掩码），因此文件头中保存的高度是两个掩码的总高度，即实际高度的两倍。从 Windows XP 开始，32 位图片直接在像素数据中携带 alpha 通道。
从 Windows Vista 开始，条目也可以是一个完整的 PNG 文件，而不是 BMP。嵌入 PNG，尤其是 256x256 尺寸，能让文件小得多。MDN 指出，Vista 之前不支持 ICO 中的 PNG，在旧软件中可能会出问题，但当前的浏览器和 Windows 版本两种都能读取。
需要哪些尺寸？
Windows 应用图标
Microsoft 当前的应用图标指南指出，Win32 应用至少应包含 16x16、24x24、32x32、48x48 和 256x256。如果 Windows 找不到完全匹配的尺寸，就会把下一个更大的尺寸缩小使用；有了 256 像素的图片，图标就只会被缩小，绝不会被放大。例如在 100% 缩放下，标题栏和右键菜单使用 16 像素，任务栏使用 24 像素；在 200% 缩放下则分别变为 32 和 48 像素。
网站的 favicon
网页的情况有所不同。根据 HTML 标准，如果页面没有 rel="icon" 链接，浏览器可能会从网站根目录请求 /favicon.ico。因此在根目录放一个 favicon.ico 仍然是好的做法，但仅靠它是不够的：
- Google 搜索要求 favicon 为正方形（1:1）且至少 8x8 像素，并建议大于 48x48，以便在不同界面上都显示良好。
- iPhone 和 iPad 的主屏幕使用 180x180 的
apple-touch-icon。 - Android 和 PWA 需要在网页应用清单（manifest）中提供 192 和 512 像素的图标，以及用于自适应图标的“maskable”版本。
- 当前浏览器也支持 SVG favicon；一个矢量文件就能覆盖所有尺寸。
在实践中，在 favicon.ico 中放入 16、32 和 48 像素即可覆盖桌面浏览器和旧系统，更大的尺寸则以单独的 PNG 文件提供。
在系统、浏览器和软件中的支持
Windows 原生读写 ICO；资源管理器、快捷方式和桌面都使用它。根据 MDN，Chrome、Edge、Firefox、Opera 和 Safari 都能显示 ICO 文件。macOS 的应用图标使用自己的 ICNS 格式，但“预览”可以打开 ICO。GIMP 等编辑器会把 ICO 作为分层文件打开，每种尺寸一个图层。MDN 不建议在一般网页内容中使用 ICO，并指出 favicon 已转向通过 <link> 元素使用 PNG。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 一个文件中包含多种尺寸和色深 | 最大 256x256 像素 |
| 在 Windows 上普遍支持 | 除 favicon 外在网页上没有用处 |
| alpha 通道和 PNG 压缩（Vista 及以后） | 旧的基于 BMP 的条目体积大、不灵活 |
| 浏览器会自动查找根目录的 favicon.ico | 需要专门的工具，并非所有程序都能写入 |
常见问题及解决方法
把 PNG 改名为 .ico 不就行了吗？
有些浏览器能容忍这种做法，但它并不是真正的 ICO：没有图标目录，Windows 也不会把它当作图标接受。正确的做法是把图片转换为真正的 ICO。我们的 PNG 转 ICO 和 JPG 转 ICO 工具总是会写入 16、32 和 48 像素的正方形图标，当你的图片足够大时还会加入 64、128 和 256 像素。每种尺寸都以 PNG 形式嵌入，因此透明度会得到保留。
favicon 模糊或看不清
细线和小字在 16 像素下会消失。请使用粗线条、高对比度的简洁图形；必要时只取标志中的图形部分。使用至少 256x256、最好是 512x512 像素的正方形源图，效果最好。
非正方形的图片被压扁或拉伸
图标是正方形的。我们的工具从不拉伸图片：会保持比例把它居中放在正方形中，并让边缘保持透明。如果想要完美的正方形，请先用图片裁剪截取一个正方形区域。
新的 favicon 没有显示出来
浏览器会长时间缓存 favicon。给文件改名或加上版本参数（/favicon.ico?v=2），并确认服务器返回了正确的 MIME 类型，通常就能解决。Google 搜索结果中的图标要等网站被重新抓取后才会更新。
Windows 仍然显示旧图标
Windows 会把图标保存在单独的缓存中。重新构建应用并重新创建快捷方式，或者注销后重新登录，往往就足够了。
转换技巧
- 网站只有一个 ICO 是不够的：favicon 生成工具会一次性生成 favicon.ico（16、32 和 48 像素）、favicon-48x48.png、apple-touch-icon.png（180 像素）、icon-192.png、icon-512.png、可遮罩的 icon-512-maskable.png 和 site.webmanifest；源文件是 SVG 时还会加入 icon.svg。它还会给出可直接粘贴到页面
<head>中的代码片段。 - Apple 图标需要不透明的背景：iOS 会把透明区域显示为黑色，并自行添加圆角，因此 favicon 生成工具会用你选择的背景色填充 apple-touch-icon。
- 如果你的标志是 SVG：先用 SVG 转 PNG 渲染出一张大尺寸 PNG，再转换为 ICO，或者直接把 SVG 交给 favicon 生成工具。
我们的 ICO 和 favicon 工具在你的浏览器中运行；你的图片不会上传，也不会离开你的设备。
常见问题
ICO 图片的最大尺寸是多少？
目录条目中的宽度和高度字段各占一个字节，0 表示 256。所以 ICO 中单张图片最大为 256x256 像素。
favicon 应该用 ICO 还是 PNG？
两者都用。根目录中包含 16、32 和 48 像素的 favicon.ico 用于旧浏览器和自动请求；再用 <link> 标签为当前浏览器和移动设备声明 PNG（以及可选的 SVG）图标。
ICO 支持透明度吗？
支持。旧的 ICO 使用 1 位掩码，自 Windows XP 起 32 位图片拥有完整的 alpha 通道，自 Vista 起嵌入的 PNG 也能携带透明度。
怎样把 ICO 文件转换为 PNG？
把 ICO 添加到图片格式转换工具中，并选择 PNG 作为目标格式。如果文件包含多种尺寸，会使用最大的那一个。
Mac 上会用到 ICO 文件吗？
macOS 的应用图标使用 ICNS 格式。对于网站而言，favicon.ico 和 PNG 图标在所有操作系统的浏览器中都能使用。
