为什么 Favicon 覆盖很重要
如今已经不只是浏览器标签页的事了。这里说明你为什么需要整套图标。
什么是 app icon?
App icon 是你在智能手机上按下以启动应用的图像。随着分辨率更高的新手机不断推出,就需要分辨率更高的 app icon。开发者仍然希望保持对分辨率较低的旧手机的支持,所以在创建 app icon 时,你需要为同一张图像制作多个尺寸的变体。这对所有智能手机(如 iPhone 和 Android)乃至平板(如 iPad)都适用。
这个工具有什么用?
尽管许多现代浏览器都支持以 GIF、PNG 或其他常见文件格式保存的 favicon,但所有版本的 Internet Explorer 仍然要求 favicon 保存为 ICO 文件(一种微软的图标格式)。这个工具提供了一种简便的方式,把任意 GIF、PNG 或 JPEG 转换为 ICO,而 ICO 被所有现代浏览器支持。它还让你可以通过在线编辑器从零创建 favicon,并手动微调生成的 favicon 以得到你想要的结果。
使用 favicon
用这个工具生成一个 favicon 之后,把它下载并保存到你站点的根目录。然后在你 HTML 文档的 head 中加入下面的代码。
<link href="https://www.example.com/favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.example.com/apple-touch-icon.png" rel="apple-touch-icon">为什么完整覆盖很重要
| 展示面 | 覆盖能给你带来什么 |
|---|---|
| 移动端主屏幕 | 用户经常在 iOS 和 Android 上把网站添加到主屏幕。没有专门的 touch icon,你的站点就会看起来像一张通用截图或一个默认占位符,损害你品牌的专业形象。 |
| SEO 和搜索结果 | Google 和其他搜索引擎常常在搜索结果旁边显示 favicon。一个清晰、高质量的图标可以提升点击率,并帮助用户瞬间辨认出你的品牌。 |
| 品牌信任 | 不一致会破坏信任。如果你的图标在标签页里清晰锐利,但在书签栏里发虚,或在平板上干脆缺失,这就传递出缺乏对细节关注的信号。完整覆盖能确保各处都是像素级完美的品牌呈现。 |
| 平台集成 | 从 Windows 开始菜单磁贴到 macOS 固定标签页和 Safari 阅读列表,不同的操作系统使用各自独特的格式。全部提供才能让你的站点在用户设备上感觉是原生的。 |
看看实际效果
当网站实现了恰当的 favicon 覆盖时,它们的图标会在所有平台和场景中一致地呈现。留意这些大公司的 favicon 如何让它们的链接在浏览器标签页、书签、搜索结果以及被分享时都能被瞬间识别。这种视觉一致性建立起品牌辨识度和信任:用户即使在拥挤的列表或搜索结果中也能一眼认出你的站点。
没有恰当的 favicon 覆盖,你的链接就会显示为通用占位符或损坏的图像,让用户更难辨认你的品牌,也会降低点击率。以下是一些在完整 favicon 覆盖上投入过的公司示例:
netflix.com、apple.com、google.com、microsoft.com、amazon.com、meta.com、x.com、youtube.com、github.com、spotify.com、adobe.com、nvidia.com、tesla.com、uber.com、airbnb.com、stripe.com、shopify.com、notion.so、figma.com、dropbox.com、linkedin.com、instagram.com、tiktok.com、discord.com、slack.com、zoom.us、salesforce.com、oracle.com、ibm.com、intel.com、paypal.com、reddit.com 和 twitch.tv。
我们支持的图标
逐一说明我们的工具生成的每一种文件类型及其用途。
| 尺寸 | 用在哪里 | 备注 |
|---|---|---|
| 180x180, 120x120, 60x60 | Apple touch icon,iPhone 和 Retina | 用于多代 iPhone,让你的图标在高密度 Retina 屏上保持锐利。 |
| 167x167, 152x152, 76x76 | Apple touch icon,iPad 和平板 | iPad 主屏幕以不同于手机的尺寸显示图标。 |
| 57x57, 72x72 | Apple touch icon,旧版 iOS | 仍然为可能还在使用的老旧设备保留,以最大化兼容性。 |
| 192x192, 512x512 | Android 和 Chrome,通过 manifest | Android 设备依赖高分辨率 PNG,192x192 是主屏幕快捷方式的标准尺寸。当存在 manifest 时,它并不总是作为独立文件生成,但我们的工具会优先生成 android-icon-192x192.png 以供直接链接和纳入 manifest,从而让“添加到主屏幕”提示和启动屏正常工作。 |
| 32x32 | 标准 favicon,现代桌面浏览器标签页 | 黄金标准:细节足以应对 retina 屏,同时文件体积依然很小。 |
| 16x16 | 标准 favicon,地址栏和书签列表 | 经典尺寸。对于非 retina 屏和严格的 16px 场景不可或缺。 |
| 96x96 | 标准 favicon,桌面快捷方式和 Google TV | 也被一些需要更大位图的特殊浏览器场景使用。 |
| 144x144 | Windows 磁贴,ms-icon-144x144.png | 当用户把你的站点固定到 Windows 开始菜单时,Windows 会查找特定的元标签和图像。我们还会生成磁贴颜色元数据,让它与你品牌的配色相匹配。 |
同一个标识,在真正重要的那些尺寸下
其他考量
| 考量 | 细节 |
|---|---|
| Web app manifest | 现代 PWA(渐进式 Web 应用)功能高度依赖 manifest.json 文件。这个文件告诉浏览器你的应用在被安装时应如何表现,包括使用哪些图标。我们的工具会自动生成它。 |
| Theme color | theme-color 元标签可自定义移动设备上浏览器工具栏的颜色,提供一种与你站点设计相匹配、更沉浸的体验。 |
| SVG favicon | 虽然我们专注于对 PNG 的广泛兼容,但现代浏览器已开始支持 SVG favicon(link rel="icon" type="image/svg+xml")。它们非常适合缩放,但仍需要 PNG 兜底以获得完整支持,比如 Safari 或较旧的浏览器。 |