Gagri Global IT services is having a team of executives who have good experience in developing applications on various platforms like SharePoint 2013/2010, Silverlight, net Framework 4.5 and Mobile tools.

Got web idea? Lets work together

Generate Splash Screens and Icons

Posted on December 14, 2023 by Amruthavalli

Generate Splash Screens and Icons:

  1. Create Resource Folder
  2. Place Icon and Splash Screen Images
  3. Install @capacitor/assets Plugin
  4. Generate Icon and Splash Screen

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.

Capacitor Assets Tool Instructions

Using the @capacitor/assets Tool

First, install @capacitor/assets:

  1. Step 1: Create a resource folder in your project root directory.
  2. Step 2: Place icon (1024px x 1024px) and splash screen images (2732px x 2732px) (jpg or png) in the resource folder.
  3. 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

    foot-logo

    All design and content Copyright © 2012-2018 Gagri Global IT Services Pvt.Ltd. All rights reserved

    Sitemap