How to change the App Icon & Name in Flutter (iOS + Android)

Published in

Flutter Community

4 min readJul 21, 2020

I am going to be explaining how you can change your app name and icon of a Flutter application on both platforms, iOS and Android.

Change App Launcher Name On Android

First of all, we will change the android app launcher name. By default the app launcher name is what you put when you create the project with:

flutter create <project-name>

To change the name on Android, you will need to change it in AndroidManifest.xml, to find this file go to:

android/app/src/main/AndroidManifest.xml

Then change “android:label”, as shown below:

<applicationandroid:name=”io.flutter.app.FlutterApplication”android:label=”Your App Name Here”android:icon=”@mipmap/launcher_icon”>

Change App Launcher Name On iOS

For iOS, you need to locate the Info.plist file, the file can be found at the directory below:

ios/Runner/Info.plist

In the Info.plist file you will want to find the “CFBundleName” key and change the string below it as follows:

<key>CFBundleName</key><string>Your App Name Here</string>

Changing App Launcher Icon

There are a few ways you can change the app launcher icon; I will go over what I use for my own apps and then the other options.

Using the flutter_launcher_icons package

The way I change my app icons is using this package, to find the latest version go here, then put it in your pubspec.yaml file as follows:

dependencies:
  flutter_launcher_icons: "^0.7.5"

Then you can add another section in your pubspec.yaml file like this:

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

There are a few options when it comes to the flutter_icons configuration; I will go through them below:

android/ios

true: Override the default existing Flutter launcher icon for the platform specified
false: Ignore making launcher icons for this platform
icon/path/here.png: This will generate a new launcher icon for the platform with the name you specify, without removing the old default existing Flutter launcher icon.
image_path: The location of the icon image file which you want to use as the app launcher icon
image_path_android: The location of the icon image file specific for Android platform (optional - if not defined then the image_path is used)
image_path_ios: The location of the icon image file specific for iOS platform (optional - if not defined then the image_path is used)

Note: iOS icons should fill the entire image and not contain transparent borders.

The next two attributes are only used when generating Android launcher icon

adaptive_icon_background.: The color (E.g. "#ffffff") or image asset (E.g. "assets/images/christmas-background.png") which will be used to fill out the background of the adaptive icon.
adaptive_icon_foreground: The image asset which will be used for the icon foreground of the adaptive icon

Learn more about adaptive icons for Android here.

Make sure the path matches where your icon is, I usually add it to a subfolder in my assets folder.

Once you have set up the configs run:

flutter pub get

Then you should have your custom Flutter App Icons, if you have any issues be sure to check out the package page as linked above.

Using Android Studio Asset Studio

In Android Studio, you can use their built-in functionality for changing Android app icons. If you open your project in Android Studio and right-click the “android” folder, then choose New > Image Asset. When the pop up opens, select Launcher Icons under Icon Type. Here you can change the foreground, background, legacy icon, round icon as well as the Play Store icon, it will then generate icons with different sizes, pretty cool.

Manually Changing The Icon

Finally, if the above options don’t work or you want full control over your icons for more customizability then you can do it all manually.

Android

To change your icon manually on Android, go to:

android/app/src/main/res

Then you should see folders beginning with “mipmap-*” which are folders with al the different pixel densities, you can just replace the launcher_icon.png file in each folder to use custom icons.

iOS

On iOS the icon configuration and files are found within:

ios/Runner/Assets.xcassets/AppIcon.appiconset

The Contents.json file shows a list of icon images with various sizes; The files are located within the same folder. You should follow Apple’s guideline for designing iOS app icons.

Conclusion

I hope this guide helped you to change the regular Flutter app icon to your new snazzy, cool icon. If you found this helpful, please let me know. I have a newsletter sign up here (no spam, I promise), it will let you know when I publish articles or when I release new products (I am a mobile app and SaaS developer). Check out my personal blog here.

Thank you for reading ❤