shakespeare.diy f9d0310c84 Make SkateSpots logo consistent everywhere

- 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>

2026-09-09 19:29:09 +07:00

3 KiB

Raw Blame History

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:

# 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.

3 KiB Raw Blame History Unescape Escape