Handle icon and splash screen generation for Capacitor apps using `@capacitor/assets`.
This skill provides instructions for managing and regenerating native assets (icons and splash screens) for a Capacitor-based application.
Place high-resolution source images in the assets/ directory at the root of the project:
icon.png: (Min 1024x1024px) The main app icon. Should be a square, preferably with transparency or a solid background that works across themes.splash.png: (Min 2732x2732px) The light mode splash screen.splash-dark.png: (Min 2732x2732px) The dark mode splash screen. The -dark suffix is mandatory for the tool to recognize and generate night-mode variants.[!IMPORTANT] Source images should be "raw" designs. Avoid including mobile phone frames, bezels, or device mockups in the source files, as the generation tool will slice them directly into native resources.
Ensure the Android SDK tools are in your PATH:
export PATH=$PATH:/usr/local/bin:/opt/homebrew/share/android-commandlinetools/platform-tools
If you have new designs, replace the files in the assets/ folder, ensuring they retain the correct filenames listed above.
Run the following command to slice the assets and inject them into the android/app/src/main/res directories:
npx @capacitor/assets generate --android
Check the android/app/src/main/res/ directory. You should see updated .png files in:
mipmap-*: Iconsdrawable-port-*: Splash screens (Portrait)drawable-land-*: Splash screens (Landscape)drawable-*-night-*: Dark mode variants (if splash-dark.png was provided)Capacitor automatically uses these resources. After generating, the next time you build the APK/AAB or run the app on a device, the new assets will be visible.
npm install or generation fails due to permissions, avoid global installs. Use npx as shown in the commands above.splash-dark.png.