Skip to main content

Change App Icon

In this section we will see how we can change the app's launcher icon.

Prepare

To change the app launcher icon, you need to have an icon to replace it with.

  • Dimensions: 1080*1080 px
  • Format: jpg or png

Change the default launcher icon

To change the default icon for your application, follow the steps given below:

  1. Rename the new icon image to app-icon.

  2. Replace / Place the icon created with the already present in the following path: pro_web / assets / images / app-icon.jpg.

  3. Follow this step below based on the format of your icon image:

    <Tabs
    defaultValue="jpg"
    values={[
    { label: "JPG", value: "jpg" },
    { label: "Any other", value: "xxx" },
    ]}>
    <TabItem value="jpg">

    No further changes required. Proceed to next step.

    </TabItem>
    <TabItem value="xxx">

    1. Open the `pubspec.yaml` file in android studio. This file is located in `pro_web / pubspec.yaml`.
    2. Scroll down to the section which resembles the following:

    ```yaml
    flutter_icons:
    android: true
    ios: true
    image_path: "assets/images/app-icon.jpg"
    ```

    3. Update the `app-icon.jpg` in `image_path` with the name and format of your icon image. For example if you have a `png` image then change the the above as following:

    ```yaml
    flutter_icons:
    android: true
    ios: true
    image_path: "assets/images/app-icon.png"
    ```

    4. Now `Save` the file by pressing `command + s` on Mac and `control + s` on Windows.

    5. You will also need to update the value in `constants.dart` file. It is located in `pro_web / lib / constants.dart`.

    1. Open `constants.dart` file in android studio.
    2. Search for the following value:

    ```dart
    const String kAppIconPath = 'assets/images/app-icon.jpg';
    ```

    3. Update the `app-icon.jpg` in `appIconPath` with the name and format of your icon image. For example if you have a `png` image then change the the above as following:

    ```dart
    const String kAppIconPath = 'assets/images/app-icon.png';
    ```

    4. Now `Save` the file by pressing `command + s` on Mac and `control + s` on Windows.

    6. Now follow the next step to generate the icons.

    </TabItem>
    </Tabs>
  4. In the terminal run the following commands from the root folder:

    flutter pub get
    flutter pub run flutter_launcher_icons:main

    This will generate the launcher icons for your application for both android and iOS.

Change Android Notification Icon

For the notification icon, the size needs to be smaller for better performance.

Recommended size for notification icon is 48*48 px or 72*72 px.

Add the new notification icon to pro_web / android / app / src / main / res / drawable / app-icon.jpg. Replace the default icon with your new notification icon.

Usually the notification icons are png images in white color.