f9d0310c84
- Swap the map "you are here" badge (user-location.png) to the clean orange logo instead of the busy sticker art - Remove stale red-pin icon.svg / generate-icons.html artifacts that were unused and would regenerate the wrong logo - Rewrite LOGO_USAGE.md to describe the real logo, list every place it is used, and document how to regenerate the native Android launcher icon with @capacitor/assets - Update IMPLEMENTATION_COMPLETE.md references Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
74 lines
3 KiB
Markdown
74 lines
3 KiB
Markdown
# SkateSpots Logo Assets
|
||
|
||
The official SkateSpots logo — an orange circular emblem with a spiky
|
||
sunburst/star, a hexagon, and a location pin with a skater inside.
|
||
|
||
## Source of truth
|
||
|
||
The logo lives as a set of **byte-identical** PNGs in `/public/images/`:
|
||
|
||
| File | Purpose |
|
||
|------|---------|
|
||
| `icon-1024.png` | **Master app icon** — favicon, apple-touch-icon, PWA `any` icon, OG/Twitter image, in-app logo (Splash, Layout, Index) |
|
||
| `icon-maskable-1024.png` | PWA **maskable** icon variant |
|
||
| `logo.png` | General logo (marketing / CVM server profile) |
|
||
| `logo-icon.png` | Alias used by older references |
|
||
| `user-location.png` | "You are here" map marker badge (circular crop) |
|
||
|
||
> ⚠️ Keep these in sync. If the brand logo changes, replace **all** of the
|
||
> files above with the new artwork so the logo is consistent everywhere.
|
||
|
||
## Where the logo is used in code
|
||
|
||
- `src/components/SplashScreen.tsx` → `/images/icon-1024.png`
|
||
- `src/components/Layout.tsx` → `/images/icon-1024.png` (header + footer)
|
||
- `src/pages/Index.tsx` → `/images/icon-1024.png`
|
||
- `src/components/SpotMap.tsx` → `/images/user-location.png` (map "you are here" badge)
|
||
- `index.html` → favicon, apple-touch-icon, OG/Twitter image
|
||
- `public/manifest.webmanifest` → PWA icons + shortcuts
|
||
- `cvm-server/server.ts` → `https://skate-spots.org/images/logo.png`
|
||
|
||
## Native Android launcher icon (IMPORTANT)
|
||
|
||
The Android home-screen / Zapstore launcher icon lives in
|
||
`android/app/src/main/res/mipmap-*/` and is **NOT** regenerated by
|
||
`npx cap sync`. It is only laid down once when `npx cap add android` runs.
|
||
|
||
To make the native launcher icon match the current logo, regenerate it from
|
||
the master PNG with the official Capacitor assets tool **before** building the
|
||
APK:
|
||
|
||
```bash
|
||
# one-time: create the assets source folder Capacitor's tool expects
|
||
mkdir -p assets
|
||
cp public/images/icon-1024.png assets/icon-only.png
|
||
cp public/images/icon-1024.png assets/icon-foreground.png
|
||
# a solid brand-black background behind the adaptive foreground
|
||
# (or supply your own assets/icon-background.png)
|
||
|
||
# generate all Android mipmap densities + adaptive icon
|
||
npx @capacitor/assets generate --android --iconBackgroundColor '#000000' --iconBackgroundColorDark '#000000'
|
||
|
||
# then sync + build as usual
|
||
npx cap sync android
|
||
cd android && ./gradlew clean assembleRelease
|
||
```
|
||
|
||
After running this, the `mipmap-*/ic_launcher*.png` and
|
||
`mipmap-anydpi-v26/ic_launcher.xml` (adaptive icon) will all show the orange
|
||
SkateSpots logo. Verify the phone home-screen icon and the Zapstore "App Icon"
|
||
preview before publishing.
|
||
|
||
## Color Scheme
|
||
|
||
- **Orange:** #ff6600 (primary logo)
|
||
- **Hot Pink:** #ff0040 (accent / theme color)
|
||
- **Neon Lime:** #ccff00 (secondary accent)
|
||
- **Black:** #000000 (backgrounds / adaptive-icon background)
|
||
|
||
## Usage Guidelines
|
||
|
||
- Maintain aspect ratio when scaling — the logo is square (1:1).
|
||
- The emblem crops cleanly into a circle (used for the map badge & avatars).
|
||
- Minimum display size: 32×32px.
|
||
- Don't add extra effects, filters, or recolor the emblem.
|