Arjun Patel
1.6 KiB
1.6 KiB
Icon sources
These files are not shipped in the app. They are the masters used to
regenerate the platform icon files that live one level up in assets/.
What ships (in assets/)
| File | Platform | Used by | Shape |
|---|---|---|---|
flowy.ico |
Windows | forge.config.ts (setupIcon + app icon) |
full-bleed |
flowy.icns |
macOS | forge.config.ts (icon: './assets/flowy') |
rounded/padded |
icon.png |
both | dev dock icon (main.ts) + in-app favicon |
rounded/padded |
forge.config.ts references the app icon as ./assets/flowy (no extension);
Electron Forge appends .ico on Windows and .icns on macOS, so those two
files must keep the same flowy basename.
Why two different shapes
- Windows draws icons edge-to-edge and adds no rounding, so its source is
full-bleed (
windows-fullbleed-1024.png). A padded/rounded image renders visibly smaller than neighboring app icons. - macOS expects the Apple icon grid: a rounded squircle with ~10% transparent
margin baked in (
macos.iconset/). Full-bleed art looks oversized on the Dock.
Regenerating
Windows — flowy.ico
From a full-bleed 1024×1024 PNG (windows-fullbleed-1024.png):
npx png-to-ico ./icon-sources/windows-fullbleed-1024.png > ./flowy.ico
Produces a multi-resolution .ico (16/32/48/256) — the sizes Windows actually uses.
macOS — flowy.icns
From the .iconset folder (run on macOS):
iconutil -c icns ./icon-sources/macos.iconset -o ./flowy.icns