fix: Resize macOS app icon to 1024×1024 with proper safe area#1771
fix: Resize macOS app icon to 1024×1024 with proper safe area#1771xxiaoxiong wants to merge 2 commits into
Conversation
…o#1751) - Resize app-icon.svg from 533×533 to 1024×1024 - Add ~10% safe area margin (102px) instead of 2.4% - Regenerate icon.png at 1024×1024 resolution - Add conversion scripts for future icon updates Fixes the oversized icon appearance in macOS Launchpad and Dock. The icon now matches Apple's recommended sizing and padding guidelines.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f2c69f5247
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -1,4 +1,5 @@ | |||
| <svg width="533" height="533" viewBox="0 0 533 533" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <g transform="translate(102, 102) scale(1.5385)"> | |||
There was a problem hiding this comment.
This padding is being added to the shared /app-icon.svg, not just the packaged macOS PNG. The same SVG is rendered directly in the app chrome at apps/web/src/components/AppChromeHeader.tsx:23 and constrained to 28px in apps/web/src/index.css:352-366, and it is also the web favicon in apps/web/app/layout.tsx:8-14; after this transform those surfaces render the mark at only ~80% of their allocated size with transparent padding. If the intent is to fix Dock/Launchpad sizing, generate the padded asset only for tools/pack/resources/mac/icon.png (or use a separate mac icon source) and leave the web/UI SVG full-bleed.
Useful? React with 👍 / 👎.
lefarcen
added
size/L
lefarcen
left a comment
lefarcen
left a comment
There was a problem hiding this comment.
Hey @xxiaoxiong! 👋 The PR description is solid — the root cause diagnosis (533×533 canvas + 2.4% margin vs. Apple's 1024×1024 + 10% safe area) is crystal clear, and documenting six conversion methods in ICON_CONVERSION.md is a great touch for future maintainers.
One quick template item: the ## Surface area section currently uses custom checkboxes ("Icon assets" / "None of the other categories apply"). Could you swap those for the standard 9-box checklist from the template? For this PR, None would be the right pick since the change is purely to static icon assets with no runtime/UI/API surface changes. That lets pool reviewers quickly confirm the blast radius at a glance.
Everything else looks complete — once that's updated this should be ready for review! ✨
|
Hey @xxiaoxiong — great work picking this up and shipping it so quickly! The 1024×1024 resize with 10% safe area is exactly the right fix, and including the conversion scripts is a nice touch for maintainability. One thing to double-check in the PR: the packaged macOS build references Looking forward to seeing this land! 🙌 |
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
Thanks for tackling the macOS icon sizing bug. I found three blocking issues that still prevent this PR from delivering the intended fix end-to-end: the padded SVG now changes shared web/UI surfaces, packaged mac builds still consume icon.icns, and the new .mjs helpers fail the workspace guard.
| @@ -1,4 +1,5 @@ | |||
| <svg width="533" height="533" viewBox="0 0 533 533" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
| <g transform="translate(102, 102) scale(1.5385)"> | |||
There was a problem hiding this comment.
This moves the macOS safe-area padding into the shared web asset instead of keeping it in a packaging-only source. apps/web/app/layout.tsx:10-14 uses /app-icon.svg for the site icon and mask icon, and apps/web/src/components/AppChromeHeader.tsx:23 renders the same file in the app header, so the new outer transform shrinks those surfaces by roughly 20% inside the same box. That means the PR fixes Dock/Launchpad sizing by regressing the in-app brand mark and web icon sizing. Please keep apps/web/public/app-icon.svg full-bleed and generate a separate padded asset only for the mac packaging resources.
| ## Current Status | ||
|
|
||
| ✅ **SVG Updated**: `apps/web/public/app-icon.svg` is now 1024×1024 with 10% safe area | ||
| ❌ **PNG Needs Update**: `tools/pack/resources/mac/icon.png` is still 533×533 |
There was a problem hiding this comment.
The instructions and helper scripts only regenerate tools/pack/resources/mac/icon.png, but packaged mac builds still read tools/pack/resources/mac/icon.icns (tools/pack/src/resources.ts:35). As a result, the installed app will continue shipping the old icon and Launchpad/Dock will not reflect this fix even if the PNG is updated. Please regenerate and commit icon.icns from the 1024×1024 source (or change the packaging config to consume the updated asset you are actually maintaining) as part of this PR.
| @@ -0,0 +1,38 @@ | |||
| #!/usr/bin/env node | |||
There was a problem hiding this comment.
These new project-owned .mjs helpers already fail CI. The Validate workspace job's pnpm guard step reports scripts/convert-icon.mjs and scripts/convert-icon-canvas.mjs as forbidden residual JavaScript files, which matches the repo rule in the root AGENTS.md that new project-owned scripts should default to TypeScript unless there is a documented compatibility exception. Because of that, this PR cannot merge green as written. Please convert these helpers to TypeScript (or add the documented allowlist entry if there is a real compatibility reason to keep JavaScript here) before landing them.
The macOS packaged build uses icon.icns, not icon.png. Regenerated with all required sizes (16px to 1024px) from the updated 1024×1024 source with proper safe area.
|
Thanks for catching that, @lefarcen! You're absolutely right — I've now regenerated |
lefarcen
left a comment
lefarcen
left a comment
There was a problem hiding this comment.
Good progress on the icon.icns front, @xxiaoxiong — committing it alongside the PNG is the right call.
Two quick PR body items still outstanding on this head:
-
Surface area (from the earlier note) — just replace the custom checkboxes with the standard 9-box list and tick None. That one-liner unblocks pool reviewers from having to infer the blast radius.
-
Bug fix verification — since this carries
type/bugfix, the template asks for a before/after confirmation of the red→green state. A pair of screenshots of the icon in Launchpad (or Dock) before vs. after the fix would do it — doesn't need to be elaborate, just visual evidence the icon now sits at the right optical size relative to neighbors.
Addressing @nettee's three blocking findings (shared SVG path, .mjs → TypeScript, and the icon.icns gap) takes priority — these body items are a quick cleanup to fold in alongside those fixes.
3 participants
Why
Fixes #1751
The Open Design app icon appears oversized in macOS Launchpad and Dock compared to other apps. This is caused by:
What changed
Icon Assets
Conversion Scripts (for future updates)
scripts/convert-svg-to-png.py: Playwright-based converter (used for this PR)scripts/convert-icon.mjs: Node.js with sharpscripts/convert-icon-canvas.mjs: Node.js with canvasscripts/convert-icon.html: Browser-based converter (zero dependencies)scripts/ICON_CONVERSION.md: Complete guide with 6 different conversion methodsWhat users will see
Surface area
Validation
file tools/pack/resources/mac/icon.png