Generate App Icon and Splash Screen for Ionic Capacitor Android/iOS

When developing an Ionic Capacitor app, having a professional-looking app icon and splash screen is essential for branding and user experience. Capacitor provides built-in tools to generate these assets efficiently for both Android and iOS platforms.

Prerequisites

Before starting, ensure you have:

An existing Ionic Capacitor project
Node.js and Capacitor CLI installed
High-resolution images for the app icon and splash screen

Having the right assets is crucial because both Android and iOS require different image resolutions for various screen sizes and densities. Creating these assets manually can be tedious, which is why Capacitor provides a tool to automate this process.

Step 1: Install Capacitor Assets Plugin

Capacitor provides an official plugin to generate icons and splash screens automatically. Install it using the following command:

npm install @capacitor/assets

Then, synchronize the project:

npx cap sync

This ensures that the plugin is properly installed and ready for use in generating the required assets.

Step 2: Add App Icon and Splash Screen Images

The next step is to place your app icon (icon.png) and splash screen (splash.png) inside the resources folder in the root directory of your project. If the folder does not exist, create it manually.

Image Requirements:

App Icon:
- Size: 1024x1024 px
- Format: PNG (preferably with a transparent background)
- The image should not have rounded corners as iOS and Android will apply their respective masking.
Splash Screen:
- Size: 2732x2732 px
- Format: PNG (with a centered logo and transparent background)
- The logo should be centrally positioned with enough padding to prevent cropping on different screen sizes.

Step 3: Generate Icons and Splash Screens

Once your images are in place, run the following command to generate the required assets:

npx capacitor-assets generate

This command scans the resources directory and creates various versions of the icon and splash screen optimized for different device resolutions. It will automatically place the generated assets in the correct locations within the android and ios folders.

Step 4: Sync and Verify the Changes

After generating the assets, synchronize them with your Capacitor project:

npx cap sync

This step ensures that all generated assets are copied into the platform-specific directories for Android and iOS. To confirm that the assets have been properly applied, you can open the respective platform in their development environment:

npx cap open android
npx cap open ios

Step 5: Customize Splash Screen Behavior

To control how the splash screen behaves, modify the capacitor.config.ts file:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: true,
      backgroundColor: '#ffffff',
      androidSplashResourceName: 'splash',
      iosSplashResourceName: 'Default',
      showSpinner: true
    },
  }
};

export default config;

Step 6: Testing Your App Icon and Splash Screen

To test your new app icon and splash screen, run your app on an emulator or physical device:

npx cap run android
npx cap run ios

If the assets do not appear as expected, try cleaning the build and running the project again:

npx cap sync
npx cap run android

Real-World Application and Best Practices

When developing a mobile app, the first thing a user notices is the app icon and splash screen. A well-designed app icon makes the app look polished and professional, while a splash screen improves the user experience by creating a smooth transition into the app.

Best Practices for App Icons:

Avoid using too much text in the icon; keep it simple and recognizable.
Use high-contrast colors to make it stand out on both light and dark themes.
Ensure the icon is scalable and recognizable at different sizes.

Best Practices for Splash Screens:

Keep the logo centered with enough padding to prevent cropping on different devices.
Avoid using too many details that might not be visible on smaller screens.
Make sure the background color matches the app’s primary theme for consistency.

Common Issues and How to Fix Them

1. Generated Assets Are Not Appearing

If your new icons or splash screens are not showing up, try the following:

Ensure you have placed the images in the correct resources directory.
Run npx cap sync again to refresh the assets.
Delete the android/app/src/main/res/drawable and ios/App/App/Assets.xcassets folders and regenerate the assets.

2. Splash Screen Appears Blank

Make sure your splash.png has a proper background or set a background color in capacitor.config.ts.
Check that your image resolution is correct (2732x2732 px recommended).

3. Icon Appears Cropped or Misaligned

Ensure the icon has proper padding and is not too close to the edges.
Avoid adding rounded corners as the OS applies them automatically.

Conclusion

By following these steps, you can easily generate and integrate high-quality app icons and splash screens into your Ionic Capacitor project. This process ensures a polished and professional look for your mobile application on both Android and iOS platforms.

Having a consistent and well-designed set of icons and splash screens greatly enhances the user experience and makes your app stand out in the crowded marketplace. Whether you are developing a personal project or a commercial application, investing time in properly setting up these assets will pay off in the long run.

If you run into any issues, refer to the official Capacitor documentation or reach out to the Ionic developer community for additional support.

Happy coding! 🚀

Generate App Icon and Splash Screen for Ionic Capacitor Android/iOS