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

发布于 2026-10-202026-10-20作者 Carey Gill · 编辑流程

行为实测 2026-10-20，iPhone 16 Pro，iOS 18.6.2 (22G100)S，截图或录屏与 BCD 一致

页面同时声明 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 图标，两者都没有时显示字母图块。

图标标记与安装情形

测试图标上印着来源，主屏幕截图能直接辨认 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 选了哪个图标，因此没有仪器读数。

怎么运行

在 Safari 中打开 https://openpwa.net/lab/device-tests/，添加到主屏幕（分享 → 添加到主屏幕 → 添加）。
用同样的方式添加 https://openpwa.net/lab/device-tests/t3/manifest-only/。
添加 https://openpwa.net/lab/device-tests/t1/no-manifest/。
回到主屏幕，截一张能看到三个新图标的图。分享前把其他 App 裁掉。
读每个图标上的标记。「180 apple-touch」表示用了 apple-touch-icon，「192 manifest any」表示用了 manifest 的 any 图标；其他可能是 512 或 maskable 标记、favicon、页面截图，或一个普通的字母图块。
可选操作是在第 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。

T3 主屏图标（4 分钟）
测试页 v1：打开测试：PWA Lab、t3/manifest-only

结果

在 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。

2026-10-20，iOS 18.6.2

主屏截图显示：PWA Lab 的 manifest 里也列了图标，但主屏上用的是 180 px 的 apple-touch-icon；只有 manifest 图标的应用显示 manifest 中 purpose 为 any 的 192 图标；没有图标的页面得到一个黑底字母图块。

日期

2026-10-20

设备

iPhone 16 Pro

系统版本与构建号

iOS 18.6.2 (22G100)，正式版

环境

主屏应用

结果

符合预期

关键数值

appleTouchIconAndManifest: 180 apple-touch-icon
manifestIconsOnly: 192 manifest any
noIcon: letter tile

可信度

S，截图或录屏

测试

实验笔记条目

N63

研究

阅读研究 · 数据包

测试页

测试页 v1

使用的测试页 v1 文件（7 个），线上字节的 SHA-256

/lab/device-tests/ 42c90845419f5ed3ad15d941bea04f649f4c5d350b1847292292fadd55871486
/lab/device-tests/manifest.webmanifest cab4e60719fd1f9c84d04aada2ad6cd937f50615ce646c3ed20f14f0ca09832b
/lab/device-tests/t3/manifest-only/ 1fe7e2a1d4aeb86fdf69b0f4546e28237dab65c53f2dc29a72148b99f1ec3920
/lab/device-tests/t3/manifest-only/manifest.webmanifest b036cb4f6aca01703f5e4ad9ae009d623d8072378c7db3ebeb3132746d3e4f15
/lab/device-tests/icons/ati-180.png 08d9c8fa268662b4c67f5d96ffa1fa508cfd2c3f3048e550f498c02dca82e8ef
/lab/device-tests/icons/any-192.png 2686e14cf8b1123fd4fbf9ea277c49733f2972dcc5f1954ee50ec8c05fadc6cf
/lab/device-tests/t1/no-manifest/ 79d08968039e334ea4f980b369714a32b459d054b93d68a562bd5610ac75eb3a

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

文档记载的图标优先级

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

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

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

数据

截图收录在 iOS 18.6.2 数据包（CC BY 4.0）。

2026-10-20_iphone16pro_ios18.6.2_T8_1b_redacted.png 显示通知横幅下方带实验室图标的主屏幕。
2026-10-20_iphone16pro_ios18.6.2_T11_1_redacted.png 显示测试结束时的主屏幕。
2026-10-20_iphone16pro_ios18.6.2_T8_1a.png 显示带 180 px 图标的横幅。
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 显示录屏首帧中的主屏幕。

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

局限

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

设备操作由 OpenPWA 的一名操作员在 iPhone 16 Pro 上完成。AI 代理会话通过 USB 读取页面状态、记录实验笔记并起草本文；自动门禁和 AI 事实核查做了检查。没有人逐篇审阅。

最后核验 2026-10-20

来源

openpwa.nethttps://openpwa.net/research/2026-10-ios18-home-screen-web-apps/data/
developer.apple.comhttps://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
github.comhttps://github.com/mdn/browser-compat-data/blob/main/manifests/webapp/icons.json
firt.devhttps://firt.dev/notes/pwa-ios/

报告问题 · 查看源文 · 变更记录

本页译自英文版。

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

图标标记与安装情形

怎么运行

结果

文档记载的图标优先级

数据

相关参考条目

局限