Generate your Icons and Splash Screen Ionic

Learn how to easily customize splash screens and icons in your Capacitor.js app with our detailed guide. Enhance your app’s branding and user experience by following our step-by-step instructions for creating and implementing custom assets.

Tweet
Share
Share
Pin

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:

assets/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── splash.png
└── splash-dark.png

  • Icon files should be at least 1024px x 1024px.
  • Splash screen files should be at least 2732px x 2732px.
  • The format can be jpg or png.

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