Brand & icon design

The City Seekers app icon went through four candidate directions before we settled on the treasure chest. Each was authored at 1024×1024 SVG so it scales cleanly from a 16-pixel browser tab all the way to a 512-pixel Android PWA install. The four candidate SVGs and the chosen icon all live in the repo under web/static/img/app/.

Candidates

Each card shows the icon at the actual sizes the OS uses: a 16-pixel browser tab favicon, a 32-pixel high-DPI tab favicon, a 64-pixel lookup, a 180-pixel iOS home screen icon, and a 256-pixel preview that approximates the 512-pixel PWA install icon.

1 Tracker

Magnifying glass with a paw print inside the lens. Most literal take on "scavenger hunt." Cyan-on-navy stays inside the existing palette.

16

32

64

128

Shipped

2 Treasure

Wooden chest with gold reinforcement bands and a glowing keyhole. Echoes the in-game treasure-chest Lottie animation; the cyan glow ties back to the existing accent color.

16

32

64

128

3 Pin Pal

Anthropomorphic map pin with rosy cheeks and a grin. Most overtly kid-friendly of the four. Uses the same coral red as the legacy compass needle.

16

32

64

128

4 Curiositter Fox

Friendly fox face. Riffs on the in-game Curiositter creature collection (bunny, fox, hedgehog, owl, …) and ties the brand to the central gameplay loop.

16

32

64

128

Why we picked Treasure

Three reasons. It reads at 16 pixels — the chunky gold bands and the keyhole hold up in a browser tab where finer illustrations like the fox's whiskers blur out. It echoes the in-game art — the existing treasure-chest.json Lottie animation already plays on every stop reveal, so the icon and the gameplay reward use the same visual vocabulary. And it carries the cyan accent (the keyhole glow) so the rest of the chrome — the theme-color, button highlights, focus rings — doesn't have to change.

Color palette

The same five values run through the icon, the dark UI chrome, and the in-game compass needle and reveal sheet. Every color in the icon comes from this list — nothing is one-off.

Where the assets live

• Source SVG: web/static/img/app/icon-source.svg — the chosen Treasure design, the single source of truth.
• Candidates we explored: web/static/img/app/candidates/ — kept committed so the design history isn't lost.
• Generated raster icons: web/static/img/app/{favicon.ico, icon-192.png, icon-512.png, icon-maskable-512.png, apple-touch-icon.png}, produced by scripts/generate-icons.py from the source SVG.
• Mobile launcher icons: generated from resources/icon.png via Capacitor's @capacitor/assets tooling — see scripts/generate-mobile-resources.py.

Back to City Seekers →