Flutter Example – Change App Launcher Icon & Name (Android & iOS)

Authored by Nilesh Payghan, a seasoned Flutter developer with 5 years of experience, this concise tutorial is your step-by-step guide to personalizing your Flutter application. It covers changing your app’s name and icon for both Android and iOS platforms.

Change Launcher Name

Android

  • Locate AndroidManifest.xml.
  • Find the <application> tag.
  • Alter android:label to your desired name.

Path: android/app/src/main/AndroidManifest.xml

<application
          android:name="io.flutter.app.FlutterApplication"
          android:label="Woolha App"
          android:icon="@mipmap/launcher_icon">
Flutter Tutorial - Change App Launcher Icon & Name (Android & iOS)

iOS

  • Open Info.plist.
  • Look for CFBundleName key.
  • Change the value inside the <string> tag.

Path: ios/Runner/Info.plist

  <key>CFBundleName</key>
  <string>Woolha App</string>

Change Launcher Icon

There are several methods to update your app launcher icon.

Join Our Whatsapp Group

Join Telegram group

Using flutter_launcher_icons.yaml

This is the simplest way. Add this tool to your pubspec.yaml file.

  dependencies:
    flutter_launcher_icons: ^0.7.2
  flutter_icons:
    android: true
    ios: true
    image_path: "assets/images/favicon.avif"

Configure as needed, then run flutter pub get. Next, execute flutter pub run flutter_launcher_icons:main. If using a different config file, add -f {file name}.

Using Android Studio’s Asset Studio

For Android, right-click the android folder. Select New > Image Asset. Customize your icon with this feature. It supports various icon types and sizes.

Manually Setting the Icon

Android

Navigate to android/app/src/main/res. Replace launcher_icon.png in mipmap-* folders for custom icons.

iOS

Go to ios/Runner/Assets.xcassets/AppIcon.appiconset. Use the Contents.json for icon sizes and replace files accordingly.

This guide aims to simplify your Flutter app customization. For more detailed instructions or support, consider consulting the official Flutter documentation or engaging with the Flutter developer community.

Join Our Whatsapp Group

Join Telegram group

FAQs on Flutter App Customization

How Do I Change My Flutter App’s Name on Android?

  • First, open AndroidManifest.xml.
  • Then, locate the <application> tag.
  • Finally, modify android:label with the name you prefer.

How Can I Update My Flutter App’s Name on iOS?

  • Begin by accessing Info.plist.
  • Search for the CFBundleName key.
  • Change the value within the <string> tag to your chosen name.

What’s the Easiest Way to Update My App’s Launcher Icon?

  • The simplest method involves using flutter_launcher_icons.yaml.
  • Add the tool to your project’s pubspec.yaml.
  • Run flutter pub get, then flutter pub run flutter_launcher_icons:main.

Join Our Whatsapp Group

Join Telegram group

Can I Customize My App Icon in Android Studio?

  • Yes, Android Studio offers an Image Asset feature.
  • Right-click the android folder, choose New > Image Asset.
  • Customize your icon through the various options provided.

How Do I Manually Change the Launcher Icon for Android?

  • Go to the android/app/src/main/res directory.
  • Find folders named mipmap-* and replace the launcher_icon.png file in each.

What Steps Are Involved in Manually Changing the iOS Launcher Icon?

  • Navigate to ios/Runner/Assets.xcassets/AppIcon.appiconset.
  • Refer to Contents.json for icon specifications and replace the files as needed.

For more in-depth guidance on Flutter app customization, consult the official Flutter documentation or reach out to the Flutter developer community.

7 thoughts on “Flutter Example – Change App Launcher Icon & Name (Android & iOS)”

Leave a Reply

Unlocking Potential with Apple Vision Pro Labs Navigating 2023’s Top Mobile App Development Platforms Flutter 3.16: Revolutionizing App Development 6 Popular iOS App Development Languages in 2023 Introducing Workflow Apps: Your Flutter App Development Partner