3 min read

When you create a Flutter app, by default the launcher icon is created with the Flutter logo. When releasing your app to the public, you must replace the Flutter logo with your own designed icon. So in this tutorial, we’ll learn how to change launcher icon in Flutter.

Here’s what we’ll cover:

What is an Application Launcher Icon

The Application launcher icon is an icon that represents your application. Every phone has a launcher app. When you open it, it shows the launcher icons for all the installed apps. The launcher icon acts as an entry point to your app and helps you promote your brand.

Here’s how it looks:

what is application launcher icon

Creating an Icon

If you are running out of time or don’t have a budget to hire a designer to create a launcher icon for your app, you can create one on your own using the free online tool.

If you already have the launcher icon created, you can skip to the next section. 

Here are the steps to create:

Step 1: Open this free online tool.

Step 2: Under the Clipart section, select any icon.

Step 3: Scroll down and find the Color section. Click on the box below and change the color of the icon.

Step 4: Find the Background color property below and change the background color of the icon.

Step 5: To add the shadow effect, find the Effect property and click on the Cast Shadow tab.

Step 6: Click on the Download button at the top right side of your screen.

Creating launcher icon

Change Application Launcher Icon in Flutter

We are going to change the app icon using a package called flutter_launcher_icons. It’s a recommended approach that does all the heavy lifting of updating the app launcher icons for different platforms. It’s flexible and allows you to set the adaptive icons as well.

Here are the steps to change application launcher icon in Flutter:

Step 1: Inside the pubspec.yaml file, Add the flutter_launcher_icons package under the dev_dependencies (and not under the dependencies)

It should look like this:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: "^0.9.2" //Make sure to use latest version
adding flutter_launcher_icons

Step 2: Create a folder called asset in the root directory. Inside the asset folder create one more folder called icons and place your launcher icon inside.

Hint: It’s recommended to use a higher resolution image, for example, the image of 1024*1024.

creating asset folder

Step 3: Add flutter_icons inside the pubspec.yaml to reference the new launcher icon.

Hint: Make sure to add it at the same indent level of dev_dependencies.

It should look like this:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: "^0.9.2"
flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "asset/icons/pet.png"
  • Setting the ios: true will update the app icon for the ios app as well.
  • Replace the pet.png with the name of your icon.
adding flutter_icons

Step 4: Run the package using the following command.

flutter pub get

and then…

flutter pub run flutter_launcher_icons:main
running package

Step 5: Run the app and verify the new launcher icon updated in the launcher app for both Android and iOS. 

Hint: If you still see the old icon, completely stop the app and re-run.

change application launcher icon in flutter

That’s it. I hope you find this article useful 🙂

Conclusion

In this tutorial, we learned what is an application launcher icon, how to create one and change application launcher icon in Flutter.

Also read,