# iOS 为主屏 Web 应用选用哪个图标

> 在 iOS 18.6.2 上，180 px 的 apple-touch-icon 优先于 manifest 图标；没有它时用 manifest 的 any 192 px 图标；两者都没有的页面得到字母图块。

import LabEvidenceLine from '@components/lab/LabEvidenceLine.astro';
import LabHarnessLinks from '@components/lab/LabHarnessLinks.astro';
import LabResults from '@components/lab/LabResults.astro';
import LabBacks from '@components/lab/LabBacks.astro';
import LabProvenance from '@components/lab/LabProvenance.astro';

<LabEvidenceLine behaviour="home-screen-icon-selection" locale="zh" />

<span id="问题"></span>

页面同时声明 `apple-touch-icon` 和 manifest 图标、只声明 manifest 图标、或两者都不声明时，iOS 18.6.2 会把哪张图放到主屏幕上？

2026-10-20 的图标测试使用 iPhone 16 Pro，系统为 iOS 18.6.2（22G100）。iOS 优先选 180 px 的 apple-touch-icon，没有它时选 manifest 的 any 192 px 图标，两者都没有时显示字母图块。

<span id="测了什么"></span>

## 图标标记与安装情形

测试图标上印着来源，主屏幕截图能直接辨认 iOS 选了哪个文件。180 px 的 `apple-touch-icon` 是红色，标着「180 apple-touch」；manifest 中 `any` 用途的 192 px 图标是蓝色，标着「192 manifest any」；512 px 和 maskable 图标各有自己的标记。从 Safari 添加的四个页面如下。

| 主屏幕项目 | 页面 | 声明的图标 |
|---|---|---|
| PWA Lab | `/lab/device-tests/` | `apple-touch-icon` 180；manifest `any` 192 与 512、`maskable` 192 与 512；一个 96 px favicon |
| Lab no-ATI | `/lab/device-tests/t3/manifest-only/` | manifest `any` 192 与 512、`maskable` 192 与 512；一个 96 px favicon；没有 `apple-touch-icon` |
| T1 probe | `/lab/device-tests/t1/no-manifest/` | 无 |
| iOSAddtoHom… | `/reference/installation/ios-add-to-home-screen/`（当天更早时添加） | 只有 SVG favicon（`/favicon.svg`）；没有 manifest，没有 `apple-touch-icon` |

我们记录了添加时操作员的描述（O，N11、N12、N52），并查看了后续截图和录屏首帧中的主屏幕（S，N63）。演示应用和后来的两个应用（SBS transl、Perm Test）也出现在这些画面里。页面无法得知 iOS 选了哪个图标，因此没有仪器读数。

## 怎么运行

1. 在 Safari 中打开 `https://openpwa.net/lab/device-tests/`，添加到主屏幕（**分享** → **添加到主屏幕** → **添加**）。
2. 用同样的方式添加 `https://openpwa.net/lab/device-tests/t3/manifest-only/`。
3. 添加 `https://openpwa.net/lab/device-tests/t1/no-manifest/`。
4. 回到主屏幕，截一张能看到三个新图标的图。分享前把其他 App 裁掉。
5. 读每个图标上的标记。「180 apple-touch」表示用了 `apple-touch-icon`，「192 manifest any」表示用了 manifest 的 `any` 图标；其他可能是 512 或 maskable 标记、favicon、页面截图，或一个普通的字母图块。
6. 可选操作是在第 1 步点按**添加**之前截取添加界面，界面在添加之前会显示一个图标图块。M1 状态栏测试应用的这个图块是它的 `apple-touch-icon`（N66）；图块是否总与添加后的图标一致，本次没有核对。

截图按 `<YYYY-MM-DD>_<device-slug>_<os-version>_<test-id>_<n>.png` 命名，例如 `2026-10-20_iphone16pro_ios18.6.2_T3_1.png`。

<LabHarnessLinks behaviour="home-screen-icon-selection" locale="zh" />

## 结果

在 iOS 18.6.2 上，PWA Lab 显示红色的「180 apple-touch」图标，没有用任何 manifest 图标。Lab no-ATI 显示蓝色的「192 manifest any」图标，没有用 512 px 或 maskable 图标。T1 probe 得到黑色字母图块「T」（名称「T1no-manifest…」），参考页面得到黑色字母图块「I」（名称「iOSAddtoHom…」）。

引用实验室 180 px 图标的 SBS transl 也显示该图标，Perm Test 显示自己的黄色「P7」（S，N63；操作员的描述一致，O，N11、N52）。

PWA Lab 的通知横幅带的也是 180 px 图标（S，截图 T8_1a）。为状态栏测试应用 M1 截取的添加界面，图块是该应用的 `apple-touch-icon`，而不是它的 manifest 图标（S，N66）。置信标签为 S。

<LabResults behaviour="home-screen-icon-selection" locale="zh" />

演示应用显示自己的图案，深色方块里套一个蓝色方块（S，N63；O，N12）。演示应用声明的每个图标都是这个图案，所以它分辨不出用了哪个文件，带来源标记的实验室图标才能区分这些文件。

<span id="文档怎么说"></span>

## 文档记载的图标优先级

Apple 已归档的指南只写了 `apple-touch-icon` 链接。声明多个尺寸时使用最适合设备的那个；页面没有链接元素时，会在网站根目录查找 `apple-touch-icon…png` 文件（[Configuring Web Applications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)，developer.apple.com）。这份文档早于 manifest 图标，也没有说找不到图标时显示什么。

BCD 记录 iOS 版 Safari 自 15.4 起支持 manifest 的 `icons`，备注限定，只有在没有 `apple-touch-icon`、且 `purpose` 为 `any` 或未指定时才使用（[BCD manifests/webapp/icons.json](https://github.com/mdn/browser-compat-data/blob/main/manifests/webapp/icons.json)，github.com，2026-10-20 读取）。Firtman 的笔记说 `apple-touch-icon` 链接会覆盖 manifest 中的图标声明，WebKit 能识别 maskable 图标但会忽略它们（[iOS PWA Compatibility](https://firt.dev/notes/pwa-ios/)，firt.dev）。

图标选择顺序与 BCD 和 Firtman 的笔记一致。先用 `apple-touch-icon`，再用 manifest 的 `any` 图标，忽略 maskable。既没有 `apple-touch-icon` 也没有 manifest 图标的页面（其中一个只有 SVG favicon）得到字母图块，这是本次观察到的，上述来源没有描述。

## 数据

截图收录在 [iOS 18.6.2 数据包](/zh/research/2026-10-ios18-home-screen-web-apps/data/)（CC BY 4.0）。

- [`2026-10-20_iphone16pro_ios18.6.2_T8_1b_redacted.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T8_1b_redacted.png) 显示通知横幅下方带实验室图标的主屏幕。
- [`2026-10-20_iphone16pro_ios18.6.2_T11_1_redacted.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T11_1_redacted.png) 显示测试结束时的主屏幕。
- [`2026-10-20_iphone16pro_ios18.6.2_T8_1a.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T8_1a.png) 显示带 180 px 图标的横幅。
- [`2026-10-20_iphone16pro_ios18.6.2_T4_18c_sheet_redacted.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_18c_sheet_redacted.png) 显示添加界面，图块为 `apple-touch-icon`。
- [`recording/2026-10-20_iphone16pro_ios18.6.2_T7_25c_frame_t000.2s_home_redacted.png`](/research/2026-10-ios18-home-screen-web-apps/data/recording/2026-10-20_iphone16pro_ios18.6.2_T7_25c_frame_t000.2s_home_redacted.png) 显示录屏首帧中的主屏幕。

归档副本中主屏幕上的其他 App 已抹去。实验笔记 N11、N12、N52、N63 和 N66 见 [`2026-10-ios18-baseline.md`](/research/2026-10-ios18-home-screen-web-apps/data/2026-10-ios18-baseline.md)。运行记录见 [`/lab/results.json`](/lab/results.json)。引用时写「OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N63」。

<span id="支撑的条目"></span>

## 相关参考条目

这一结果支撑 [icons 清单成员](/zh/reference/manifest/icons/)和 [iOS 添加到主屏幕](/zh/reference/installation/ios-add-to-home-screen/)两个条目中关于图标优先级的说法。

<LabBacks behaviour="home-screen-icon-selection" locale="zh" />

## 局限

- 只有截图证据（S）。页面读不到图标选择，所以没有仪器读数。
- 原计划在添加步骤拍的主屏幕截图（T3_1）没有交付，之后的截图覆盖了同样的图标。
- 只声明了一个 `apple-touch-icon` 尺寸（180 px）。没有测试声明多个 `apple-touch-icon` 尺寸、SVG 图标或加载失败的图标。
- 本次的字母图块都是黑色，决定字母和颜色的规则没有研究。
- 实验室页面自己的添加界面没有截到，只截了 M1 的（N66）。
- 一台 iPhone 16 Pro、一个版本、一名操作员；没有在 iOS 26 及以后的版本上测试。

<LabProvenance locale="zh" />