Fix(macos): the Dock icon sits on Apple's icon grid (#544) - #545
Merged
Merged
Conversation
ZenNotes loomed about 9% larger than every other icon in the Dock. Apple's grid draws a Dock icon as an 824px tile centered on the 1024px canvas; ours was drawn at 896px. The reporter measured it from the outside, 17.5px of slot headroom where stock apps get 23, which is exactly that extra 72px of tile. Two causes, and fixing only the obvious one would not have been enough. The artwork itself was off the grid: icon.png and icon.icns are regenerated with the tile scaled to exactly 824px with 100px margins, plus the soft drop shadow Apple's own icns icons bake in. And the installed app was quietly overriding its bundle icon at runtime: the dev-mode workaround (npm run dev shows Electron's default icon, so we force our own) also ran in packaged builds, replacing the .icns with a raw NSImage and bypassing the system's icon treatment. That call is now gated to dev. What this deliberately does not do: the light appearance variant also asked for in #544. That needs the macOS 26 Icon Composer pipeline (.icon compiled into Assets.car), which electron-builder cannot produce yet; it stays open as a follow-up. icon.png is the shared master, so the Windows ico generation and the non-mac window icons inherit the slightly larger padding; the Linux launcher icons in build/icons are deliberately untouched. Verified on the packaged artifact: npm run pack green end to end, the icns inside dist/mac-arm64/ZenNotes.app measures an exact 824px tile, and the packaged app launches with a CDP page target in 3s with both stores isolated.
Closed
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.
Fixes #544.
What was wrong
ZenNotes rendered about 9% larger than every other icon in the Dock. Apple's grid draws a Dock icon as an 824px tile centered on the 1024px canvas; ours was drawn at 896px. @Christian-SC26's screenshot-ruler measurement (17.5px of slot headroom where stock apps get 23) matches that extra 72px of tile exactly.
There were two causes:
build/icon.pngandbuild/icon.icnsare regenerated with the tile scaled to exactly 824px with 100px margins. The tile was already an Apple-style squircle, so a uniform rescale keeps the shape and lands the corner radius on spec. The regenerated icon also bakes the standard template drop shadow that Apple's own icns icons carry (checked against Notes.app).app.dock.setIcon(icon.png)exists as a dev-mode workaround (npm run devshows Electron's default icon) but also ran in packaged builds, replacing the .icns with a raw NSImage and bypassing the system's icon treatment. It is now gated to!app.isPackaged.What this deliberately does not do
The light appearance variant also requested in #544. Appearance-aware icons need the macOS 26 Icon Composer pipeline (a
.iconcompiled intoAssets.carplusCFBundleIconName), which electron-builder cannot produce yet. Follow-up material, not a blocker for the size fix.Cross-platform note:
icon.pngis the shared master, so the Windows ico generation and the non-mac window icons inherit the slightly larger padding; the Linux launcher icons inbuild/icons/are deliberately untouched.Verification
npm run packgreen end to end (typecheck, all vitest suites, build, electron-builder).dist/mac-arm64/ZenNotes.appmeasures an exact 824px tile with 100px margins at the 1024 rep (solid-alpha span, shadow excluded).ZEN_PERF=1with both stores isolated, CDP page target "ZenNotes" up in 3s.How to test locally:
npm run pack, opendist/mac-arm64/ZenNotes.app, and park it in the Dock next to any stock app. Before: the enso tile pokes above its neighbors' top edges. After: the edges align, shadow and all.