Repository navigation
fix: opaque PWA icons so the iOS home-screen icon stays readable - #718
Merged
Merged
Conversation
The three icon PNGs (apple-touch-icon, icon-192, icon-512) were transparent-background PNGs with the pi glyph covering nearly the full canvas. When added to the iOS home screen, Safari fills the transparent area with black, so the icon turned into a dark block. iOS ignores manifest background_color and does not apply maskable icons, so the only effective fix is fully opaque icon files. - Composite the existing glyph (untouched) onto an opaque white background, scaled to 94% so it fits inside the iOS corner mask - Update manifest background_color to match the icon background Before/after on iOS: transparent glyph on black -> white tile with the same dark-teal pi glyph.
The icon RGB channels already contain the correct white composite. Remove the residual alpha channel without changing any RGB pixels so iOS cannot darken antialiased edges. Verified all three dimensions, opaque output, white corners, unchanged RGB pixels, and exact agreement with alpha compositing the original glyphs at the existing 94% scale.
sleepinginsummer
pushed a commit
to sleepinginsummer/pi-web
that referenced
this pull request
Sep 9, 2026
…gr#718) * fix: opaque PWA icons so iOS home-screen icon stays readable The three icon PNGs (apple-touch-icon, icon-192, icon-512) were transparent-background PNGs with the pi glyph covering nearly the full canvas. When added to the iOS home screen, Safari fills the transparent area with black, so the icon turned into a dark block. iOS ignores manifest background_color and does not apply maskable icons, so the only effective fix is fully opaque icon files. - Composite the existing glyph (untouched) onto an opaque white background, scaled to 94% so it fits inside the iOS corner mask - Update manifest background_color to match the icon background Before/after on iOS: transparent glyph on black -> white tile with the same dark-teal pi glyph. * fix: remove residual alpha from PWA icons The icon RGB channels already contain the correct white composite. Remove the residual alpha channel without changing any RGB pixels so iOS cannot darken antialiased edges. Verified all three dimensions, opaque output, white corners, unchanged RGB pixels, and exact agreement with alpha compositing the original glyphs at the existing 94% scale. --------- Co-authored-by: nannant666 <nannant666@users.noreply.github.com> Co-authored-by: Alex Yang <agegcn@gmail.com>
QCCoder
pushed a commit
to QCCoder/pi-web
that referenced
this pull request
Sep 21, 2026
…e (upstream b315bd3) Upstream agegr#718: the three icon PNGs were transparent-background images, so iOS filled them with black on the home screen (iOS ignores manifest background_color and maskable purposes). Take the upstream regenerated opaque icons (glyph composited on white at 94%, residual alpha channel removed, RGB pixels unchanged) and match manifest background_color to the icon background. Icon assertions (PNG color type, background_color) added to app/manifest.test.mjs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #717
Problem
The three icon PNGs (
apple-touch-icon.png,icon-192.png,icon-512.png) are transparent-background PNGs with the glyph covering nearly the full canvas. When the site is added to the iOS home screen, Safari fills the transparent area with black, so the icon turns into an unreadable dark block (see #717 for screenshots and pixel-level analysis).Two extra facts from pixel analysis of the current files:
icon-512.pngis(9, 0, 502, 512)— zero vertical padding, so part of the glyph already falls outside the iOS corner mask (slight clipping on top of the darkening issue).background_colorand does not applypurpose: "maskable"icons, so the only effective fix for iOS is fully opaque icon files.What this PR does
The glyph artwork is untouched — same shape, same color
(35, 69, 75):background_colorinapp/manifest.tsto#ffffffto match the icon background.Verification
Pixel-level, on the generated files:
(35, 69, 75)before and after.Not yet re-tested on an actual device after this change — the quickest check is: delete the existing home-screen PWA, re-add it, and the icon should show as a white tile with the same dark-teal π glyph.
如果底色想换成别的（或做明暗双版本），我可以马上调整。