应用图标与网站图标:ICO与PNG以及每个平台的期望
为每个平台选择正确图标格式的清晰指南
生成多尺寸ICO图标在现代软件中无处不在,从浏览器标签页中的小图像到手机主屏幕上的大正方形。尽管表面上看起来相似,但这些图标服务于不同的目的,遵循不同的格式规则,并在非常不同的场景中显示。混淆它们或使用错误的格式会导致模糊的标签页、缺少的书签图标或应用商店拒绝。
两个最常见的类别是网站图标和应用图标。网站图标("favorite icon"的缩写)是出现在浏览器标签页、书签列表和浏览器历史记录中的小图像。应用图标是代表桌面或移动操作系统上本机应用程序的图像。两者都从图像文件开始,但它们在格式要求、尺寸期望以及平台如何发现和使用它们方面有所不同。
本文解释了每种类型的图标是什么、何时应该使用ICO格式与PNG,以及主要平台实际期望什么。无论您是在构建网站、打包桌面应用程序还是发布移动应用,您都将确切知道要提供哪种格式和尺寸。
什么是网站图标?
网站图标是Web浏览器与您的网站一起显示的图标。您在浏览器标签页中的页面标题旁边、书签列表中、浏览器历史记录中,以及在某些情况下在地址栏或搜索结果中看到它。该术语来自Internet Explorer的原始实现,它在每个网站的根目录中查找名为favicon.ico的文件。
从历史上看,网站图标必须采用ICO格式。Internet Explorer需要它,没有替代方案。ICO格式将多个尺寸嵌入单个文件的能力使其成为实用的选择:一个文件可以为标签页提供16x16图像,为书签栏提供32x32图像。现代浏览器(Chrome、Firefox、Safari、Edge)现在也接受通过页面HTML中的<link>标签指定的PNG网站图标,但如果没有显式链接标签,它们仍然会回退到/favicon.ico。
为了在所有浏览器(包括旧版本和爬虫)之间获得最大兼容性,在网站根目录提供favicon.ico文件仍然是最安全的方法。此ICO文件应至少包含16x16和32x32尺寸。许多开发人员还包括48x48用于高DPI浏览器标签页。您可以为喜欢它们的平台补充PNG链接标签,但ICO文件充当您的安全网。
什么是应用图标?
应用图标代表操作系统界面中的本机应用程序。在Windows上,它出现在桌面、任务栏、开始菜单和ALT+TAB切换器中。在macOS上,它显示在停靠栏、Launchpad和Finder中。在iOS和Android上,它在主屏幕和应用抽屉中占据一个位置。每个平台都有自己的格式要求和尺寸规格。
Windows使用ICO格式用于应用程序图标。Windows可执行文件(.exe)嵌入操作系统读取和显示的ICO资源。此ICO应包含16、32、48、64、128和256像素的层,以涵盖每个显示场景和DPI缩放级别。快捷方式(.lnk文件)也可以引用外部ICO文件。
macOS使用ICNS格式,这是Apple的专有多分辨率图标容器。ICNS文件可以包含最多1024x1024像素的尺寸。源图像通常是在构建过程中编译到ICNS包中的PNG。
iOS需要特定尺寸的PNG图像(60x60为2x和3x,加上iPad、Spotlight和设置的变体)。Apple不使用ICO或ICNS用于iOS应用图标。图像作为普通PNG包含在应用包的资产目录中。
Android也使用PNG,通常作为多种密度(从mdpi到xxxhdpi)的自适应图标层(前景和背景)提供。Play商店图标是512x512 PNG。
Web应用(PWA)使用manifest.json文件中引用的PNG图标。常见尺寸是192x192和512x512。当用户安装PWA时,这些图标出现在主屏幕上。
ICO与PNG:何时使用哪种格式
由于ICO和PNG都用于图标,自然的问题是:应该选择哪一个?答案完全取决于图标的使用位置。这是一个涵盖最常见场景的决策表。
| 用例 | 推荐格式 | 为什么 |
|---|---|---|
| 网站网站图标(根文件) | ICO | 通用浏览器回退;一个文件中的多尺寸 |
| 网站网站图标(链接标签) | PNG(带ICO回退) | 现代浏览器更喜欢PNG;ICO涵盖传统浏览器 |
| Windows应用程序图标 | ICO | Windows对可执行文件和快捷方式的要求 |
| macOS应用程序图标 | ICNS(来自PNG源) | macOS需要;从PNG源图像构建 |
| iOS应用图标 | PNG | Apple需要;每个场景的特定尺寸 |
| Android应用图标 | PNG | Android需要;自适应图标层 |
| PWA主屏幕图标 | PNG | 在manifest.json中引用;192和512尺寸 |
| Electron/桌面应用 | ICO(Windows)+ICNS(macOS)+PNG(Linux) | 每个操作系统需要自己的格式 |
实际上,大多数项目既需要ICO文件(用于网站图标和任何Windows目标)又需要一组PNG文件(用于移动平台、PWA和macOS源图像)。ICO文件处理需要或首选ICO的场景,而PNG涵盖其他所有内容。您可以使用Any2ICO从用于其他平台的相同源PNG生成ICO部分,在任何地方保持图标视觉一致。
实用建议和常见错误
跨平台正确设置图标需要注意一些容易忽视的细节。这是开发人员最常犯的错误,以及直接的修复方法。
依赖单个PNG用于所有内容:单个512x512 PNG适用于某些场景,但在其他场景中会失败。查找/favicon.ico的浏览器找不到它。Windows可执行文件无法嵌入PNG作为其图标资源。始终为网站图标和Windows用例生成专用的ICO文件,即使PNG是您的主要源格式。
在ICO文件中仅使用一个尺寸:仅32x32的ICO文件在浏览器标签页中看起来不错,但在Windows资源管理器的大图标视图中变成模糊的斑点。始终包含多个尺寸。完整集合(16到256)确保每个显示场景都有像素完美的层可供绘制。
忘记高DPI和Retina显示器:现代屏幕包含的像素是标准显示器的两到三倍。在1080p显示器上看起来不错的16x16网站图标在Retina显示器上显得微小而柔和。包含32x32层(浏览器在16px标签页插槽使用2x缩放)和48x48层用于3x缩放或高DPI标签页。
不跨平台测试:在开发机器上看起来完美的图标在另一个操作系统或浏览器上可能看起来完全不同。至少在Chrome、Firefox、Safari和Edge中测试您的网站图标。如果您正在构建桌面应用,在Windows上以100%、150%和200% DPI缩放测试ICO。几分钟的测试可以节省数小时的用户投诉。