Android 添加到主屏幕的 Favicon 设置教程 2026

在 Android Chrome 里点开右上角三个点的菜单，选 "添加到主屏幕"，结果桌面上只出现一个用首字母拼出来的占位图标——你精心设计的 favicon 被浏览器完全无视。这篇文章要解决的就是这个场景：如何让 favicon 在 Android Chrome 的桌面安装流程里正确显示。

用户安装站点时，Android Chrome 不会去读标准的 <link rel='icon'> 标签，它读的是站点对应的 web app manifest。如果 manifest 缺失、格式错误，或者缺少正确的图标条目，Android 主屏幕上的快捷方式就会回退成一张网页截图，或者一个通用的字母图形。

前置条件

动手之前你需要准备三样东西：

一个正方形的源图标，建议从矢量文件导出为 512×512 PNG。
一份可以从站点根目录访问到的 manifest.json，并且响应头必须是有效的 Content-Type: application/manifest+json。
一台可以测试的 Android 真机或模拟器，运行 Chrome 100 或更高版本。

分步配置：Android Chrome 桌面安装的 Favicon

1. 从源文件导出两个尺寸的图标

Android Chrome 在安装对话框里优先使用 192×192 图标，在快捷方式添加后短暂出现的 splash 屏里使用 512×512 图标。两个尺寸都导出为 PNG。W3C manifest 规范把这两个尺寸定义为 purpose: 'any' 图标必须包含的 sizes 值。完整 schema 见 W3C Web App Manifest: icons member。

2. 为自适应启动器做一个 maskable 变体

Android 启动器会根据设备不同，把正方形图标裁剪成圆形、squircle 或圆角矩形。普通的 512×512 PNG 会被切掉边角。做一个 maskable 版本：完整图案放在画布中央 80% 的安全区内，外围 20% 留作透明边距，让启动器自由裁剪而不会丢细节。

文件保存为 icon-maskable-512.png。想深入了解安全区的计算，可以参考我们的 maskable icon 指南。

3. 写 manifest.json

把下面内容放到站点根目录，路径自行调整：

{
  "name": "Your App Name",
  "short_name": "Short",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

purpose 字段是 favicon 在 Android 桌面安装流程里看起来清晰还是被切得乱七八糟的关键。manifest 规范中，'any' 表示标准图标，'maskable' 表示专为应对启动器裁剪设计的图标。

4. 在每个页面链接 manifest

用户可能用来安装的每个页面，其 HTML head 中都必须有 <link> 标签，否则 Android Chrome 找不到 manifest。加上这一行：

<link rel='manifest' href='/manifest.json'>

放在 favicon 声明旁边，不要放进 body 里。浏览器在解析关闭 head 之后会忽略后续的 link 标签。

5. 设置 theme-color，让顶部栏颜色保持一致

既然已经在改 head，就顺便加上 theme-color，从主屏幕打开站点时 Chrome 顶部会染上对应颜色：

<meta name='theme-color' content='#000000'>

6. 跑一遍真实安装流程

在 Android Chrome 真机上打开站点，点右上角三个点的菜单，选 "添加到主屏幕"。对话框预览里应该显示你的 192×192 图标，而不是字母或截图。确认添加后回到桌面——图标应当填满形状，且没有裁掉重要细节。

如果显示的图标不对，继续看下一节。

Android 上常见的坑

缺少 purpose: 'maskable' 条目：Android 启动器会裁剪普通 PNG，你的品牌标识可能被切掉一半。
只提供 icon-512.png，没有 manifest：Chrome 会回退到截图，在用户壁纸上看会很糟糕。
manifest 里用 SVG 图标：Android Chrome 在不同设备上对 SVG manifest 图标的渲染并不稳定。还是用 PNG 稳妥。
混淆 apple-touch-icon：apple-touch-icon 标签只对 iOS 有效，Android 完全忽略。
Chrome 缓存陈旧：如果你刚改过 manifest.json，但安装对话框里还是旧图标，去 Chrome 设置里清掉站点数据，或者用无痕模式打开。

验证成果

用在线 favicon 检测工具确认 manifest 能解析、PNG 能通过 HTTPS 正常加载。Mzu favicondl 可以从一个源文件导出 192×192 和 512×512 两份 PNG，并生成对应的 maskable 版本，省掉一次 Figma 操作。然后至少在一台 Pixel 和一台 Samsung 设备上跑一遍完整安装流程——两家的启动器形状差异明显，这正是 maskable 版本不能省的原因。

想让 favicon 在 Android 桌面安装流程里正确显示，关键就是一份配置正确的 manifest.json：包含 192×192 条目、512×512 maskable 条目，并在每个页面放上 <link rel='manifest'> 标签。不做 maskable 版本，图标会被裁；不做 manifest，Android 直接给你的页面截图。这三件事做到位，用户主屏幕上的快捷方式看起来才像该有的样子。