040-40077168info@gagri.net
Hyderabad & Visakhapatnam, India
Brand Identity Showcased on Mobile Devices

Generate Splash Screens and Icons

First impressions are vital. We streamline the generation of high-resolution splash screens and icons, ensuring your brand is represented with pixel-perfect precision from the moment a user launches your application on any device.

Four Simple Steps to Perfection

1

Create Resource Folder

Objective: Prepare a dedicated folder to store resources such as icons and splash screen images.

Theoretical Explanation: The resource folder, typically named "resources," is created in the root directory of your Capacitor project. This folder will contain images used for generating icons and splash screens.

2

Place Icon and Splash Screen Images

Objective: Add specific images for the app icon and splash screen to the resource folder.

Theoretical Explanation: Two images are required - an app icon (1024px x 1024px) and a splash screen image (2732px x 2732px). These images should be in either JPG or PNG format. Placing them in the resource folder makes them accessible for the @capacitor/assets tool.

3

Install @capacitor/assets Plugin

Objective: Install the @capacitor/assets plugin for Capacitor.

Theoretical Explanation: Open the command prompt in the project directory and execute the npm (Node Package Manager) install command to add the @capacitor/assets package to your project. This plugin provides functionality to generate icons and splash screens based on the images provided.

4

Generate Icon and Splash Screen

Objective: Use the @capacitor/assets tool to generate the app icon and splash screen.

Theoretical Explanation: Run the npx capacitor-assets generate command in the command prompt. This command utilizes the installed @capacitor/assets package to process the images in the resource folder and generate the necessary assets for icons and splash screens based on the specifications outlined by Capacitor.

Using the @capacitor/assets Tool

To ensure your application perfectly matches native OS design languages, follow these quick implementation steps for the @capacitor/assets tool:

Step 1: Create a resource folder in your project root directory.
Step 2: Place icon (1024px x 1024px) and splash screen images (2732px x 2732px) (jpg or png) in the resource folder.
Step 3: Open the command prompt in the project directory and install the plugin from Capacitor Documentation:
npm install @capacitor/assets --save-dev
Step 4: Generate the icon and splash screen by running the following command:
npx capacitor-assets generate

For more details, refer to the official documentation.

View Official Docs