# App badge on the iOS Home Screen icon
> On iOS 18.6.2, navigator.setAppBadge(3) in a Home Screen web app holding notification permission showed a red 3 on its icon.
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';
The Badging API lets an installed web app put a count on its icon. On 2026-10-20,
`navigator.setAppBadge()` drew the count on an iPhone 16 Pro running iOS 18.6.2 (22G100),
in a Home Screen web app with notification permission.
When an iOS Home Screen web app that holds notification permission calls `navigator.setAppBadge(n)`,
does the count appear on the app's Home Screen icon?
## Badge counter and captures
The test app is the OpenPWA demo, added to the Home Screen from Safari. Its Badging page
(`/demo/badging/`) keeps a counter: each tap on **Increment and set badge** adds one and calls
`navigator.setAppBadge(counter)`, so three taps call it with 1, 2 and 3. The app had been granted
notification permission earlier in the run (notebook N41).
We recorded:
- the Home Screen icon after the third call, in an operator screenshot whose capture time comes from
its EXIF data;
- the app's notification settings page (Settings → 通知 → OpenPWA), in a second screenshot;
- `'setAppBadge' in navigator` and `'clearAppBadge' in navigator` in a Safari tab and in the Home
Screen app, by instrumented reads.
The inspector page list was empty during the badge step, so the agent session could not read the
page at that moment (N43); the badge itself rests on the screenshot.
## How to run
1. In Safari on the iPhone, open `https://openpwa.net/demo/`, tap Share, then
**Add to Home Screen**, then **Add**.
2. Launch **OpenPWA** from its icon, open the Push page and tap
**Request permission and subscribe**, then **Allow**. The badge is tied to notification
permission on iOS.
3. Open the Badging page and tap **Increment and set badge** three times.
4. Go to the Home Screen and take a screenshot of the app's icon.
5. Optional: in Settings → Notifications → OpenPWA, check that Badges is on.
6. Back in the app, tap **Clear badge** and check the icon again.
## Results
On iOS 18.6.2 (22G100) the OpenPWA icon showed a red badge "3" after the third call, in a screenshot
taken at 08:54:41 UTC (Screenshot or recording, S; notebook N60). The app's notification settings,
captured 31 s earlier, had 允许通知 (Allow Notifications) on and 标记 (Badges) on (S; N60), and the
Settings → 通知 list showed "OpenPWA 横幅、声音、标记" (S; N61). `'setAppBadge' in navigator` and
`'clearAppBadge' in navigator` were false in a Safari tab (Instrumented read, A; N03) and true in the
Home Screen apps (A; N13, N18).
Whether **Clear badge** removed the badge rests on the operator's report alone and is not published
as a result. The operator's answer "no Badge" given later (N56) fits the state after clearing and was
resolved by the screenshot (N60).
## Badging permission in WebKit and BCD
WebKit's Safari 16.4 post adds the Badging API for Home Screen web apps on iOS and iPadOS and says
that permission for it "is automatically granted when a user gives permission for notifications"
([WebKit Features in Safari 16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/),
webkit.org); the iOS 16.4 Web Push post lists badging with the same release
([Web Push for Web Apps on iOS and iPadOS](https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/),
webkit.org). BCD records `api.Navigator.setAppBadge` on Safari for iOS from 16.4, with a note that
badging is supported for web apps saved to the Home Screen
([Navigator.json](https://raw.githubusercontent.com/mdn/browser-compat-data/main/api/Navigator.json),
github.com). The Badging API specification defines `setAppBadge()` and leaves how the badge is shown
to the platform ([Badging API](https://w3c.github.io/badging/), w3.org).
The measurement agrees with these sources. The count appeared on the icon of a Home Screen app
that held notification permission, and the methods were absent in a tab. It confirms the published
behaviour on 18.6.2 and is not a new finding.
## Data
The evidence is in the study's
[data package](/research/2026-10-ios18-home-screen-web-apps/data/) (CC BY 4.0): the icon in
`screenshots/2026-10-20_iphone16pro_ios18.6.2_T11_1_redacted.png` (other apps blanked), the settings
detail in `screenshots/2026-10-20_iphone16pro_ios18.6.2_T7_4a.png` and the list in
`screenshots/2026-10-20_iphone16pro_ios18.6.2_T7_4_redacted.png`. The feature detection is in
`raw/2026-10-20-ios18.6.2-tab-demo.json` (tab, N03), `raw/2026-10-20-ios18.6.2-step09-app-demo.json`
(demo app, N13) and `raw/2026-10-20-ios18.6.2-step12-app-lab.json` (PWA Lab, N18). The
machine-readable run is in [/lab/results.json](/lab/results.json) under the id
`app-badge-on-home-screen/2026-10-20-ios-18.6.2-22g100`.
## Related reference entries
The result backs the iOS field note of the [Badging API](/reference/installation/badging/) entry and
the Safari for iOS row of the Badging API compatibility data.
## Limits
- One device, one build, one operator, one run day: an iPhone 16 Pro on iOS 18.6.2 (22G100).
- The badge is a screenshot result (S); no instrumented read exists for the badge step because the
inspector listing was empty at the time.
- Clearing with `clearAppBadge()` rests on the operator's report only and is not a published result.
- Only integer counts from the page were tested. `setAppBadge()` with no argument, `setAppBadge(0)`,
calls from the service worker, and calls without notification permission were not tested.
- iPadOS and other iOS builds were not tested. The same device is due to be rerun after its upgrade
to iOS 27.