How to change the Launcher Icon in Flutter

Are you about to push your application to Google Play or the App Store, and you want to change the launcher icon of your application? Or are you still developing your application and you just want to have a nice launcher icon? In this tutorial, I will show you how to quickly change the launcher icon.

1. Flutter Launcher Icons

The way I will show you is by far the fastest and most convenient way to change your launcher icon. We will be using the Flutter Launcher Icons package. With some simple configurations, this package will make sure that all best practices are followed and change your launcher icon.

1.1 Installing

First of all, let us start by opening our project, for this example, I will create a new Flutter project. You can follow the same steps in your existing project. If you want you can also create a new project to test it out. In that case, open a terminal and execute flutter create launcher_icons_demo to create a new project.

Inside our project, we want to execute the following command to get the Flutter Launcher Icons package: flutter pub add flutter_launcher_icons --dev. Make sure you use the --dev flag at the end because you will not need this in production.

After executing the command you will see that in pubspec.yaml the flutter_launcher_icons package has been added. Make sure that the package is under the dev_dependencies.

1.2 Configuration

Now that we have the package installed let us create a directory where we will save our icon. A common practice is to add a assets directory in the main directory of our project. Inside the assets directory, we can create a icons directory and put our icon inside.

Now that we have our icon we need to set up our configuration inside the pubspec.yaml. In the picture below you can see the different options we can configure.

There are more options available, feel free to check out the options. In this tutorial, we will focus on Mobile and create the following configuration.

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icons/code_onwards_logo.png" 

When working with .yaml files it is very important to pay attention to the indentation. If the indentation is not correct the .yaml file will not work correctly.

Make sure you replace the string in the image_path with your icon. You can also set ios or android to false if you do not want icons for one of them.

You can have one image path for both operating systems as shown in the example configuration above. Or you can choose to have different paths:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  ios: true
  image_path_android: "assets/icons/android_specific_logo.png"
  image_path_ios: "assets/icons/ios_specific_logo.png" 

1.3 Executing the command

Now that we have finished the flutter_launcher_icons configuration we can execute the following command: flutter pub run flutter_launcher_icons to generate the new launcher icons. If you run into trouble you can run flutter pub get first.

After executing the command it is time to start our emulator and run our application. If you already started your application, make sure you restart your application to see the changes.

If you want a fast way to open your emulator make sure to check out the post below.

How to quickly start your Android Emulator

Tired of opening Android Studio every time to just start your emulator? So was I, with that in mind I created a simple script that will start my emulator in a matter of seconds. This script is written for Windows machines, but I am sure that other operating systems have

Code OnwardsTijn van den Eijnde

If you use an Android emulator then you can go to the menu of your emulator by pressing the circle button on the right. After that, you can swipe up on the home screen and you will see your application with the new launcher icon.

Not only the launcher icon changed, but because I still use a default splash screen the icon got changed there as well.

As you might see, I used a low-resolution logo, it will still look good as a launcher icon. But as you can see the changes that were made by the command in the screenshot below also changed large-resolution icons with the icon we provided. So I recommend you use a high-resolution logo.

One of the requirements for Android is an icon that has a resolution of 512px by 512px. For Apple, this seems to be even higher to be specific 1024px by 1024px.

That should be it, I hope you liked this tutorial, and if you are about to launch your application, congratulations!

2. Conclusion

Thanks to the Flutter Launcher Icons package changing your launcher icon is very easy. If you like using the package make sure to like their package on pub.dev and star their GitHub to support their work.