feat(17-02): generate full icon/favicon set from logo.svg (Task 2)

- Run @vite-pwa/assets-generator minimal2023Preset against public/logo.svg
- Produce: favicon.ico (861 B, non-trivial), favicon.svg, icon-192.png (1617 B),
  icon-512.png (4221 B), icon-maskable-512.png (3353 B, 512x512 distinct maskable
  with safe-zone padding), apple-touch-icon.png (1110 B, 180x180)
- Replace 3 placeholder stubs with real generated assets
- Update pwa:icons script to include post-generation canonical rename step
- Add generator intermediate output filenames to .gitignore
This commit is contained in:
Lucas Berger
2026-06-18 12:13:50 -04:00
parent 7db9005645
commit b364573285
8 changed files with 59 additions and 1 deletions
+1 -1
View File
@@ -13,7 +13,7 @@
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:e2e:headed": "playwright test --headed",
"pwa:icons": "pwa-assets-generator generate"
"pwa:icons": "pwa-assets-generator --config pwa-assets.config.ts && cp public/pwa-192x192.png public/icon-192.png && cp public/pwa-512x512.png public/icon-512.png && cp public/maskable-icon-512x512.png public/icon-maskable-512.png && cp public/apple-touch-icon-180x180.png public/apple-touch-icon.png && cp public/logo.svg public/favicon.svg"
},
"dependencies": {
"@dnd-kit/core": "^6.3.1",
Binary file not shown.

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 861 B

+51
View File
@@ -0,0 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
<!-- Background: warm cream rounded square -->
<rect width="512" height="512" rx="96" fill="#FEF3EC"/>
<!-- House / home shape — warm amber roof, cream body -->
<polygon points="256,90 96,230 416,230" fill="#E8915A"/>
<rect x="130" y="225" width="252" height="185" rx="8" fill="#FFF8F2"/>
<!-- Door — warm brown centered -->
<rect x="220" y="316" width="72" height="94" rx="10" fill="#C97D4A"/>
<!-- Left adult figure — warm rose -->
<!-- Body -->
<ellipse cx="168" cy="292" rx="28" ry="42" fill="#F25C7A"/>
<!-- Head -->
<circle cx="168" cy="236" r="26" fill="#FFD8B8"/>
<!-- Hair -->
<ellipse cx="168" cy="217" rx="26" ry="13" fill="#C97D4A"/>
<!-- Right adult figure — warm slate blue -->
<!-- Body -->
<ellipse cx="344" cy="292" rx="28" ry="42" fill="#4A90D9"/>
<!-- Head -->
<circle cx="344" cy="236" r="26" fill="#FFD8B8"/>
<!-- Hair -->
<ellipse cx="344" cy="217" rx="26" ry="12" fill="#5C4033"/>
<!-- Child figure — warm amber, centered above door -->
<!-- Body -->
<ellipse cx="256" cy="308" rx="20" ry="30" fill="#E8915A"/>
<!-- Head -->
<circle cx="256" cy="273" r="19" fill="#FFD8B8"/>
<!-- Hair tuft -->
<ellipse cx="256" cy="257" rx="19" ry="9" fill="#C97D4A"/>
<!-- Window left — warm yellow with pane -->
<rect x="148" y="248" width="44" height="40" rx="5" fill="#FFF5C2"/>
<line x1="170" y1="248" x2="170" y2="288" stroke="#E8915A" stroke-width="2"/>
<line x1="148" y1="268" x2="192" y2="268" stroke="#E8915A" stroke-width="2"/>
<!-- Window right -->
<rect x="320" y="248" width="44" height="40" rx="5" fill="#FFF5C2"/>
<line x1="342" y1="248" x2="342" y2="288" stroke="#E8915A" stroke-width="2"/>
<line x1="320" y1="268" x2="364" y2="268" stroke="#E8915A" stroke-width="2"/>
<!-- Door handle -->
<circle cx="280" cy="365" r="5" fill="#E8915A"/>
<!-- Small heart above house peak — warm rose accent -->
<path d="M256 82 C256 82 248 70 240 72 C232 74 232 86 240 92 L256 106 L272 92 C280 86 280 74 272 72 C264 70 256 82 256 82 Z" fill="#F25C7A"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 699 B

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB