12. Auto-Generating Icons & Splash Screens (Stop Wasting Time in Photoshop)

By now, you've bled enough hours into certificates, builds, and automation pipelines. The last thing you should be doing is manually exporting app icons and splash screens in 57 different sizes for Apple and Google.

Good news: you don't have to.

---

Folder setup (do this or nothing works)

From your project root, create a resources/ folder with your source assets:

your-app/
├─ resources/
│  ├─ icon.png  (or .svg)  ← square 1024×1024 recommended
│  └─ splash.png  (or .svg)  ← large canvas; 2732×2732 is safe
├─ android/
│  └─ app/src/main/res/  ← generator writes mipmaps/drawables here
└─ ios/  └─ App/App/Assets.xcassets/  ← generator writes AppIcon & Splash here

Rules that save headaches:

• icon: perfectly square, no transparent stray pixels, no massive padding.

• splash: huge canvas with your mark centered; background color comes from the flags below.

• Using SVG? In Illustrator export with artboards so the bounding box isn't weird (that's why stuff crops).

---

Install (one-time)

npm i -D @capacitor/assets

---

Generate (light & dark variants)

From your project root:

npx @capacitor/assets generate 
  --iconBackgroundColor '#ffffff'  
  --iconBackgroundColorDark '#0f1926'  
  --splashBackgroundColor '#ffffff'   
  --splashBackgroundColorDark '#0f1926'

• If your files aren't the default names/paths, point to them: bash npx @capacitor/assets generate --icon resources/my-icon.svg --splash resources/my-splash.png

What you'll see after generating:

• iOS → ios/App/App/Assets.xcassets/AppIcon.appiconset/* and ios/App/App/Assets.xcassets/Splash.imageset/*

• Android → android/app/src/main/res/mipmap-*/ic_launcher*.png and android/app/src/main/res/drawable*/splash.png

(Yes, it does adaptive icons for Android with the background color you provided.)

---

CI tip (so you never think about it again)

Add a script to package.json:

{  
    "scripts": {  
        "assets": "npx @capacitor/assets generate",  
        "build:mobile": "npm run assets && npm run build && npx cap sync"
    }
}

Then have Appflow (or your CI) run npm run build:mobile before each platform build.

---

Quick sanity checks

• Open Xcode → Assets.xcassets → confirm AppIcon and Splash exist.

• Open Android Studio → check mipmap- folders for ic_launcher* and drawable for splash.

• If anything's missing, delete the generated folders, fix your resources/ images, re-run the command.

---

Why This Matters

Apple requires different sizes for:

• iPhone (multiple generations).

• iPad.

• App Store listings.

Android requires:

• LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI.

If you tried to do all of these by hand? Hours gone.

With Capacitor's tool, you generate them once, check them in, and forget about it.

---

Pro Tip

Keep a clean, square 1024x1024 logo as your master source. It'll resize cleanly for everything. If your logo is taller than it is wide, fix it in Illustrator first (export with a bounding box) or it'll crop weirdly.

---

Survival Tips

• Automate in CI/CD → add the asset generation command to your pipeline so you never have to think about it again.

• Keep dark/light variants → stores love consistency across themes.

• Don't over-design splash screens → simple color + logo = fastest load.

---

Coming Up Next

Okay, you've got icons and splash screens sorted without wasting hours. Your builds are automated. Your app looks polished.

Which means it's time for the final boss fight: App Review.

Apple vs Google. Delays, miscommunications, rejections, and the joy of arguing with anonymous reviewers until they finally let you through.

This is where the real scars come from.