The iOS home-screen icon does not follow light and dark mode #65

New Issue

rays · 2026-09-28T11:40:39-07:00

rays commented

2026-09-28 11:40:39 -07:00

Reported: with iPX added to an iPhone's home screen, the icon stays the light logo in dark mode. iOS takes the web clip's icon once, from /apple-touch-icon.png, when the page is added, and does not honour a media query on apple-touch-icon, so the page cannot switch it (the tab's favicon does switch, #64). Only native apps get light, dark and tinted icons. Left open until iOS offers a way for web apps; meanwhile the one icon can be the light or the dark variant.

rays added the enhancement label 2026-09-28 11:40:39 -07:00

rays commented

2026-09-28 11:42:17 -07:00

Research, 2026-09-28.

Nothing Apple documents gives a web app a dark home-screen icon.

Apple Developer Forums, "iOS 18 - PWA App Icons: Dark and Tinted Appearance" (https://developer.apple.com/forums/thread/761615): open since Aug 2024, no Apple reply. Developers report the home-screen icon stays light in dark mode; the Tinted appearance does apply to it.
WebKit's notes for Safari 26.0 (https://webkit.org/blog/17333/webkit-features-in-safari-26-0/): every site can now be added as a web app, a manifest is optional, "if you define your icons in the manifest, they're used", and SVG is accepted for icons. Nothing about dark, tinted or clear variants. The 26.4 and 26.6 notes say nothing about icons either.
The standards route is stalled. Edge's color_scheme member for manifest icons (https://microsoftedge.github.io/MSEdgeExplainers/ImageResource-color_scheme/explainer.html) is archived, WebKit has no stated position, and the related w3c/manifest issues (#975, #1045) are still open.
iOS ignores media="(prefers-color-scheme: dark)" on apple-touch-icon. The script workaround in the forum thread picks the icon by the mode at the moment of adding and never changes it afterwards; it is no better than a fixed icon.

What could still be tried:

An SVG icon in a web app manifest whose own CSS has @media (prefers-color-scheme: dark). Safari 26 accepts SVG manifest icons, and WICG's user-preferences explainer (https://github.com/WICG/manifest-incubations/blob/gh-pages/user-preferences-explainer.md) suggests a browser render an SVG icon under each system preference. Nobody reports that iOS does this; it is likely rasterised once, at install. Worth one test on a device on iOS 26: serve /manifest.webmanifest with logo.svg restyled to switch internally, add to the home screen, change the appearance.
A transparent background, which one developer reports iOS fills black in dark mode. Unconfirmed, and the icon would then be black-backed in light mode too; ipx's logo is deliberately opaque (#55) because iOS fills transparency black everywhere.

Until one of those works, the choice is only which variant apple-touch-icon.png is: light, as now, or dark. Leaving this open.

Research, 2026-09-28. **Nothing Apple documents gives a web app a dark home-screen icon.** - Apple Developer Forums, "iOS 18 - PWA App Icons: Dark and Tinted Appearance" (https://developer.apple.com/forums/thread/761615): open since Aug 2024, no Apple reply. Developers report the home-screen icon stays light in dark mode; the Tinted appearance does apply to it. - WebKit's notes for Safari 26.0 (https://webkit.org/blog/17333/webkit-features-in-safari-26-0/): every site can now be added as a web app, a manifest is optional, "if you define your icons in the manifest, they're used", and SVG is accepted for icons. Nothing about dark, tinted or clear variants. The 26.4 and 26.6 notes say nothing about icons either. - The standards route is stalled. Edge's `color_scheme` member for manifest icons (https://microsoftedge.github.io/MSEdgeExplainers/ImageResource-color_scheme/explainer.html) is archived, WebKit has no stated position, and the related w3c/manifest issues (#975, #1045) are still open. - iOS ignores `media="(prefers-color-scheme: dark)"` on `apple-touch-icon`. The script workaround in the forum thread picks the icon by the mode at the moment of adding and never changes it afterwards; it is no better than a fixed icon. **What could still be tried:** 1. An SVG icon in a web app manifest whose own CSS has `@media (prefers-color-scheme: dark)`. Safari 26 accepts SVG manifest icons, and WICG's user-preferences explainer (https://github.com/WICG/manifest-incubations/blob/gh-pages/user-preferences-explainer.md) suggests a browser render an SVG icon under each system preference. Nobody reports that iOS does this; it is likely rasterised once, at install. Worth one test on a device on iOS 26: serve /manifest.webmanifest with logo.svg restyled to switch internally, add to the home screen, change the appearance. 2. A transparent background, which one developer reports iOS fills black in dark mode. Unconfirmed, and the icon would then be black-backed in light mode too; ipx's logo is deliberately opaque (#55) because iOS fills transparency black everywhere. Until one of those works, the choice is only which variant apple-touch-icon.png is: light, as now, or dark. Leaving this open.

rays added the wontfix label 2026-09-28 11:44:31 -07:00

rays closed this issue

2026-09-28 11:44:49 -07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rays/ipx#65