How can I change the application launcher icon in Flutter?

Question

When I create an application with a flutter create command, the Flutter logo is used as an application icon for both platforms.

If I want to change the application icon, shall I go to both platforms directories and replace images there? By platforms directories I mean myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset for iOS and myapp/android/app/src/main/res for Android.

Or is it possible to define an image as a Flutter Asset and the icons are generated somehow?

• Mayur Dabhi: you can update appicon with two way, i have mention both way check here
• RobertoAllende: Here's a new solution to this problem using appicon.co to generate the different icons. The nice of this post is that includes web, macOS and Windows.

Answer 1

Flutter Launcher Icons has been designed to help quickly generate launcher icons for both Android and iOS.

• Add the package to your pubspec.yaml file (within your Flutter project) to use it
• Within the pubspec.yaml file, specify the path of the icon you wish to use for the app and then choose whether you want to use the icon for the iOS app, Android app, or both.
• Run the package
• Voila! The default launcher icons have now been replaced with your custom icon

I'm hoping to add a video to the GitHub README to demonstrate the above.

A video showing how to run the tool can be found here.

If anyone wants to suggest improvements/report bugs, please add it as an issue on the GitHub project.

As of Wednesday 24th January 2018, you should be able to create new icons without overriding the old existing launcher icons in your Flutter project.

As of v0.4.0 (8th June 2018), you can specify one image for your Android icon and a separate image for your iOS icon.

As of v0.5.2 (20th June 2018), you can now add adaptive launcher icons for the Android app of your Flutter project

• camino: Is there any requirement for the image?
• Suragch: Do you have a recommended image size for the image_path image?
• Suragch: I only found a reference to one size, 710x599. What was the reason for choosing that? I would have expected 512x512 or 1000x1000 or something square anyway.
• Mark O'Sullivan: @Suragch just did a quick search for an icon on Google so I could quickly test it. I included two other icon sizes so people could try out the package (1024x1024 and 128x128), you can find these here: github.com/fluttercommunity/flutter_launcher_icons/tree/master/…
• Brett Sutton: Can I suggest that the packages read.me should provide recommendations on images sizes.

Answer 2

Setting the launcher icons like a native developer

I was having some trouble using and understanding the flutter_launcher_icons package. This answer is how you would do it if you were creating an app for Android or iOS natively. It is pretty fast and easy once you have done it a few times.

Android

Android launcher icons have both a foreground and a background layer.

Enter image description here

(image adapted from Android documentation)

The easiest way to create launcher icons for Android is to use the Asset Studio that is available right in Android Studio. (Visual Studio Code users, you might consider using Android Studio just for this step. It's really very convenient and it doesn't hurt to be familiar with another IDE.)

Open the android folder of your Flutter project (not the whole Flutter project itself) in Android Studio. If it prompts you to upgrade Gradle or Java or anything, don't. But you do have to wait a few minutes for Gradle to sync and the project file structure to load.

After the project has finished loading, right click the res folder. Go to New → Image Asset. Now you can select an image to create your launcher icon from.

Note: I usually use a 1024x1024 pixel image but you should certainly use nothing smaller than 512x512. If you are using Gimp or Inkscape, you should always have two layers, one for the foreground and one for the background. The foreground image should have transparent areas for the background layer to show through.

Enter image description here

(lion clipart from here)

This will replace the current launcher icons. You can find the generated icons in the mipmap folders:

If you would prefer to create the launcher icons manually, see this answer for help.

Finally, make sure that the launcher icon name in the AndroidManifest is the same as what you called it above (ic_launcher by default):

application android:icon="@mipmap/ic_launcher"

Run the app in the emulator to confirm that the launcher icon was created successfully.

iOS

I always used to individually resize my iOS icons by hand, but if you have a Mac, there is a free app in the Mac App Store called Icon Set Creator. You give it an image (of at least 1024x1024 pixels) and it will spit out all the sizes that you need (plus the Contents.json file). Thanks to this answer for the suggestion.

iOS icons should not have any transparency. See more guidelines here.

After you have created the icon set, start Xcode (assuming you have a Mac) and use it to open the ios folder in your Flutter project. Then go to Runner > Assets.xcassets and delete the AppIcon item.

Enter image description here

After that right-click the assets panel (or click the + button at the bottom) and choose Import.... Choose the icon set that you just created.

That's it. Confirm that the icon was created by running the app in the simulator.

If you don't have a Mac...

You can still create all of the images by hand. In your Flutter project go to ios/Runner/Assets.xcassets/AppIcon.appiconset.

The image sizes that you need are the multiplied sizes in the filename. For example, [email protected] would be 29 times 3, that is, 87 pixels square. You either need to keep the same icon names or edit the JSON file.

• Suragch: @MarkO'Sullivan, thank you. My guess is that the package is fine. It is just that the documentation was hard for me to follow. For example, what size to use for the initial image, are the background layers getting created for Android, etc. It would be really helpful to have a detailed tutorial to guide a beginner through the process.
• MwamiTovi: This helped. Within Android Studio, there is no option to add Image Asset. The work around I learnt from a github/flutter issue is to open the /android folder (within the flutter project) as a standard alone "Android" project within Android Studio. The option will appear when you right-click on the /res folder.
• Daniel: @MwamiTovi is right, however you need to wait for gradle sync before right-clicking or even sync manually, otherwise "new -> image asset" will not show.
• mrb: I can't found New>Image Asset option after right clicking on both android and android/app folder on latest version of android studio.
• Derence: For me, when I clicked on New > Image Asset, nothing happens. For anybody having this problem, just go to File > Open, navigate to the "android" folder of your flutter project and open it. Wait for it Android Studio to sync (it took about 2 minutes for me). Once it's loaded, open the "app" folder, right click on the "res" folder, then New > Image Asset. That worked for me. (Source: github.com/flutter/flutter-intellij/issues/…)

Answer 3

Follow simple steps:

1. Add the flutter_launcher_icons plugin to file pubspec.yaml

E.g.,

dev_dependencies:
 flutter_test:
 sdk: flutter
 flutter_launcher_icons: "^0.9.0"
flutter_icons:
 image_path: "icon/icon.png"
 android: true
 ios: true
 # Optionally, as transparency is not allowed on app store
 # remove_alpha_ios: true

2. Prepare an app icon for the specified path. E.g., icon/icon.png

3. Execute command on the terminal to Create app icons:

flutter pub get

flutter pub run flutter_launcher_icons:main

To check check all available options and to set different icons for android and iOS please refer this

The flutter_launcher_icons 0.8.0 version (12th Sept 2020) has Added flavours support.

Flavors are typically used to build your app for different environments such as dev and prod .

The community has written some articles and packages you might find useful. These articles address flavors for both iOS and Android.

• olisteadman: This worked for me; only once I'd run that last line flutter pub pub run flutter_launcher_icons:main. Thanks for the tip!
• ir2pid: I get errors android.dart:164:25: Error: Too many positional arguments: 1 allowed, but 4 found.
• Maximiliano Sosa: I can switch icon if darkmode is activated?
• Gökçer Gökdal: @ir2pid to solve error you need to update version as flutter_launcher_icons: 0.7.5
• ch271828n: Just a curious question: why pub pub instead of pub?

Answer 4

I would suggest you to use this website linked below:

App Icon Creator

Step 1: Upload the image,

Step 2: Make necessary changes and click on Download (don’t change the file name)

Step 3: Extract the downloaded ZIP file in the respective folder

android/app/src/main/res

• evals: this suggestion will not help in IOS
• Kisakyamukama: works for ios too using xcode to add the xassets
• Afolayan Ademola: please how do we do this for ios

Answer 5

I have changed it in the following steps:

1. Please add this dependency on your pubspec.yaml page

   dev_dependencies:
    flutter_test:
    sdk: flutter
    flutter_launcher_icons: ^0.7.4
   

2. You have to upload an image/icon on your project which you want to see as a launcher icon. (I have created a folder name:image in my project. Then upload the logo.png file in the image folder). Now you have to add the below codes and paste your image path on image_path: in pubspec.yaml page.

   flutter_icons:
    image_path: "images/logo.png"
    android: true
    ios: true
   

3. Go to a terminal and execute this command:

   flutter pub get
   

4. After executing the command, then enter the below command:

   flutter pub run flutter_launcher_icons:main
   

5. Done

N.B: Of course add an updated dependency from flutter_launcher_icons install, Use this package as a library

Answer 6

You have to replace the Flutter icon files with images of your own. Launcher icon generator will help you turn your PNG image into launcher icons of various sizes.

• Mark O'Sullivan: Your link only produces the correct sizes for Android icons
• Sochima Biereagu: latest website icon.kitchen

Answer 7

The best and recommended way to set the application icon in Flutter.

I found one plugin to set the application icon in Flutter named flutter_launcher_icons. We can use this plugin to set the application icon in Flutter.

1. Add this plugin in the pubspec.yaml file in the project root directory. Please check the below code,

   dependencies:
    flutter:
    sdk: flutter
    cupertino_icons: ^0.1.2
    flutter_launcher_icons: ^0.7.2+1**
   

Save the file and run flutter pub get in the terminal.

2. Create a folder assets in the root of the project in folder assets. Also create a folder icon and place your application icon inside this folder. I will recommend to use a 1024x1024 application icon size. I have placed an application icon inside the icon folder, and now I have the application icon path as assets/icon/icon.png.

3. Now, in pubspec.yaml, add the below code,

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

4. Save the file and run flutter pub get in the terminal. After running the command, run the second command as below:

   flutter pub run flutter_launcher_icons:main -f pubspec.yaml
   

   Then run the application.

• Felipe Augusto: Although you answered the same old correct answer, at least you highlighted the main points of that.
• MUsman: what does android: "launcher_icon" mean?
• fsalazar_sch: it appears me error adding flutter_launcher_icons I suggest you replace it by flutter_launcher_icons: "^0.11.0"

Answer 8

Flutter has its own default icon for every app in its Android and iOS folders, so there are few steps that I would like to show to change the app icon.

1. Head over to https://appicon.co/ and generate your own icon using icon image (the ZIP file contains two main folders, android and Assets.xcassets)
2. For Android: Go inside android\app\src\main\res in your Flutter app and there paste the Android folder content.
3. For iOS: Go inside ios\Runner in your Flutter app and there paste the Assets.xcassets content
4. Restart your emulator or rebuild your application

• cwhisperer: why using plugins when it is native ;)
• Rohan: No, I am not talking about plugins I am sharing the link to generate icons later we will use it in our native code.
• Ten Digit Grid: I did this but My icon just looks like a square and doesn't fill the round circle. Any tips?
• Rohan: Hey @TenDigitGrid you can easily do that using android studio. Open android->app->src->main->res and there right-click on res folder and then select New and then select Image Assets then you will get image assets configuration wizard. Their click on source asset path and select your icon their you will get all sorts of differrent configuration for your icon

Answer 9

flutter_launcher_icons: ^0.13.1

Add this in your pubspec.yaml file:

dev_dependencies:
 flutter_launcher_icons: "^0.13.1"
flutter_icons:
 android: "launcher_icon"
 ios: true
 image_path: "assets/icon/icon.png"
 min_sdk_android: 21 # Android minimum SDK version: 16; default 21
 # Optionally, as transparency is not allowed on the App Store
 # remove_alpha_ios: true

After adding this, run the below command:

flutter pub get
flutter pub run flutter_launcher_icons:main

Answer 10

Without any packages

Android

1. Create an adaptive launcher icon in your Flutter project's root directory using the Android Asset Studio.

2. Add the generated launcher icon files to the project's android/app/src/main/res/mipmap-/* directories.

3. Edit the android/app/src/main/AndroidManifest.xml file and add the following line below the <application> tag:

   <application android:icon="@mipmap/ic_launcher">
   

4. Run the flutter build apk command to generate an APK with the new launcher icon.

iOS

1. Create an Adaptive App Icon in your Flutter project's root directory using the App Icon Generator.

2. Add the generated app icon files to the project's ios/Runner/Assets.xcassets/AppIcon.appiconset/ directory.

3. Edit the ios/Runner/Info.plist file and add the following line below the <dict> tag:

   <key>CFBundleIconName</key>
   <string>AppIcon</string>
   

4. Run the flutter build ios command to generate an IPA file with the new launcher icon.

Answer 11

The flutter_launcher_icons package recommended in many previous answers hasn't been updated for quite some time now and is throwing an uncaught exception.

You can use the package icons_launcher instead though.

1. Update the pubspec.yaml

   dev_dependencies:
    icons_launcher: ^1.1.7
   flutter_icons:
    image_path: 'assets/ic_logo_border.png'
    ios: true
    android: true
   

2. Run the package

   flutter pub get
   flutter pub run icons_launcher:main
   

Answer 12

The best way is to change the launcher icons separately for both iOS and Android.

Change the icons in iOS and Android module separately. The plugin produces different size icons from the same icon which are distorted.

Follow Build and release an Android app .

Answer 13

Follow these steps:

1. Add dependencies of flutter_launcher_icons in pubspec.yaml file. You can find this plugin from here.

2. Add your required images in assets folder and pubspec.yaml file as below.

pubspec.yaml

name: NewsApi.org
description: A new Flutter application.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
 sdk: ">=2.7.0 <3.0.0"
dependencies:
 flutter:
 sdk: flutter
 # The following adds the Cupertino Icons font to your application.
 # Use with the CupertinoIcons class for iOS style icons.
 cupertino_icons: ^1.0.1
 fluttertoast: ^7.1.6
 toast: ^0.1.5
 flutter_launcher_icons: ^0.8.0
dev_dependencies:
 flutter_test:
 sdk: flutter
flutter_icons:
 image_path: "assets/icon/newsicon.png"
 android: true
 ios: false
# The following section is specific to Flutter.
flutter:
 # The following line ensures that the Material Icons font is
 # included with your application, so that you can use the icons in
 # the material Icons class.
 uses-material-design: true
 assets:
 - assets/images/dropbox.png
 fonts:
 - family: LangerReguler
 fonts:
 - asset: assets/langer_reguler.ttf
 # fonts:
 # - family: Schyler
 # fonts:
 # - asset: fonts/Schyler-Regular.ttf
 # - asset: fonts/Schyler-Italic.ttf
 # style: italic
 # - family: Trajan Pro
 # fonts:
 # - asset: fonts/TrajanPro.ttf
 # - asset: fonts/TrajanPro_Bold.ttf
 # weight: 700
 #
 # For details regarding fonts from package dependencies,
 # see https://flutter.dev/custom-fonts/#from-packages

3. Then run this command in the terminal: flutter pub get. And then flutter_launcher_icon. This is what I get as the result after successfully running the command. And launcher icon is also generated successfully.

My terminal (Windows)

cd E:\AndroidStudioProjects\FlutterProject\NewsFlutter\news_flutter
flutter pub get

Output:

Running "flutter pub get" in news_flutter... 881ms

And:

cd E:\AndroidStudioProjects\FlutterProject\NewsFlutter\news_flutter
flutter pub run flutter_launcher_icons:main

Output:

 ════════════════════════════════════════════
 FLUTTER LAUNCHER ICONS (v0.8.0)
 ════════════════════════════════════════════
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
✓ Successfully generated launcher icons

Answer 14

I use a few methods for changing Flutter application launcher icon, but only the manual method is a bit easy and good. Because you will know how it works.

So to change the Flutter iOS icon, first get a copy of your icon in ×ばつ1024 pixels and generate a set of icons for Android and iOS using the easyappicon generator.

When you get the ZIP file, it works by creating two folders, ios and android. Open the iOS folder and copy the folder and replace the one in your ios/runner directory.

For Android, copy all folders present in the android folder and replace the ones present in the android/app/src/main/res/drawable folder here.

After replacing the folders in both the ios and android folders, stop the application, and rerun it. Your icons will be changed.

Answer 15

STEP 1: Install the Flutter Launcher Icons Package

dev_dependencies:
 flutter_launcher_icons: ^0.13.1

STEP 2: Run flutter pub get in your terminal to fetch the package

STEP 3: Once the package is installed, you need to configure it by adding the following lines to your pubspec.yaml file:

dev_dependencies:
 flutter_launcher_icons: ^0.13.1
flutter_launcher_icons:
 android: "ic_launcher"
 image_path: "assets/app_icon.png"

STEP 4: Run the Flutter Launcher Icons Command in Terminal:

flutter pub run flutter_launcher_icons:main

STEP 4: Rerun the project

Answer 16

2025 IOS Update

The official Apple docs now say this:

You can let the system automatically scale down your 1024x1024 px app icon to produce all other sizes

To do this, navigate to the Assets section under Runner/Runner in XCode and press the "+" icon. Select IOS and then IOS App Icon. This will add an "AppIcon" asset to the project. You can drag a file from your finder onto one of the slots to update the launcher icon.

Update iOS App icon

I use the method suggested in this answer for my Android icons

Answer 17

• Go to appicon.co (App Icon Generator)
• Drag and drop the app icon image which we want to be the app’s icon.
• Add file name => ic_launcher and click generate
• A file named AppIcons.zip gets downloaded.
• Extract it and we will get two folders: android and Assets.xcassets.
• Now replace the respective files from respective folders from the project:
  1. for Android, Go to android>app>src>main>res> and replace files from android folder which we have extracted.
  2. for iOS, Go to ios>Runner> and replace the Assets.xcassets folder with the extracted one.
• So, In this way, we can add app icons to our flutter android & ios application.

Answer 18

I've just published a tool that replaces all icons in a Flutter project, preserving names and formats for both iOS and Android.

Flutter Icon Changer

1. Load your png icon
2. Select Flutter project folder
3. Hit Replace

It's in beta so any feedback will be much appreciated.

Answer 19

-- first go to: https://www.appicon.co/. this website and generate your app logo.

-- after that, you got a two folders, one android and second IOS.

-- after that, you can go this folder directory:

android -> app -> src -> main -> res

Then after, you can replace all folders to the generated new logo folder. After that, it can been changed in the android app.

-- after that, you can go this folder directory:

IOS -> runner

And replace <Assets.xcassets> this folder to generated new logo folder. After that, it can been changed in the IOS app.

-- then after, if you need change the native screen image, so follow this step.

First go to the IOS folder and press right class and open your project in Xcode.

-- after that, you can go in the runner folder and move to the assets image folder.

-- after that, you can see the 1x, 2x and 3x images.

-- you can change it, the new image according to the 1x, 2x and 3x images.

-- after that, you got a successfully changed logo in both add with native screen.