Flutter - Changing App Icon

Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be changed.  In this article, we will look into a few possible approaches to achieve the same.

There are two ways to change the App Icon:

1. Manually changing the files of Icons in both Android and IOS folders by uploading all the required sizes of the icon.
2. Using a Package that will add all the sizes of Icons in Android and IOS folders automatically.

Approach 1: Manually changing Icons

Step 1: Generating Different-Sized Icons

Go to https://appicon.co/ and upload the icon image and tick the iPhone and Android options and click on Generate. This site generates different sized Icons for both Android and IOS at the same time.

It will Download the Zip file named AppIcons with the android and Assets.xcassets named folders along with images for appstore and playstore which can be directly uploaded as an icon in both the stores.

Now, open your Project in VS Code.

Step 2: Adding Icons in Android

Navigate to android/app/src/main/res and right-click on the res folder and click "reveal in Explorer". Now delete all the mipmap folders in the res folder and paste the mipmap folders from AppIcon/android folder which you have downloaded.

Step 3: Adding Icons in IOS

Now navigate to the ios/Runner/Assets.xcassets. Now, after you are in the Runner folder, right-click on the Runner folder and click "reveal in Explorer". Now, delete the Assets.xcassets folder and paste the Assets.xcassets folder from AppIcon/Assets.xcassets which you have downloaded.

Step 4: Run the Application

After manually changing the images in Android and IOS folders now go to lib/main.dart and run the flutter project using the below command in the flutter console.

flutter run

Approach 2: Using Package " Flutter Launcher Icons "

By using the package, we can generate different-sized Icons at a time for both Android and IOS.

Step 1:  Navigate to pubspec.yaml file

Open your Project in VS Code and go to pubspec.yaml file.

Step 2: Update the dev_dependencies

Go to dev_dependencies and add flutter_launcher_icons: "^0.13.0" dependency and save the file. It will get the dependency. 

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0
  flutter_launcher_icons: ^0.14.3

Step 3: Add the dependency

Now add the flutter_launcher_icons: and save.

dev_dependencies:
  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"

Step 4: Add the Assets

Now create an assets folder -> create icon folder -> add icon.png file 

Note: If you are not having a .png image, then change the image format in image_path: as shown in the above image.

Step 5: Download the dependencies

Open the Terminal in VS Code and run 

flutter pub get

After the command is executed successfully, run 

flutter pub run flutter_launcher_icons

After both the commands are executed successfully then go to lib/main.dart file and run the app

flutter run

 Output: