为什么需要 ICO 文件？
ICO 是 Windows 的标准图标格式，但它在网页上最常见的用途是那个不起眼的 favicon——出现在浏览器标签页、书签和搜索结果中的那个小图标。尽管尺寸很小（通常只有 16×16 像素），favicon 却是一个关键的品牌元素。它帮助用户在数十个打开的标签中一眼识别你的网站，并在每次有人收藏你的页面时强化品牌认知。
除了 favicon，ICO 文件还用于 Windows 桌面快捷方式、应用程序图标和文件类型关联。这种格式的独特之处在于它能在单个文件中存储多个图像尺寸——这是 PNG、JPG 和 WebP 都不具备的能力。
ICO 文件结构：一个文件包含多个尺寸
应该包含哪些尺寸？
一个精心构建的 ICO 文件包含多个分辨率，以应对不同的显示场景：
- 16×16 — 浏览器标签页和收藏夹
- 32×32 — Windows 任务栏和桌面快捷方式
- 48×48 — Windows 资源管理器大图标
- 180×180 — Apple 触摸图标（iOS 主屏幕）
- 192×192 和 512×512 — 安卓/Chrome PWA 图标
现代浏览器会自动从 ICO 文件中选择最合适的尺寸，因此包含多个分辨率可以确保你的图标在任何地方都清晰显示。
分步指南：从 PNG 创建 Favicon
将 PNG Logo 转换为 ICO 格式非常简单。Image Toolbox 可以处理转换——上传你的源 PNG（最好是带透明背景的正方形图像），选择 ICO 作为输出格式，然后下载结果。工具会自动生成多分辨率版本，在输出文件中嵌入 16×16、32×32 和 48×48 版本。
转换后，将 favicon.ico 文件放在网站根目录，并在 HTML <head> 中添加这行代码：
<link rel="icon" type="image/x-icon" href="/favicon.ico">常见的 Favicon 错误
许多网站使用单个 16×16 的 favicon 在高分辨率显示器上放大显示，结果是一个模糊、像素化的 mess。始终从高分辨率源（至少 256×256 像素）生成 favicon，并在 ICO 文件中包含多个尺寸。另一个常见错误是更新 favicon 后忘记清除浏览器缓存——除非你给 href 加上版本查询字符串如 ?v=2，否则用户可能会在几天内看到旧版本。
常见问题解答
可以用 PNG 代替 ICO 做 favicon 吗？
现代浏览器支持 PNG favicon，但 ICO 仍然是兼容性最好的格式，尤其对旧版浏览器和书签系统。ICO 的多分辨率能力也能确保图标在每个尺寸下都好看。为了最大兼容性，建议使用 ICO。
favicon 的 PNG 源图应该多大？
从 512×512 或 1024×1024 像素的源图像开始。ICO 格式会自动从这个高分辨率原始图派生较小的版本（16×16、32×32、48×48）。使用小源图像会导致在高分辨率屏幕上显示模糊的 favicon。
PNG 转 ICO 会降低画质吗？
不会。ICO 支持无损存储，因此嵌入的图像保留与源 PNG 相同的质量。但是，包含许多高分辨率图像的非常大的 ICO 文件可能变得笨重。对于网页 favicon，嵌入最大 128×128 的尺寸通常就足够了。
我们的 Favicon 生成流程
我们从单个 PNG 上传生成包含 16×16、32×32 和 48×48 尺寸的 ICO 文件。48×48 的源图片缩放后效果最好。