# Which icon iOS uses for a Home Screen web app

> On iOS 18.6.2 the 180 px apple-touch-icon won over manifest icons, the manifest any 192 px icon was used without it, and pages without either got a letter tile.

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="en" />

<span id="question"></span>

When a page declares both an `apple-touch-icon` and manifest icons, only manifest icons, or neither, which image does iOS 18.6.2 put on the Home Screen?

On an iPhone 16 Pro running iOS 18.6.2 (22G100), iOS chose the 180 px apple-touch-icon, then the manifest any 192 px icon when that link was absent. Pages with neither got letter tiles in the 2026-10-20 test.

<span id="what-we-measured"></span>

## Labelled icons and install cases

The test icons are labelled with their source, so a Home Screen screenshot identifies the file iOS chose. The 180 px `apple-touch-icon` is red and labelled "180 apple-touch", the manifest `any` 192 px icon is blue and labelled "192 manifest any", and the 512 px and maskable icons carry their own labels. Four pages were added from Safari:

| Home Screen item | Page | Declared icons |
|---|---|---|
| PWA Lab | `/lab/device-tests/` | `apple-touch-icon` 180; manifest `any` 192 and 512, `maskable` 192 and 512; a 96 px favicon |
| Lab no-ATI | `/lab/device-tests/t3/manifest-only/` | manifest `any` 192 and 512, `maskable` 192 and 512; a 96 px favicon; no `apple-touch-icon` |
| T1 probe | `/lab/device-tests/t1/no-manifest/` | none |
| iOSAddtoHom… | `/reference/installation/ios-add-to-home-screen/` (added earlier the same day) | an SVG favicon (`/favicon.svg`) only; no manifest, no `apple-touch-icon` |

The record is visual: the operator's description at install time (O, N11, N12, N52) and the Home Screen as captured in later screenshots and in the first frame of the screen recording (S, N63). The demo app and two later apps (SBS transl, Perm Test) appear in the same images. A page cannot see which icon iOS chose, so this topic has no instrumented read.

## How to run

1. In Safari, open `https://openpwa.net/lab/device-tests/` and add it to the Home Screen (**Share** → **Add to Home Screen** → **Add**).
2. Open `https://openpwa.net/lab/device-tests/t3/manifest-only/` and add it the same way.
3. Open `https://openpwa.net/lab/device-tests/t1/no-manifest/` and add it.
4. Go to the Home Screen and take a screenshot that shows the three new icons. Crop other apps before sharing it.
5. Read each icon's label: "180 apple-touch" means the `apple-touch-icon` was used, "192 manifest any" the manifest `any` icon; a 512 or maskable label, a favicon, a page screenshot or a plain letter tile are the other outcomes.
6. Optional: before tapping **Add** in step 1, take a screenshot of the sheet, which shows an icon tile before the app is added. For the M1 status-bar app that tile was the `apple-touch-icon` (N66); whether the two icons match in other cases was not checked.

Name screenshots `<YYYY-MM-DD>_<device-slug>_<os-version>_<test-id>_<n>.png`, for example `2026-10-20_iphone16pro_ios18.6.2_T3_1.png`.

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

## Results

On iOS 18.6.2 PWA Lab showed the red "180 apple-touch" icon, not any of its manifest icons. Lab no-ATI showed the blue "192 manifest any" icon, not its 512 px or maskable icons. The T1 probe got a black letter tile "T" (label "T1no-manifest…") and the reference page a black letter tile "I" (label "iOSAddtoHom…"). SBS transl, which links the lab's 180 px icon, showed it too, and Perm Test showed its own yellow "P7" (S, N63; the operator's descriptions agree, O, N11, N52). The notification banners from PWA Lab carried the 180 px icon (S, screenshot T8_1a). The add sheet captured for the M1 status-bar app showed that app's `apple-touch-icon` as the tile, not its manifest icons (S, N66). The confidence label is S.

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

The demo app showed its own artwork, a dark square with a blue inner square (S, N63; O, N12). The demo uses the same artwork for all its declared icons, so the demo cannot tell which file was used; the labelled lab icons answer that question.

<span id="what-the-documentation-says"></span>

## Documented icon precedence

Apple's archived guide documents only the `apple-touch-icon` link: with several sizes, "The icon that is the most appropriate size for the device is used", and when no link element is present the site root is searched for `apple-touch-icon…png` files ([Configuring Web Applications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html), developer.apple.com). It predates manifest icons and says nothing about what is shown when no icon is found.

BCD records manifest `icons` for Safari on iOS from 15.4, with the note "Only used when no `apple-touch-icon` is present and either `"purpose" is set to "any"` or `"purpose"` is not specified" ([BCD manifests/webapp/icons.json](https://github.com/mdn/browser-compat-data/blob/main/manifests/webapp/icons.json), github.com, read 2026-10-20). Firtman's notes say the `apple-touch-icon` link "overrides the manifest icon declaration" and that WebKit recognises maskable icons but ignores them ([iOS PWA Compatibility](https://firt.dev/notes/pwa-ios/), firt.dev).

The icon order agrees with BCD and Firtman (`apple-touch-icon` first, then a manifest `any` icon, maskable ignored). The letter tile for pages with no `apple-touch-icon` and no manifest icon, including one with only an SVG favicon, is observed here and not described by these sources.

## Data

From the [iOS 18.6.2 data package](/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): the Home Screen with the lab icons under a notification banner.
- [`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): the Home Screen at the end of the run.
- [`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): a banner with the 180 px icon.
- [`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): the add sheet with the `apple-touch-icon` tile.
- [`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): the Home Screen in the first frame of the screen recording.

Other apps on the Home Screen are blanked in the archived copies. Notebook entries N11, N12, N52, N63 and N66: [`2026-10-ios18-baseline.md`](/research/2026-10-ios18-home-screen-web-apps/data/2026-10-ios18-baseline.md). Rows: [`/lab/results.json`](/lab/results.json). Cite as "OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N63".

<span id="what-it-backs"></span>

## Related reference entries

The result supports the icon-precedence statements in the [`icons` manifest member](/reference/manifest/icons/) and [iOS Add to Home Screen](/reference/installation/ios-add-to-home-screen/) entries.

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

## Limits

- Screenshot evidence only (S). The icon choice is not readable from the page, so no instrumented read exists.
- The Home Screen screenshot planned for the install step (T3_1) was not delivered; later screenshots cover the same icons.
- One `apple-touch-icon` size (180 px) was declared. Pages with several `apple-touch-icon` sizes, SVG icons and icons that fail to load were not tested.
- The letter tiles were black on this run. The rule that sets a tile's letter and colour was not characterised.
- The add sheets for the lab pages themselves were not captured; only the M1 sheet was (N66).
- One iPhone 16 Pro, one build, one operator; iOS 26 and later were not tested here.

<LabProvenance locale="en" />