CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions
storebound/skills/app-icons/SKILL.md

2.4 KiB
Raw Blame History

name description
app-icons 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.