34 lines
2.4 KiB
Markdown
34 lines
2.4 KiB
Markdown
---
|
|
name: app-icons
|
|
description: Generate every icon a mobile app or game needs from one artwork - App Store 1024 (no alpha), Play 512, Android adaptive foreground/background, legacy round and square launcher icons, iOS sizes via @capacitor/assets, web favicons, apple-touch and maskable icons. Use when the user wants app icons, launcher icons, adaptive icons, favicons, or an icon looks cropped/cut off on Android or is rejected for alpha on iOS.
|
|
---
|
|
|
|
# App icons from one artwork
|
|
|
|
CLI: `storebound icons` (or `bunx storebound icons`). Needs `ffmpeg` (`cwebp` optional).
|
|
|
|
## Inputs (`icons` in storebound.config.ts)
|
|
- `composite`: 1024 x 1024 opaque full icon (stores, iOS, web)
|
|
- `foreground`: 1024 RGBA, the subject on transparency (adaptive + maskable)
|
|
- `background`: 1024 opaque background layer
|
|
- outputs: `out` (store icons), `web`, `capacitorAssets` + `capacitorCommand`, `androidRes`
|
|
|
|
## Steps
|
|
1. Put the three PNGs in the project, set the paths, `storebound check`.
|
|
2. `storebound icons --dry` lists every file it will write; then `storebound icons`.
|
|
3. With Capacitor: set `capacitorAssets` (e.g. `assets`) and
|
|
`capacitorCommand: 'bunx @capacitor/assets generate --assetPath assets'`; storebound writes the three sources, runs it,
|
|
and then redraws the Android legacy icons (step order matters).
|
|
4. Verify: `sips -g hasAlpha store/icons/app-store-1024.png` says no; install on an Android device with a circle
|
|
launcher mask and an old launcher (legacy icons); check the web favicon and the PWA maskable preview.
|
|
|
|
## Gotchas
|
|
- **Adaptive foreground scale ~0.7**: the anydpi-v26 xml insets both layers 16.7 %, and launchers mask the visible
|
|
part (often a circle). At 0.7 the subject's corners sit just inside the circle. Tune with `adaptiveScale`.
|
|
- **Legacy icons**: @capacitor/assets crops the full square artwork into `ic_launcher` / `ic_launcher_round`, cutting
|
|
off anything near the corners. storebound redraws them from the adaptive composite with a circle and a 22 % rounded
|
|
square mask (4x supersampled).
|
|
- **App Store 1024 must have no alpha channel** (upload or review fails); storebound writes rgb24.
|
|
- Stores and launchers round the corners themselves: deliver full squares, never pre-rounded icons.
|
|
- Web icons as 256-colour PNGs (about a third of the size); maskable icon keeps the subject in the 80 % safe zone.
|
|
- Play listing icon is 512 x 512, separate from the launcher icons in the AAB.
|