2026 年你需要哪些 favicon 尺寸?理想的文件组合

2026 年理想的 favicon 组合包括:多尺寸 favicon.ico(16、32、48 px)、一个 SVG、一个 180x180 的 Apple touch icon,以及 192/512 px 的 PWA 图标。本指南提供完整的尺寸表、可直接复制的 HTML 和 manifest.json。

Tomáš Rohlena 阅读约 11 分钟
Favicon sizes / Credit: MakeFav.com
Favicon sizes / Credit: MakeFav.com

2026 年理想的 favicon 组合是:一个包含 16、32 和 48 px 图像的 favicon.ico,一个 96x96 PNG(用于 Google 搜索),一个可选的 SVG favicon,一个 180x180 的 apple-touch-icon.png,以及在 Web 应用清单中声明的 192x192 和 512x512 PNG(外加一个可遮罩的 512 图标)。只有在必须支持非常老旧的设备时,才需要 Windows 磁贴和旧版 Apple 尺寸。下文将逐一解释原因,并提供尺寸表、可直接使用的 HTML 以及需要避免的常见错误。

过去的 favicon 环境十分混乱:每个浏览器和操作系统都要求各自的尺寸,于是出现了臭名昭著的 20 行 <head> 代码块。如今其中大部分都已过时。现代浏览器会缩放一张优质图标,iOS 只需要一种尺寸,而 Android 会读取清单文件。本文将区分哪些是真正必需的,哪些只是锦上添花。

简短回答:理想的 favicon 文件组合

  • 网站根目录下的 favicon.ico(一个文件包含 16、32、48 px)。浏览器、订阅阅读器和许多工具仍会自动请求 /favicon.ico。
  • favicon.svg(可选,但推荐),可在任意尺寸下清晰显示,并支持深色模式。
  • PNG 16x16、32x32 和 96x96,作为明确的备用图标。96 px 版本有助于 Google 搜索,因为它要求尺寸为 48 px 的倍数。
  • apple-touch-icon.png,180x180,不透明,无透明度。
  • manifest.json 中的 192x192 和 512x512 PNG,外加用于 Android 的 可遮罩 512x512 图标。
  • 用于移动端浏览器界面着色的 theme-color meta 标签。
  • Windows 磁贴(70、150、310 px)及 browserconfig.xml,仅用于旧版 Windows 和 IE11 固定网站。

Favicon 尺寸表:用途、文件名和优先级

请将此表作为检查清单。“必需”表示缺少它普通网站会显得出错或不完整;“推荐”表示能明显提升质量;“可选”表示小众或旧版用途。

尺寸格式典型文件名用途优先级
16、32、48 pxICO(多图像)favicon.ico浏览器标签页、书签、默认的 /favicon.ico 请求、旧版客户端必需
16x16PNGfavicon-16x16.png1x 屏幕上的标准标签页图标可选(ICO 已涵盖)
32x32PNGfavicon-32x32.png高 DPI 屏幕上的标签页图标、任务栏快捷方式推荐
96x96PNGfavicon-96x96.pngGoogle 搜索结果(48 px 的倍数)、部分桌面快捷方式推荐
可缩放SVGfavicon.svg任意尺寸下都清晰的图标,通过 prefers-color-scheme 支持深色模式可选(推荐)
180x180PNGapple-touch-icon.pngiOS 和 iPadOS 主屏幕、Safari 收藏夹和分享面板必需
57、60、72、76、114、120、144、152、167PNGapple-touch-icon-152x152.png 等旧版 iOS 和老款 iPad可选(旧版)
192x192PNGweb-app-manifest-192x192.pngAndroid 主屏幕、Chrome 安装提示PWA 必需
512x512PNGweb-app-manifest-512x512.pngPWA 启动画面、应用商店列表、安装对话框PWA 必需
512x512(可遮罩)PNGmaskable-512x512.pngAndroid 自适应图标形状(圆形、圆角方形)PWA 推荐
70x70、150x150、310x150、310x310PNGmstile-150x150.png 等通过 browserconfig.xml 实现的 Windows 开始菜单磁贴可选(旧版)

favicon.ico:一个文件包含 16、32 和 48 px

ICO 文件是一个可容纳多张位图的容器。一个好的 favicon.ico 应包含 16x16、32x32 和 48x48 的图像,以便浏览器或操作系统选择最接近的匹配。请将它放在域名根目录(https://example.com/favicon.ico)。即使你的 HTML 指向其他位置,许多爬虫、RSS 阅读器和旧版浏览器仍会请求这个确切的 URL,因此提供它可以避免日志中出现 404 噪音。

不要简单地把 PNG 重命名为 .ico。大多数浏览器能容忍这种做法,但有些工具会拒绝它,而且你会失去多分辨率的优势。请导出真正的 ICO。

PNG favicon:16、32 和 96 px

带有明确 sizes 的 PNG 链接可以让浏览器无需解析 ICO 就能选出最合适的位图。实际上,32x32 可覆盖高 DPI 标签页,而 16x16 如今几乎是多余的。值得添加 96x96 尺寸,因为 Google 搜索会在结果旁显示 favicon,并要求使用边长为 48 px 倍数的方形图标(48x48、96x96、144x144 等)。在为移动端结果缩小图像时,96 px 文件比 48 px 文件能为 Google 提供更清晰的源图。

设计提示:在 16 px 时,细节会消失。请使用醒目、简单的形状、高对比度,并尽量少用甚至不用文字。导出前,你可以在 MakeFav 编辑器 中调整并预览你的图标。

SVG favicon 与深色模式

SVG favicon 是一个极小的单文件,在任何屏幕密度下都保持清晰。基于 Chromium 的浏览器和 Firefox 均支持它。Safari 的支持历来有限,因此切勿只依赖 SVG:请保留 ICO 和 PNG 备用图标。

最大的优势是主题适配。由于 SVG 可以包含 CSS,你可以使用 prefers-color-scheme 让图标适应用户的配色方案:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

请注意,该媒体查询反映的是浏览器或操作系统的主题,也就是标签栏所使用的主题。它不会跟随你自己网站上的主题切换。

有一个已知的小问题:当同时列出 ICO 和 SVG 时,Chrome 可能会选择 ICO。以 sizes="32x32" 声明 ICO,并在其后列出 SVG,可以让 Chrome 优先选择 SVG,如下方代码所示。

Apple touch icon:180x180 与旧版尺寸

当用户把你的网站添加到 iOS 或 iPadOS 主屏幕时,Safari 会使用 apple-touch-icon。如今只需一个 180x180 px 的 PNG 就足够了:iOS 会为旧设备和 iPad 缩小它。请将其命名为 apple-touch-icon.png 并放在根目录;如果没有 link 标签,iOS 甚至会默认查找该文件。

Apple 图标的规则:

  • 不要使用透明度。iOS 会用黑色填充透明像素,因此透明的徽标常常会变成一团黑色。请添加纯色背景。
  • 不要使用圆角。iOS 会应用自己的圆角遮罩。请提供完整的方形图。
  • 请让关键内容远离边缘,因为四角会被裁切。

什么时候需要旧版尺寸(57、72、76、114、120、144、152、167)?只有在你需要支持 iOS 6 或更早版本,或希望对 iPad Pro(167 px)和 iPad(152 px)进行逐设备的精确像素控制时才需要。对于 2026 年几乎所有网站来说,仅一个 180x180 文件就足够了。下面的最大兼容性方案为求完整,包含了其中几个。

Android 和 PWA 图标:192、512 与可遮罩图标

Android 上的 Chrome 和其他支持 PWA 的浏览器会从 Web 应用清单而不是 <link rel="icon"> 中读取图标。要使应用可安装,你至少需要一个 192x192 和一个 512x512 的 PNG。192 px 图标用于主屏幕和应用启动器;512 px 图标出现在启动画面和安装对话框中。

可遮罩图标与安全区域

Android 自适应图标可能会根据设备被裁剪成圆形、圆角方形或其他形状。可遮罩(maskable)图标专为安全裁剪而设计:重要内容必须位于安全区域内,即一个居中、直径为图像 80% 的圆(半径等于边长的 40%)。对于 512x512 的文件,这意味着要把徽标保持在直径约 410 px 的圆内,并将背景色延伸到四条边,这样遮罩后就不会出现空隙。

请用 "purpose": "maskable" 把可遮罩图标声明为单独的条目。避免在同一个文件上使用 "any maskable":遮罩所需的内边距在图标未被遮罩显示时会显得太小。

manifest.json 示例

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

请以 application/manifest+json(或 application/json)提供该文件,并在每个页面中通过 <link rel="manifest" href="/manifest.json"> 链接它。有些项目将其命名为 site.webmanifest;名称并不重要,重要的是链接。

Windows 磁贴与 browserconfig.xml

Windows 8.1 和 10 允许用户将网站固定到开始菜单,IE11 和旧版 Edge 会从 browserconfig.xml 读取磁贴图像。常用尺寸为 70x70(小)、150x150(中)、310x150(宽)和 310x310(大)。基于 Chromium 的 Edge 改用清单文件和常规 favicon,因此这是一项旧版功能。仅当你的受众中仍包含较旧的 Windows 环境(例如企业环境)时才需要包含它。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color:为浏览器界面着色

theme-color meta 标签告诉移动端浏览器(以及部分桌面浏览器)地址栏或标题栏应使用哪种颜色。它不是 favicon,但属于同一套品牌元素。你可以分别为浅色和深色模式提供不同的值:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

精简现代方案 vs. 最大兼容性方案

精简现代方案(推荐大多数网站使用)

五个文件即可覆盖 99% 以上的实际使用场景:favicon.ico、favicon.svg、apple-touch-icon.png(180x180),以及两个清单图标(192 和 512)。如果 Google 搜索中的可见性很重要,请加上 96x96 PNG;如果你发布 PWA,请再加上可遮罩图标。

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

最大兼容性方案

当你面向广泛的或企业级受众,或希望覆盖所有可能的客户端时,请选择此方案。它增加了明确的 PNG 尺寸、旧版 Apple 尺寸、Windows 磁贴和主题色。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

请注意以 / 开头的根相对路径。它们在任何页面层级下都有效,这也引出了最常见的错误。

常见的 favicon 错误及修复方法

1. 路径错误

像 href="favicon.ico" 这样的链接是相对于当前 URL 解析的,因此在 / 上可用,但在 /blog/post/ 上会失效。请使用根相对路径(/favicon.ico)或绝对 URL。同时请检查文件确实存在:直接在浏览器中打开每个 URL,确认它返回 HTTP 200,而不是重定向到 404 页面或登录页。

2. 缺少或错误的 sizes 属性

没有 sizes,浏览器必须先下载图标才能检查它们,并且可能选错。请始终在 PNG 链接上声明 sizes,并确保它与真实的像素尺寸一致。标注为 32x32 但实际是 64x64 的文件会导致结果不一致。

3. 过于激进的缓存

浏览器会长时间缓存 favicon,而且往往独立于页面缓存。品牌更新后,旧图标可能会持续显示数天。请更改文件名或添加版本查询字符串(/favicon.ico?v=2),并更新 link 标签。强制刷新通常不会更新标签页图标;直接打开图标 URL 并重新加载通常可以。

4. 非方形图像

Favicon 必须是方形的。矩形徽标会被拉伸、裁剪或以不可预测的方式加上黑边。请设计专用的方形标志,例如首字母或符号,而不是缩小一个宽幅的文字标志。

5. 透明的 Apple touch icon 变黑

iOS 会用黑色填充透明区域。请为 180x180 图标提供不透明背景,并且不要预先做圆角处理。

6. 没有安全区域的可遮罩图标

如果徽标触及可遮罩图标的边缘,Android 会将其裁掉。请将其保持在中央 80% 的圆内,并用背景色填满整个画布。

7. 阻止爬虫访问图标

如果 robots.txt 禁止访问你的 favicon 路径,Google 就无法抓取它,并会在搜索结果中显示通用的地球图标。还要记住,Google 要求 favicon 与页面位于同一主机,并且只会偶尔刷新,因此更改可能需要数天或数周才会显示。

8. 忘记清单链接或 purpose

未被链接的清单,或缺少 192 和 512 px 图标的清单,会导致 Chrome 无法显示安装提示。请在浏览器开发者工具的“应用程序”(Application)标签中验证它。

一键生成整套文件

在图像编辑器中手动制作十几个文件,再转换为 ICO 并编写清单,既繁琐又容易出错。MakeFav 可以根据一张图片、一段文字或一个 emoji 生成上述所有文件:多尺寸 favicon.ico、PNG、SVG、Apple touch icon、192/512 PNG、可遮罩图标、Windows 磁贴、manifest.json 和 browserconfig.xml,另外还有可直接粘贴的 HTML 代码片段,全部打包在一个 ZIP 中下载。你可以在编辑器中微调背景、内边距和形状,使用 favicon 检测器检查现有网站,并通过开发者资源实现自动化生成。

部署检查清单

  1. 将所有文件上传到网站根目录。
  2. 将 HTML 代码片段粘贴到每个页面(或你的共享布局)的 <head> 中。
  3. 确保路径是根相对路径,并且返回 HTTP 200。
  4. 检查浅色和深色模式、iOS 主屏幕安装以及 Android 安装。
  5. 运行检测器以发现缺失或不匹配的尺寸。
  6. 如果替换了旧图标,请用版本字符串清除缓存。

常见问题

2026 年我还需要 favicon.ico 吗?

需要。尽管现代浏览器接受 PNG 和 SVG,但许多爬虫、订阅阅读器、电子邮件客户端和旧版浏览器仍会直接请求 /favicon.ico。包含 16、32 和 48 px 图像的多尺寸 ICO 文件很小,却能避免图标缺失和 404 错误。

Google 搜索的 favicon 应该是什么尺寸?

Google 要求 favicon 为方形,且边长是 48 px 的倍数,至少为 48x48。96x96 的 PNG 是稳妥的选择,SVG 也受支持。Google 还要求该文件可被抓取,因此请不要在 robots.txt 中屏蔽它。更新可能需要数天或数周才会显示。

Apple touch icon 用 180x180 够吗?

对几乎所有网站来说,够了。iOS 和 iPadOS 会为当前所有设备缩小 180x180 的 PNG。较旧的尺寸(57 到 152 px)只对非常老旧的 iOS 版本有意义。请记得使用不透明背景,以免图标变黑。

什么是可遮罩图标,我需要吗?

可遮罩图标是专为 Android 自适应图标形状设计的 512x512 PNG。其重要内容位于中央直径为 80% 的圆内,背景则填满整个方形。只有在提供可安装的 PWA 时才需要它,但它能让图标看起来更原生,而不是呆在一个白色圆圈里。

为什么我更换后旧的 favicon 仍然显示?

浏览器会单独且长时间地缓存 favicon。请重命名文件或添加版本查询字符串(如 ?v=2),更新 link 标签,然后直接打开图标 URL 并重新加载。搜索引擎刷新其自身副本可能需要更长时间。

相关文章

几秒钟内创建您的 favicon

免费 favicon 生成器,支持 ICO、Apple、Android 和 PWA 图标。

打开生成器
广告