Add safe-zone padding to generated PWA icons #150

New issue

Closed

opened 2026-05-30 17:47:03 +00:00 by steve · 0 comments

steve commented

2026-05-30 17:47:03 +00:00

Owner

Installed macOS PWA dock icons look cramped because lapis.png is full-bleed and the generator scaled it to fill the entire canvas.

Problem

generate-pwa-icons.mjs used fit: contain on a square source, producing edge-to-edge PNGs with no inset. macOS then applies its squircle/background with little visible padding compared to other apps.

Goal

Center the logo with recommended safe-zone padding in generated install icons.

Scope

Update packages/web/scripts/generate-pwa-icons.mjs to composite the logo at 82% scale for any icons and 80% for maskable outputs.
Add dedicated maskable PNGs and wire them in vite.config.ts.
Update web package spec docs.

Acceptance Criteria

Generated apple-touch-icon.png and pwa-*.png files inset the logo (~9% per side for any).
Maskable manifest entries use separate 80% safe-zone PNGs.
Icon generation runs as part of web build.

Validation Commands

pnpm --filter @lapis-notes/web generate-icons
pnpm --filter @lapis-notes/web check:all
make spec-lint

Implementation Summary

PWA icon generator now composites lapis.png at 82% for any/apple-touch icons and 80% for dedicated maskable PNGs; manifest uses separate maskable entries. Regenerated public icons.

Installed macOS PWA dock icons look cramped because `lapis.png` is full-bleed and the generator scaled it to fill the entire canvas. ## Problem `generate-pwa-icons.mjs` used `fit: contain` on a square source, producing edge-to-edge PNGs with no inset. macOS then applies its squircle/background with little visible padding compared to other apps. ## Goal Center the logo with recommended safe-zone padding in generated install icons. ## Scope - Update `packages/web/scripts/generate-pwa-icons.mjs` to composite the logo at 82% scale for `any` icons and 80% for maskable outputs. - Add dedicated maskable PNGs and wire them in `vite.config.ts`. - Update web package spec docs. ## Acceptance Criteria - Generated `apple-touch-icon.png` and `pwa-*.png` files inset the logo (~9% per side for `any`). - Maskable manifest entries use separate 80% safe-zone PNGs. - Icon generation runs as part of web build. ## Validation Commands - `pnpm --filter @lapis-notes/web generate-icons` - `pnpm --filter @lapis-notes/web check:all` - `make spec-lint` ## Implementation Summary PWA icon generator now composites lapis.png at 82% for any/apple-touch icons and 80% for dedicated maskable PNGs; manifest uses separate maskable entries. Regenerated public icons.

steve

2026-05-30 17:47:03 +00:00