Open In App

Flutter – Changing App Icon

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 Package which 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.

Icons changed in the res folder

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.

Assets.xcassets Changed in Runner Folder

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 the 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.8.0” dependency and save the file. It will get the dependency. 

Adding dependency in dev_dependencies 

Step 3: Add the dependency

Now add the flutter_launcher_icons: and save.

Step 4: Add the Assets

Now create 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 then 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: 


Last Updated : 28 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads