Creating and Setting Up App Icons in Flutter

Before publishing your app to the stores, there's one essential thing you must do: Add a beautiful icon! Publishing with the default Flutter icon... doesn't look very professional, honestly.

At first, I thought "How hard can it be?" Then I saw that Android needs 5 different sizes and iOS needs 10 different sizes, and I got a bit scared. But turns out it's super easy!

Platform-Specific Icon Sizes

Each platform comes with its own rules, of course. Android and iOS require different sizes.

Android Icon Sizes

Android uses different sizes for various screen densities:

• mdpi: 48x48 px
• hdpi: 72x72 px
• xhdpi: 96x96 px
• xxhdpi: 144x144 px
• xxxhdpi: 192x192 px

For the Play Store, a minimum of 512x512 px is required.

iOS Icon Sizes

iOS is even more detailed:

• 20x20 (2x, 3x)
• 29x29 (2x, 3x)
• 40x40 (2x, 3x)
• 60x60 (2x, 3x)
• 76x76 (2x)
• 83.5x83.5 (2x)
• 1024x1024 (for App Store)

For the App Store, 1024x1024 px is mandatory.

The Easy Way: flutter_launcher_icons Package

Creating all these sizes manually is very tedious. Thank goodness we have the flutter_launcher_icons package!

1. Add the Package

Open your pubspec.yaml file and add it to dev_dependencies:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

2. Icon Configuration

Add the icon settings to the same file:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

This uses the same icon for both Android and iOS.

3. Prepare Your Icon Image

Create an assets/icon/ folder in your project and place your icon image there. Unlike the images in the adding images post, you don't need to list this file under flutter: assets:; the package only reads it while generating the icons.

Important:

• Minimum size: 1024x1024 px (ideal for both platforms)
• Format: PNG (can have transparent background)
• Must be square: Aspect ratio 1:1

Why so big? Because the package will automatically create all sizes by scaling down this image. Creating large sizes from a small image causes quality loss, but going from large to small is fine.

4. Generate the Icons

Run this command in the terminal:

flutter pub get
flutter pub run flutter_launcher_icons:main

Or simply:

flutter pub run flutter_launcher_icons

When the command runs, you'll see output like:

Creating default icons Android
Creating default icons iOS
Overwriting default iOS launcher icon with new icon

Congratulations! Your icon is now set up on both platforms.

Different Icons for Each Platform

Sometimes you want different icons for Android and iOS. For example, iOS prefers rounded corners, while Android looks better with square.

flutter_launcher_icons:
  android: true
  ios: true
  image_path_android: "assets/icon/android_icon.png"
  image_path_ios: "assets/icon/ios_icon.png"

Adaptive Icon (Android)

For Android 8.0 (API 26) and above, you can use adaptive icons:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"
  
  # For adaptive icon
  adaptive_icon_background: "assets/icon/background.png"
  adaptive_icon_foreground: "assets/icon/foreground.png"

Adaptive icons can appear in different shapes on different launchers (Nova, OneUI, Pixel).

Tip: Use transparent PNG for foreground, solid color or pattern for background.

Manual Setup (If Needed)

If you don't want to use the package, you can do it manually (but I don't recommend it).

Android Manual Setup

Place icons in this folder structure:

android/app/src/main/res/
  ├── mipmap-mdpi/ic_launcher.png (48x48)
  ├── mipmap-hdpi/ic_launcher.png (72x72)
  ├── mipmap-xhdpi/ic_launcher.png (96x96)
  ├── mipmap-xxhdpi/ic_launcher.png (144x144)
  └── mipmap-xxxhdpi/ic_launcher.png (192x192)

In AndroidManifest.xml:

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

iOS Manual Setup

In Xcode, add icons to ios/Runner/Assets.xcassets/AppIcon.appiconset/ folder.

You also need to update the Contents.json file. It's complicated, not worth it!

Practical Tips

1. Icon Design Rules

• Keep it simple: Complex details disappear at small sizes
• Bold colors: Eye-catching, high-contrast colors
• No text: Unreadable at very small sizes
• Center your design: Edges may be cropped on some launchers

2. Test It

Always test after adding icons:

# Android
flutter run

# iOS
flutter run -d ios

Completely uninstall and reinstall the app. Sometimes the old icon shows due to cache.

3. Transparent PNG or Solid?

• Android: You can use transparent background (with adaptive icon)
• iOS: You can use transparent but Apple recommends solid

4. Icon Generator Tools

For manual resizing:

• AppIcon.co
• IconKitchen
• MakeAppIcon

Upload a 1024x1024 image to these sites and download all sizes ready to use.

Full pubspec.yaml Example

name: my_awesome_app
description: An amazing Flutter app

flutter:
  uses-material-design: true
  
  assets:
    - assets/icon/

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"
  
  # Custom settings (optional)
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/foreground.png"
  
  # Platform-specific
  # image_path_android: "assets/icon/android.png"
  # image_path_ios: "assets/icon/ios.png"
  
  # For specific platforms only
  # android: "launcher_icon"
  # ios: true

Common Issues

"Icon didn't change"

Solution:

flutter clean
flutter pub get
flutter pub run flutter_launcher_icons
flutter run

"Icon looks square on iOS"

iOS automatically rounds the corners. Don't worry about it.

"Adaptive icon not working"

Adaptive icons don't work on Android versions below 8.0. The normal icon will show.

Summary

Adding an icon in Flutter:

1. Add the flutter_launcher_icons package
2. Prepare a 1024x1024 px PNG image
3. Configure in pubspec.yaml
4. Run flutter pub run flutter_launcher_icons

Key Points:

• Android minimum: 512x512 px (recommended 1024x1024)
• iOS minimum: 1024x1024 px
• You can use the same image for both platforms
• Use large size image (scaling down is quality-preserving, scaling up is not)
• Adaptive icon provides modern appearance for Android 8.0+

Seeing your own icon in your first app is a really nice feeling. Now it truly feels like "my" app!

---

Need help with your app development?

• WhatsApp: +90 546 400 56 58
• Flutter Course - Sorbil
• My Superprof Profile

See you in the next article! 🚀

Frequently Asked Questions

Do I also have to add the image_path file to the assets section of pubspec?

No. flutter_launcher_icons only reads that file while the command runs and writes the result into the platform folders under android/ and ios/. If you add it to the assets: list, the 1024-pixel image ends up in the app bundle for no reason.

Can I use dart run instead of flutter pub run?

Yes. In current Flutter versions flutter pub run is on its way to being deprecated; dart run flutter_launcher_icons does the same job and is the recommended form.

How much of the foreground image should the logo cover in an adaptive icon?

An Android adaptive icon is drawn on a 108 dp canvas, but launchers only guarantee to show the central safe zone, a circle 66 dp in diameter. Keep your logo in the center of the foreground PNG, within roughly two thirds of the area; anything reaching the edges gets cropped on some devices.