Skip to content

Auto Warz — Icon Generator Guide

Document Type: Technical Reference Version: 0.1 Last Updated: 2026-03-27 Vault destination: 03_Art & Audio Folder: 03_Art & Audio Related Files: scripts/generate-icons.js · Logo & Brand Asset Specification.md

What This Does

You give it two PNG files. It generates every logo asset the game needs — app icons, favicons, circle crops, Steam assets, social media profiles, in-game watermarks, mobile icons — all at the correct sizes, all named correctly, all in the right folders.

One command. Done.

Before You Start

You need three things installed on your PC:

1. Node.js You likely already have this since you use GitHub Copilot. Check by opening a terminal and running: 

node --version
If you see a version number (e.g. v20.11.0) you're good. If not, download from nodejs.org.

2. The Sharp library Sharp is the image processing library the script uses. Install it once, inside your repo folder: 

cd C:\path\to\auto-warz
npm install sharp
This takes about 30 seconds. You only ever do this once.

3. Your two master PNG files These come from whatever AI art tool or designer created your logo. See the section below on what they need to look like.

Your Two Master Files

The script needs exactly two source files. Everything else is generated from these.

File 1 — Master with dark background

assets/ui/logo/master/autowarz_logo_master.png
- 1024 × 1024 pixels - The logo on the dark space background (#060810) - This is used for app icons, social profiles, anything that needs a background

File 2 — Master transparent

assets/ui/logo/master/autowarz_logo_master_transparent.png
- 1024 × 1024 pixels - The logo mark only — NO background - Background is transparent (checkerboard pattern in Photoshop/Figma means transparent) - This is used for in-game overlays, Steam logo, mono variants

How to get these from your AI art tool: - Generate the logo at the highest resolution available - Export once with the dark background saved - Export again with background removed (most tools have a "remove background" option, or use remove.bg) - Resize both to exactly 1024 × 1024 if they aren't already - Save as PNG (not JPG — JPG doesn't support transparency)

Running the Script

Open a terminal in your repo folder and run:

node scripts/generate-icons.js

That's it. You'll see output like this:

╔══════════════════════════════════════════════╗
║   Auto Warz — Logo Asset Generator          ║
╚══════════════════════════════════════════════╝

Source files:
  ✓ Master (dark bg):    assets/ui/logo/master/autowarz_logo_master.png
  ✓ Master (transparent): assets/ui/logo/master/autowarz_logo_master_transparent.png

Generating 43 assets...

  icons/
    ✓  autowarz_logo_mark_1024.png  (1024×1024)
    ✓  autowarz_logo_mark_512.png  (512×512)
    ✓  autowarz_logo_mark_256.png  (256×256)
    ...

  circle/
    ✓  autowarz_logo_circle_512.png  (512×512)
    ...

──────────────────────────────────────────────
  ✓  43 files generated

  Output: assets/ui/logo/
──────────────────────────────────────────────

The whole thing takes about 5–10 seconds.

What Gets Generated

After running, your assets/ui/logo/ folder will look like this:

assets/ui/logo/
  ├── master/
  │     ├── autowarz_logo_master.png                    ← your source (you placed this)
  │     ├── autowarz_logo_master_transparent.png        ← your source (you placed this)
  │     ├── autowarz_logo_mark_transparent_1024.png     ← generated
  │     ├── autowarz_logo_mark_transparent_512.png      ← generated
  │     └── autowarz_logo_mark_transparent_256.png      ← generated
  │
  ├── icons/
  │     ├── autowarz_logo_mark_1024.png
  │     ├── autowarz_logo_mark_512.png
  │     ├── autowarz_logo_mark_256.png
  │     ├── autowarz_logo_mark_128.png
  │     ├── autowarz_logo_mark_64.png
  │     ├── autowarz_logo_mark_32.png
  │     ├── autowarz_logo_mark_16.png
  │     ├── favicon_48.png
  │     ├── favicon_32.png
  │     └── favicon_16.png
  │
  ├── circle/
  │     ├── autowarz_logo_circle_512.png
  │     ├── autowarz_logo_circle_256.png
  │     ├── autowarz_logo_circle_128.png
  │     └── autowarz_logo_circle_64.png
  │
  ├── steam/
  │     ├── autowarz_steam_logo_640x360.png
  │     ├── autowarz_steam_icon_library_32.png
  │     └── autowarz_steam_icon_library_64.png
  │
  ├── social/
  │     ├── autowarz_social_profile_400.png
  │     ├── autowarz_social_profile_512.png
  │     ├── autowarz_social_profile_800.png
  │     ├── autowarz_discord_icon_512.png
  │     ├── autowarz_reddit_icon_256.png
  │     ├── autowarz_youtube_icon_800.png
  │     └── autowarz_tiktok_icon_200.png
  │
  ├── ingame/
  │     ├── autowarz_ingame_watermark_256.png
  │     ├── autowarz_ingame_mainmenu_512.png
  │     └── autowarz_ingame_pausemenu_256.png
  │
  ├── mobile/
  │     ├── autowarz_outpost_ios_1024.png
  │     ├── autowarz_outpost_ios_512.png
  │     ├── autowarz_android_foreground_432.png
  │     └── autowarz_android_background_432.png
  │
  └── mono/
        ├── autowarz_mono_white_1024.png
        ├── autowarz_mono_white_512.png
        └── autowarz_mono_white_256.png

After Running — Manual Steps

The script tells you these at the end, but here they are in full.

Step 1 — Generate the .ico favicon file

The .ico format bundles multiple sizes into one file. Browsers use it for the tab icon. Run this after the main script:

npx png-to-ico assets/ui/logo/icons/favicon_16.png assets/ui/logo/icons/favicon_32.png assets/ui/logo/icons/favicon_48.png > assets/ui/logo/icons/favicon.ico

You only need to run this once. The npx command downloads png-to-ico temporarily — no install needed.

Step 2 — Steam capsule images

The script generates the transparent logo overlay for Steam (autowarz_steam_logo_640x360.png) but the actual capsule images that appear in the Steam store need key art — a game screenshot or illustration — with the logo composited on top.

These need to be created manually in Figma, Photoshop, or similar once you have game screenshots. Sizes needed:

Image Size Where it appears
Main capsule 460 × 215 Store search results
Small capsule 231 × 87 "More like this" row
Large capsule 616 × 353 Featured/recommended
Hero capsule 1920 × 620 Top of your store page

Step 3 — Social media banners

Profile pictures are generated automatically. Banners are not — they need game screenshots. Create these once you have screenshots worth showing:

Platform Banner size
Twitter/X 1500 × 500
YouTube 2560 × 1440 (safe zone 1546 × 423 centre)
Discord server 960 × 540
Reddit community 1920 × 384

Step 4 — Wordmark

The wordmark (logo + "AUTO WARZ" text side by side) needs the final font confirmed before it can be generated. Once you have the font, this can also be added to the script as an automated step.

Re-running the Script

Run it again any time you update the master files. It overwrites everything cleanly. There is no harm in running it multiple times.

Good reasons to re-run: - You got a better version of the logo from an AI tool - You made a small tweak to the master file - You added a new asset entry to the script's manifest - Something looked wrong and you want a fresh set

If Something Goes Wrong

"Source not found" warning The script couldn't find one of your master files. Check the file is named exactly right and is in the right folder. Filenames are case-sensitive on Mac and Linux.

"Sharp not found" error Run npm install sharp again from inside your repo folder.

Generated images look blurry or wrong Your master PNG might not be 1024 × 1024. Open it, check the dimensions, and resize it to exactly 1024 × 1024 before running the script again.

Circle crops have a white background instead of transparent Make sure you're using PNG format for the master transparent file, not JPG. JPG can't store transparency.

Script runs but generates 0 files Check that your terminal is inside the auto-warz repo folder when you run it, not in the scripts subfolder.

Adding New Assets

If you need a size or variant that isn't in the script, open scripts/generate-icons.js and add a line to the ASSETS array near the top. Each entry follows this pattern:

{ source:'bg', outDir:'icons', filename:'my_new_file_96.png', w:96, h:96 },
Property What it means
source 'bg' = use master with dark background. 'transparent' = use transparent master.
outDir Subfolder inside assets/ui/logo/ where the file lands
filename Exact output filename
w Width in pixels
h Height in pixels
circle:true Optional — applies circular mask
fit:'contain' Optional — letterboxes instead of cropping (good for non-square outputs)

This script only needs to be run when the logo changes. Once the final logo is locked in, run it once, commit the outputs to the repo, and you're done.