Ilia Denisov
4a3e12c85a
The adaptive foreground's asterisk grazed the round mask's safe zone. Scale the foreground mark 0.75 about the icon centre (25% smaller, the letter-to-star arrangement unchanged) so it sits well inside the 61% safe zone. Independently, the legacy square ic_launcher.png now renders the full-bleed master instead of the safe-zone composite, so old Android (< API 26) shows a large mark rather than a shrunk one; the legacy round icon keeps the safe-zone composite (a round mask would clip the master's corner star). Regenerate the layer set, Android res and the brandbook foreground previews; update ICON_BRANDBOOK.md / ICONS.md.
4.9 KiB
Icon & logo asset map
The whole shipped icon set is sliced from one master. This file is the per-platform target map (which file goes where, at what size). How the mark itself is constructed — proportions, palette, wood grain, the light/shadow gradients, the «Э» + ✻ placement, all in fractions of the side — is specified in
ICON_BRANDBOOK.md. The reference generator, the pinned Spectral font and the committed masters live in../assets/icons/brand/.
The master (one source, six layers)
brand/build-icon.mjs emits any --variant light|dark in any --layer:
| Layer | What | Feeds |
|---|---|---|
full |
rounded tile + master mark | favicon.svg |
flat |
square tile + master mark (OS rounds) | apple-touch, PWA "any", VK, TG, store |
background |
square tile only, full-bleed | Android adaptive background |
foreground |
mark only, transparent, re-placed for the round mask | Android adaptive foreground |
maskable |
square tile + foreground-placed mark | PWA maskable |
monochrome |
foreground-placed silhouette, flat colour | Android 13+ themed layer |
brand/build-set.mjs renders every raster below; brand/build-android-res.mjs renders
the Android launcher resources.
Generated targets
Web — ui/public/ (via brand/build-set.mjs)
| File | Size | Note |
|---|---|---|
favicon.svg |
vector | light + dark in one file via prefers-color-scheme |
favicon.ico |
32×32 | PNG-in-ICO; answers the blind /favicon.ico probe |
apple-touch-icon.png |
180×180 | opaque full-bleed (iOS masks its own corners) |
icon-192.png / icon-512.png |
192 / 512 | PWA any, light |
icon-192-dark.png / icon-512-dark.png |
192 / 512 | dark variants (generated; see PWA note) |
icon-maskable-512.png |
512×512 | PWA maskable, light |
icon-maskable-512-dark.png |
512×512 | dark variant (generated; see PWA note) |
og-image.png |
1200×630 | board-green card: master tile + «Эрудит» / Игра в слова |
PWA — ui/public/manifest.webmanifest
Referenced icons are the light set (icon-192, icon-512 = any;
icon-maskable-512 = maskable). The manifest has no reliable way to pick an icon by
colour scheme, so the dark PNGs are generated but not referenced — theming the
in-browser tab is handled by favicon.svg instead. Wire the dark files in only if a
concrete installer target is known to honour them.
Android — ui/android/app/src/main/res/ (via brand/build-android-res.mjs)
Capacitor layer inputs are ui/assets/{icon,icon-foreground,icon-background}.png. The
resources are hand-generated from the layers, not capacitor-assets — our layers
already fill the 108 dp canvas (foreground inside the 61 % safe zone, background
full-bleed), so they must be placed with no inset, and we add the monochrome
themed layer, neither of which capacitor-assets does. Per density mdpi→xxxhdpi (+ldpi):
mipmap-*/ic_launcher.png— legacy square (< API 26): the full-bleed master (large mark), so old square launchers do not shrink it into the safe zonemipmap-*/ic_launcher_round.png— legacy round (< API 26): the safe-zone composite, circle-clipped (a round mask would clip the master's corner ✻)mipmap-*/ic_launcher_foreground.png+ic_launcher_background.png— adaptive layersmipmap-*/ic_launcher_monochrome.png— themed layermipmap-anydpi-v26/ic_launcher.xml+ic_launcher_round.xml— no<inset>, with<background>+<foreground>+<monochrome>(committed by hand)
iOS / iPhone / iPad — FUTURE
No iOS shell today. When one exists, flat (opaque, no alpha, no rounded corners; the OS
masks) drives the asset catalog — a single 1024×1024 marketing icon (Xcode derives the
rest), plus light/dark/tinted where the catalog supports it.
VK / Telegram / store — manual upload (brand/{vk,tg,store}/)
Square, no rounding (each platform crops/rounds itself), light flat:
| Folder | Files | Use |
|---|---|---|
vk/ |
vk-576/278/150/32.png |
VK community / app icons |
tg/ |
tg-512.png |
Telegram bot avatar + Mini App icon (512, square; TG crops circular) |
tg/ |
tg-demo-640x360.png |
BotFather /newapp demo banner (tile + wordmark) |
store/ |
rustore-512.png |
RuStore app icon |
| RuStore | screenshots / feature graphic | per the RuStore listing spec (uploaded by hand) |
| Google Play (future) | icon / feature graphic | 512×512 / 1024×500 |
| App Store (future) | marketing icon / screenshots | 1024×1024 / per device class |
Regenerate
cd assets/icons/brand
npm i # opentype.js (rasterisation reuses the ui package's chromium)
node build-set.mjs # web (ui/public) + Capacitor layers (ui/assets) + vk/ tg/ store/ + og
node build-android-res.mjs # Android launcher resources (all densities + monochrome)