ICOICNSPNGfaviconmacOS 图标

ICO、ICNS、PNG 图标有什么区别？网站、Windows 和 macOS 图标怎么选

ICO、ICNS 和 PNG 都能用作图标，但它们面向的系统、容器结构、尺寸管理和透明支持方式并不相同。

ToolGarden 推荐的工具优先在浏览器本地运行，文件和文本不必上传到服务器，适合更注重安全隐私的日常处理。

发布于 2026年7月1日更新于 2026年7月3日约 8 分钟阅读作者 ToolGarden

做图标时经常会遇到三个格式：ICO、ICNS 和 PNG。它们看起来都能表示图标，但用途并不一样。选错格式，轻则显示模糊，重则系统或浏览器不识别。

简单来说：ICO 更适合网站 favicon 和 Windows；ICNS 更适合 macOS 应用；PNG 更适合网页、PWA、移动端和作为图标源文件。

ICO、ICNS、PNG 快速对比

格式	主要用途	是否是容器	常见尺寸
ICO	favicon、Windows 图标、快捷方式	是，可以包含多尺寸图标	16、24、32、48、64、128、256px
ICNS	macOS 应用图标、Finder 图标	是，可以包含多尺寸资源	16、32、64、128、256、512、1024px
PNG	网页图标、PWA、移动端、图标源文件	不是，单个文件通常只有一个尺寸	32、64、180、192、512、1024px

什么时候选择 ICO？

如果你要做网站 favicon，ICO 仍然是非常稳妥的选择。它兼容历史浏览器，也能在一个文件里放入多种尺寸。浏览器标签页、收藏夹、桌面快捷方式可能需要不同尺寸，ICO 容器可以让它们自动选择。

网站 favicon：推荐提供 favicon.ico。
Windows 桌面图标：ICO 是原生常用格式。
快捷方式图标：ICO 可以适配多种显示尺寸。
需要兼容旧环境：ICO 的兼容性更稳。

什么时候选择 ICNS？

ICNS 是 macOS 图标容器格式，常用于 macOS 应用图标和 Finder 显示。它也可以包含多套尺寸，最高常见到 1024px，以适配 Retina 屏和不同 Finder 视图。

macOS 应用图标：优先使用 ICNS。
Finder 大图标预览：需要高分辨率资源。
Electron 或桌面应用打包：macOS 平台通常需要 ICNS。

什么时候选择 PNG？

PNG 不是图标容器，但它清晰、无损、支持透明背景，所以非常适合作为网页图标、PWA 图标和图标制作的源文件。缺点是每个 PNG 通常只代表一个尺寸，你需要生成多张不同尺寸的 PNG。

PWA manifest icons：常见 192x192 和 512x512 PNG。
Apple Touch Icon：常见 180x180 PNG。
网页 UI 图标：PNG 适合需要位图透明效果的场景。
图标源文件：后续可以继续转换成 ICO 或 ICNS。

技术实现差异：它们到底哪里不一样？

ICO、ICNS 和 PNG 的最大区别不只是扩展名，而是文件结构。ICO 和 ICNS 是图标容器，PNG 是单张位图图片。

ICO：文件头使用 little-endian 结构，包含 ICONDIR 和多个 ICONDIRENTRY，每个条目指向一张指定尺寸的图标数据。
ICO 像素数据：小尺寸常使用 32 位 BGRA DIB 数据，256px 条目经常直接保存 PNG 字节。
ICNS：文件以 icns 标识开头，使用 big-endian 长度字段，每个资源块有自己的类型，例如 icp4、icp5、icp6、ic07、ic08、ic09、ic10。
ICNS 图像数据：现代 ICNS 常把不同尺寸的 PNG 数据放入对应资源块，适配 macOS 多尺寸显示。
PNG：单文件只描述一张图片，包含 IHDR、IDAT、IEND 等块，支持无损压缩和 Alpha 透明，但不会自动包含多尺寸版本。
多尺寸 PNG ZIP：本质上是把 16、32、64、128、256、512、1024px 等 PNG 文件打包成 ZIP，方便网页或 PWA 按需引用。

不同场景怎么选？

场景	推荐格式	说明
网站 favicon	ICO + PNG	ICO 做兼容，PNG 补充现代浏览器和 Apple Touch Icon
Windows 桌面图标	ICO	系统原生支持，适合快捷方式和桌面图标
macOS 应用图标	ICNS	macOS 原生图标容器，支持高分辨率资源
PWA 图标	PNG ZIP	manifest 通常引用多张 PNG，例如 192px 和 512px
设计源文件	SVG 或高分辨率 PNG	便于后续生成 ICO、ICNS 和 PNG 多尺寸资源

用 toolgarden.xyz 一次生成三类图标

ToolGarden 的图片转 Icon 工具会在浏览器本地把源图渲染成多种尺寸，然后根据你选择的格式打包：ICO 会生成 16 到 256px 图标条目，ICNS 会生成最高 1024px 的 macOS 图标资源，PNG ZIP 会生成一组独立 PNG 文件。

总结

ICO、ICNS、PNG 没有绝对谁更好，关键看使用场景。网站和 Windows 优先 ICO，macOS 应用优先 ICNS，网页、PWA 和设计源文件优先 PNG。

最省心的做法是从一张高质量源图出发，一次生成多种图标格式。这样网站、Windows、macOS 和 PWA 都能拿到合适的图标资源。

常见问题

Q.为什么 Electron 应用要同时准备 ICO、ICNS 和 PNG 三种图标？

因为 Electron 打包出的应用在不同系统上使用不同的图标格式：Windows 使用 ICO（.exe 内嵌或安装包图标），macOS 使用 ICNS（.app/Contents/Resources），Linux 常用 PNG。打包工具（electron-builder、electron-forge）会根据构建目标读取不同格式的资源。如果只提供一种，其它平台要么使用默认灰色图标，要么被打包工具低质量转换。为每个平台准备各自的原生格式，并放入相应目录，是保证跨平台图标质量的标准做法。

Q.PWA 是不是不需要 ICO 和 ICNS，只用 PNG 就行？

对，PWA 图标基本只需要 PNG。manifest.webmanifest 里的 icons 字段引用一组不同尺寸的 PNG（常见 192x192 和 512x512），系统在安装到桌面或主屏幕时会挑选合适的尺寸。ICO 和 ICNS 是桌面原生应用的格式，PWA 走的是浏览器安装流程，不需要这些容器格式。不过你的网站本身仍然需要 favicon.ico 用于浏览器标签页，以及 apple-touch-icon PNG 用于 iOS 主屏快捷方式。

Q.ICNS 里的 1024x1024 图标真的有必要吗？

对 macOS 应用来说非常必要。Finder 的图标视图和 Launchpad 可以放大到 512x512 甚至更大，Retina 屏进一步翻倍到 1024x1024。如果 ICNS 里最大尺寸只有 256，那么在这些场景下会被拉大，出现明显模糊。Apple 的应用图标模板本身就是 1024x1024 起步。使用 iconutil 或 png2icns 之类工具生成 ICNS 时，建议至少包含 16、32、64、128、256、512、1024 七套，以及各自的 @2x 版本。

Q.为什么有的网站 HTML 里同时有 rel=icon 和 rel=shortcut icon？

rel="shortcut icon" 是早期 IE 的历史遗留写法，标准 HTML 定义的是 rel="icon"。现代浏览器两种都认，但只使用 rel="icon" 就足够了。同时保留是为了兼容极旧的 IE 版本。除非你的用户还大量使用 IE9 或更早浏览器，否则可以只写 rel="icon"，并搭配 sizes、type 属性。关键是提供 apple-touch-icon（Safari 和 iOS 主屏）以及 manifest icons（PWA），这两个反而更容易被开发者忽略。

Q.如果只做纯静态网站，最少要准备哪些图标文件？

最低配置是三个文件：favicon.ico（16/32/48 多尺寸，用于浏览器标签页和历史兼容），apple-touch-icon.png（180x180，用于 iOS 主屏），以及一到两张 manifest 使用的 PNG（192x192 和 512x512，用于 PWA 和 Android 主屏）。这套组合可以覆盖 99% 的浏览器与设备。如果网站需要打包成桌面应用，再额外补 ICO 大尺寸和 ICNS；否则不需要 ICNS。