fix(static): add safe-area padding to PWA icons for macOS dock#2256
Open
rahilmavani wants to merge 2 commits into
Open
fix(static): add safe-area padding to PWA icons for macOS dock#2256rahilmavani wants to merge 2 commits into
rahilmavani wants to merge 2 commits into
Conversation
The PWA icons under static/huggingchat were rasterized from the favicon SVG with the artwork filling the full canvas. When Chrome on macOS installs the site as an app, it uses the highest resolution manifest icon as the dock icon, which renders visibly larger than native macOS apps because those follow Apple's convention of leaving roughly 12 to 15 percent safe area around the artwork. Regenerated icon-36x36 through icon-512x512 and apple-touch-icon from the same favicon.svg source, but with the artwork scaled to 75 percent and centered, leaving 12.5 percent transparent padding on each side. Also added "purpose": "any maskable" to each manifest icon entry so PWA platforms that apply mask cropping recognize them as safe to mask. icon.svg and favicon.svg are unchanged because the browser tab favicon should still fill its canvas.
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
1 participant
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 #1439
Problem
The PWA icons in
static/huggingchat/were rasterized from the favicon SVG with the artwork filling the entire canvas. When Chrome on macOS installs the site as an app via Save and Share > Install, it uses the highest resolution icon frommanifest.jsonas the dock icon. Because native macOS app icons follow Apple's convention of leaving roughly 12 to 15 percent transparent margin around the artwork, the HuggingChat icon visibly overshoots the dock baseline and looks oversized next to other apps.Change
Regenerated the nine
icon-NxN.pngfiles plusapple-touch-icon.pngfrom the samefavicon.svgsource artwork, but with the artwork scaled to 75 percent and centered inside the canvas. This leaves 12.5 percent transparent padding on each side, which matches macOS native dock icon spacing.manifest.jsonicon entries also now declare\"purpose\": \"any maskable\"so PWA platforms that apply mask cropping (Android adaptive icons, some Chromium contexts) recognize them as safe to mask.icon.svgandfavicon.svgare intentionally left unchanged. Those are used by the browser tab favicon where filling the canvas is correct, and changing them would shrink the tab favicon for no reason.Files touched
static/huggingchat/icon-36x36.pngthroughicon-512x512.png(9 files)static/huggingchat/apple-touch-icon.pngstatic/huggingchat/manifest.json(addedpurposefield to each icon entry)No code logic, build config, or runtime behavior is modified.
How it was generated
The artwork was wrapped in
<g transform=\"translate(4 4) scale(0.75)\">over the existing 32 unit viewBox, then rasterized at each manifest size with sharp using a density that scales with target resolution to keep edges crisp. Same source artwork, same colors, same file paths, only padding andpurposechanged.Testing
file *.pngconfirms 36, 48, 72, 96, 128, 144, 192, 256, 512, and 180 for apple-touch-icon).