How to change the application launcher icon on Flutter?

Question

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

If I want to change the app 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?.

you can update appicon with two way, i have mention both way check [here](https://stackoverflow.com/a/62401560/8265484) — Mayur Dabhi, Jun 16 '20 at 05:38
[Here](https://medium.com/flutter-community/change-flutter-app-launcher-icon-59c31bcd7554)'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. — RobertoAllende, Jun 28 '22 at 04:37

score 557 · Accepted Answer · edited Aug 21 '23 at 17:13

557

Flutter Launcher Icons has been designed to help quickly generate launcher icons for both Android and iOS: https://pub.dartlang.org/packages/flutter_launcher_icons

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.

Update: 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.

Update 2: 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.

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

edited Aug 21 '23 at 17:13

jsotola

2,238
1
10
22

answered Dec 05 '17 at 11:41

Mark O'Sullivan

10,138
6
39
60

6

Is there any requirement for the image? – camino Aug 21 '18 at 00:32
3

Do you have a recommended image size for the `image_path` image? – Suragch Jan 24 '19 at 21:52
I wouldn't be able to say with confidence which is the best @Suragch. In my tests I've always used 3 different sizes. You can find these within the test directory of the GitHub project page: https://github.com/fluttercommunity/flutter_launcher_icons/tree/master/test – Mark O'Sullivan Jan 25 '19 at 14:08
3

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. – Suragch Jan 25 '19 at 17:16
3

@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: https://github.com/fluttercommunity/flutter_launcher_icons/tree/master/example/assets/images – Mark O'Sullivan Jan 25 '19 at 23:57
@MarkO'Sullivan, I haven't looked deeply into how your package resizes the images, so correct me if I'm wrong, but I would think that 128x128 would not be a desirable size. Is there a use case for it (outside of testing)? Wouldn't it require upscaling for the some of the larger image requirements of Android and iOS? Anyway, 1024x1024 sounds reasonable and I'll go with that. – Suragch Jan 26 '19 at 01:26
Yep I've always noticed better performance with 1024x1024 out of all the example assets – Mark O'Sullivan Oct 10 '19 at 09:23
25

Can I suggest that the packages read.me should provide recommendations on images sizes. – Brett Sutton Nov 09 '19 at 07:18
@Brett Sutton, you are wrong. The read.me does not contain any size recommendations. https://github.com/fluttercommunity/flutter_launcher_icons – genericUser Aug 16 '22 at 13:20
I find `flutter pub add -d flutter_launcher_icons` easier for adding the package to the project. – Chuck Batson Sep 20 '22 at 17:45
Always try to add natively first specially for app icons and splash screens, below answer is the good fit – test Feb 17 '23 at 08:44

Suragch · Answer 2 · 2021-02-02T01:54:57.117

465

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.

(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. You don't even have to leave your Flutter project. (VS 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.)

Right click on the android folder in the project outline. Go to New > Image Asset. (Try right clicking the android/app folder if you don't see Image Asset as an option. Also see the comments below for more suggestions.) 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 that 512x512. If you are using Gimp or Inkscape, you should 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.

(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.

After that right-click 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, Icon-App-29x29@3x.png would be 29 times 3, that is, 87 pixels square. You either need to keep the same icon names or edit the JSON file.

edited Feb 02 '21 at 01:54

answered Mar 07 '19 at 23:12

Suragch

484,302
314
1,365
1,393

1

if you were struggling to understand it, I'm happy to reply to any questions you have. Open an issue and I'll get back to you about it: https://github.com/fluttercommunity/flutter_launcher_icons – Mark O'Sullivan Apr 12 '19 at 15:11
5

@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. – Suragch Apr 12 '19 at 21:22
27

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. – MwamiTovi Jan 02 '20 at 05:26
17

@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. – Daniel Feb 06 '20 at 14:25
4

I can't found New>Image Asset option after right clicking on both android and android/app folder on latest version of android studio. – mrb Mar 18 '20 at 12:43
1

Thank you so much! This solution actually did the trick for Android. For whatever reason, the icons generated flutter_launcher_icons were showing small in the launcher, not covering the whole thing. Maybe I missed something, but it appears as straight forward as other have mentioned, yet it didn't work. Using Android Studio worked perfectly! Thank you! – davidcv5 Aug 21 '20 at 02:33
In the Asset Studio window I have an error saying: Project must be built with SDK 26 or later to use adaptive icons. The error prevents me for saving the icon. any approach for that? – Taba Sep 03 '20 at 09:01
1

@Taba Try opening the just `android` folder of your Flutter project using Android Studio. https://stackoverflow.com/questions/50778020/can-i-use-android-8-0-adaptive-icons-for-a-flutter-app – Suragch Sep 03 '20 at 11:25
11

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: https://github.com/flutter/flutter-intellij/issues/3512#issuecomment-516252436) – Derence Feb 02 '21 at 01:50
ios should be labelled "ios and macos" – Fuad Reza Aug 11 '22 at 08:07
For me for some reason, the gradle didn't work (currently on arctic fox) and it prompted me to download the latest android studio (electric-eel) after that it seems to work – Dean Villamia Mar 16 '23 at 08:23

score 300 · Answer 3 · edited Nov 18 '21 at 10:08

300

Follow simple steps:

1. Add flutter_launcher_icons Plugin to 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

Update:

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.

edited Nov 18 '21 at 10:08

Dharman

30,962
25
85
135

answered Oct 16 '18 at 07:21

Rahul Mahadik

11,668
6
41
54

9

This worked for me; only once I'd run that last line `flutter pub pub run flutter_launcher_icons:main`. Thanks for the tip! – olisteadman Feb 12 '19 at 15:24
5

I get errors android.dart:164:25: Error: Too many positional arguments: 1 allowed, but 4 found. – ir2pid Jun 08 '19 at 14:04
1

I can switch icon if darkmode is activated? – Maximiliano Sosa Feb 26 '20 at 21:30
3

@ir2pid to solve error you need to update version as flutter_launcher_icons: 0.7.5 – Gökçer Gökdal Jul 04 '20 at 17:17
2

Just a curious question: why `pub pub` instead of `pub`? – ch271828n Jul 17 '20 at 03:40
@ch271828n Updated answer. Thanks for the informing. Previously it's as per flutter documentation. – Rahul Mahadik Jul 17 '20 at 05:48
make sure your icon size is 1024x1024, or it may give error when you upload to TestFlight – Taha Ali Aug 05 '20 at 11:42
I'm hitting The pubspec.lock file has changed since the .dart_tool/package_config.json file was generated, please run "pub get" again. any help? – Bugzilla Oct 02 '21 at 20:48
I'm getting `FormatException: Invalid number (at character 1)` even if I added `flutter_launcher_icons: 0.9.2` explicitly in the pubspec it's still says: `FLUTTER LAUNCHER ICONS (v0.9.1)` what can I do ? – marcobazzani Dec 18 '21 at 11:30
Make sure you clean your cache and restart. Sometimes, you may need to restart the the project, uninstall that app, or restart the emulator – zizutg Feb 09 '22 at 08:19
after i succeed , removing the plug in will be fine ? – John vinith Jun 14 '22 at 04:35

score 48 · Answer 4 · answered Nov 26 '19 at 05:33

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 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 terminal and execute this command:

flutter pub get

4) After executing the command then enter below command:

flutter pub run flutter_launcher_icons:main

5) Done

N.B: (of course add an updated dependency from

https://pub.dev/packages/flutter_launcher_icons#-installing-tab-

)

score 45 · Answer 5 · answered May 12 '17 at 18:18

45

You have to replace the Flutter icon files with images of your own. This site will help you turn your png into launcher icons of various sizes:

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

answered May 12 '17 at 18:18

Collin Jackson

110,240
31
221
152

2

Your link only produces the correct sizes for Android icons – Mark O'Sullivan Jan 04 '18 at 12:12

score 45 · Answer 6 · edited Feb 27 '20 at 10:58

45

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(dont change the file name)

Step-3: Extract the Downloaded Zip File In the respective folder

android/app/src/main/res

edited Feb 27 '20 at 10:58

Mahesh Jamdade

17,235
8
110
131

answered May 29 '19 at 19:56

Nitish Patel

679
6
16

5

this suggestion will not help in IOS – evals Oct 26 '19 at 08:56
2

works for ios too using xcode to add the xassets – Kisakyamukama Jul 02 '21 at 11:06
1

please how do we do this for ios – Afolayan Ademola Jul 19 '22 at 19:52

score 25 · Answer 7 · edited Oct 09 '20 at 08:37

Best & Recommended way to set App Icon in Flutter.

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

Add this plugin in pubspec.yaml file in project root directory. Please check 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 on terminal.

Create a folder assets in the root of the project in folder assets also create a folder icon and place your app icon inside this folder. I will recommend to user 1024x1024 app icon size. I have placed app icon inside icon folder and now I have app icon path as assets/icon/icon.png
Now, in pubspec.yaml add the below code,

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

Save the file and run flutter pub get on terminal. After running command run second command as below

flutter pub run flutter_launcher_icons:main -f pubspec.yaml

Then Run App

Although you answered the same old correct answer, at least you highlighted the main points of that. — Felipe Augusto, Oct 20 '19 at 16:47
it appears me error adding flutter_launcher_icons I suggest you replace it by flutter_launcher_icons: "^0.11.0" — fsalazar_sch, Jan 21 '23 at 22:04

score 22 · Answer 8 · answered Apr 17 '21 at 11:01

22

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

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)
For android: Go inside android\app\src\main\res in your flutter app and there paste the android folder content.
For IOS: Go inside ios\Runner in your flutter app and there paste the Assets.xcassets content
Restart your emulator or rebuild your application

answered Apr 17 '21 at 11:01

Rohan

640
7
11

4

why using plugins when it is native ;) – cwhisperer Dec 07 '21 at 12:55
3

No, I am not talking about plugins I am sharing the link to generate icons later we will use it in our native code. – Rohan Dec 08 '21 at 05:55
1

I did this but My icon just looks like a square and doesn't fill the round circle. Any tips? – Ten Digit Grid Apr 01 '22 at 00:02
2

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 – Rohan Apr 01 '22 at 13:19

score 13 · Answer 9 · answered Dec 07 '22 at 08:38

Without any packages

Android

Create an adaptive launcher icon in your Flutter project's root directory using the Android Asset Studio.
Add the generated launcher icon files to the project's android/app/src/main/res/mipmap-*/ directories.
Edit the android/app/src/main/AndroidManifest.xml file and add the following line below the tag:

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

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

iOS

Create an Adaptive App Icon in your Flutter project's root directory using the App Icon Generator.
Add the generated app icon files to the project's ios/Runner/Assets.xcassets/AppIcon.appiconset/ directory.
Edit the ios/Runner/Info.plist file and add the following line below the tag:

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

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

Anand · Answer 10 · 2023-05-20T04:28:10.313

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 min sdk min:16, default 21
  # optionally, as transparency is not allowed on app store
  # remove_alpha_ios: true

after adding this run the below command

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

score 9 · Answer 11 · answered May 12 '22 at 15:10

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

You can use the package icons_launcher instead though.

Update the pubspec.yaml

dev_dependencies:
  icons_launcher: ^1.1.7

flutter_icons:
  image_path: 'assets/ic_logo_border.png'
  ios: true
  android: true

Run the package

flutter pub get
flutter pub run icons_launcher:main

score 6 · Answer 12 · answered Mar 01 '19 at 08:14

Best way is to change 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 this link: https://flutter.dev/docs/deployment/android

score 5 · Answer 13 · answered Dec 31 '20 at 10:20

Follow these steps:-

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

2. Add your required images in asstes 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 the command in terminal flutter pub get and then flutter_luncher_icon.This is what I get the result after the successfully run the command . And luncher icon is also generated successfully.

My Terminal

[E:\AndroidStudioProjects\FlutterProject\NewsFlutter\news_flutter>flutter pub get
Running "flutter pub get" in news_flutter...                       881ms

E:\AndroidStudioProjects\FlutterProject\NewsFlutter\news_flutter>flutter pub run flutter_launcher_icons:main
  ════════════════════════════════════════════
     FLUTTER LAUNCHER ICONS (v0.8.0)
  ════════════════════════════════════════════

• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon

✓ Successfully generated launcher icons

Zakria Khan · Answer 14 · 2022-09-15T09:34:41.563

I use few methods for chaging flutter app lancher icon but only the manuall method is a bit easy and good. Because you will know how it work.

So to change flutter ios icon. First get copy of your icon 1024×1024 pixel and generate set of icons for android and ios using appicon.co generator. When you get zip file it work create two folder ios and android open ios folder and copy folder and replace the one in your ios/runner directory.

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

After replacing folder on both ios and android stop the app and re run and your icons will be changed.

How to change the application launcher icon on Flutter?

14 Answers14

Setting the launcher icons like a native developer

Android

iOS

If you don't have a Mac...

Linked