You can generate Splash Screens and Icons for your iOS, Android, or Progressive Web Application using the @capacitor/assets tool.
First, install @capacitor/assets
:
npm install @capacitor/assets --save-dev
Provide icon and splash screen source images using this folder/filename structure:
resources/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── splash.png
└── splash-dark.png
- Icon files should be at least
1024px
x1024px
. - Splash screen files should be at least
2732px
x2732px
. - The format can be
jpg
orpng
.
Then generate (which applies to your native projects or generates a PWA manifest file):
npx capacitor-assets generate
Alternatively, you can generate for a specific platform with --ios
, --android
or --pwa
.
Note
The VS Code Extension can also generate Splash Screen and Icon assets.
Android 12+
In Android 12 and above Google changed the way Splash Screens are displayed, using a smaller icon with a colored background instead of a full screen image that was possible with Android 11 and below. Additional documentation about this change can be found at developer.android.com.