scrabble-game/docs/ICONS.md

Icon & logo asset map

Single reference for every icon/logo format the project ships, and the single-master workflow a rebrand should follow. Goal: one vector master → regenerate every target, miss nothing. The iOS / iPadOS rows are future (no iOS shell exists yet) but are listed so a rebrand covers them in one pass.

Current state — three drifting sources

The «Э» mark is emitted today by three independent pipelines that visually drift (the favicon is a rounded bordered tile, the maskable is a full-bleed square, the Android launcher is an upscale). The rebrand collapses them onto one master.

1. Web favicon set — assets/icons/build/generate.js composes SVG from font glyph outlines (assets/icons/build/glyphs.json) and rasterises with the ui package's Playwright chromium → ui/public/{favicon.svg, favicon.ico, apple-touch-icon.png, og-image.png}.
2. PWA icons — ui/public/{icon-192, icon-512, icon-maskable-512}.png are hand-placed and covered by no generator (the main drift source).
3. Android — capacitor-assets generate --android (pnpm android:assets) expands ui/assets/icon.png into the launcher + splash matrix under ui/android/app/src/main/res/.

Source masters (author once; commit)

The minimum set the designer supplies so every target below regenerates:

Master	Size	Format	Background	Need	Drives
Vector mark	—	SVG	transparent	required	favicon.svg; the canonical shape
App icon	1024×1024	PNG	opaque	required	Android legacy, PWA raster, iOS, store icons
Adaptive foreground	1024×1024	PNG	transparent	recommended	Android/iOS adaptive foreground — mark inside the ~66 % safe area (outer third is masked)
Adaptive background	1024×1024	PNG	opaque	recommended	Android/iOS adaptive background layer
Maskable	512×512	PNG	opaque	recommended	PWA maskable (mark inside the maskable safe zone)
Splash	2732×2732 (+ a -dark variant)	PNG	opaque	optional	Android/iOS splash / launch screen
OG card	1200×630	PNG	opaque	optional	link-preview card (mark plus wordmark text)

Capacitor reads the adaptive/splash masters from ui/assets/: icon.png, icon-foreground.png, icon-background.png, splash.png, splash-dark.png. Without the foreground/background pair it insets the single icon.png into the adaptive safe zone (today's poorer look).

Generated targets (full coverage)

Web — ui/public/, via node assets/icons/build/generate.js

File	Size	Note
favicon.svg	vector	canonical vector output
favicon.ico	32×32	PNG-in-ICO; answers the blind /favicon.ico probe
apple-touch-icon.png	180×180	opaque full-bleed; iOS Safari home-screen (iOS masks its own corners)
og-image.png	1200×630	link-preview card; has the wordmark, referenced by absolute URL

PWA — ui/public/, referenced by manifest.webmanifest

File	Size	purpose
icon-192.png	192×192	any
icon-512.png	512×512	any
icon-maskable-512.png	512×512	maskable

Android — ui/android/app/src/main/res/, via pnpm android:assets

Generated per density mdpi→xxxhdpi (exact px tool-managed); do not hand-edit:

• mipmap-*/ic_launcher.png — legacy square (48 / 72 / 96 / 144 / 192)
• mipmap-*/ic_launcher_round.png — legacy round
• mipmap-*/ic_launcher_foreground.png + ic_launcher_background.png — adaptive layers
• mipmap-anydpi-v26/ic_launcher.xml + ic_launcher_round.xml — adaptive descriptors
• drawable*/splash.png — splash (portrait/landscape × light/night × density)

iOS / iPhone / iPad — FUTURE, via capacitor-assets generate --ios

No iOS shell today; listed so the rebrand covers it. Same masters produce App/App/Assets.xcassets/AppIcon.appiconset:

• Modern (Xcode 14+): a single 1024×1024 marketing icon; Xcode derives the rest.
• Full asset-catalog px (if a full set is emitted): 20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180, 1024 — iPhone {40, 58, 60, 80, 87, 120, 180}, iPad {20, 29, 40, 76, 152, 167}, App Store marketing {1024}.
• Splash: splash-2732x2732.png (+ dark) → the launch storyboard.
• iOS icons are opaque, no alpha, no rounded corners (the OS applies the mask).

Store-listing art — uploaded by hand (outside the repo)

Store	Asset	Spec
RuStore (now)	app icon	512×512 PNG
RuStore	screenshots	phone, per the RuStore listing spec
RuStore	promo / feature graphic	per the RuStore listing spec
App Store (future)	marketing icon	1024×1024
App Store (future)	screenshots	per device class
Google Play (future)	icon / feature graphic	512×512 / 1024×500

Regenerate

cd assets/icons && node build/generate.js    # web favicon set + og card -> ui/public/
cd ui && pnpm android:assets                 # Android launcher + splash
cd ui && node_modules/.bin/capacitor-assets generate --ios   # future, once the iOS shell exists

Open items for the rebrand

• Decide how the new vector master feeds assets/icons/ — retarget the generator onto the supplied vector, or drop in the output files and keep the generator for the OG card only.
• Bring icon-192 / icon-512 / icon-maskable-512 under a generator (today hand-placed — the main drift source).
• Add ui/assets/icon-foreground.png + icon-background.png for a proper adaptive icon (today a single inset icon.png).