Skip to content
Related Articles

Related Articles

Improve Article

Flutter – Changing App Icon

  • Difficulty Level : Basic
  • Last Updated : 29 Dec, 2020

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 Icon in Both Android and IOS folder 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 res folder and click “reveal in Explorer”. Now delete all the mipmap folders in 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 Runner folder, right-click on 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_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 .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:main

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

flutter run

 

Output: 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :