App-Icons in Flutter erstellen und einrichten

Bevor Sie Ihre App in den Stores veröffentlichen, gibt es eine unverzichtbare Aufgabe: ein schönes Icon hinzufügen! Mit dem Standard-Flutter-Icon zu veröffentlichen wirkt ehrlich gesagt wenig professionell.

Anfangs dachte ich: „Wie schwer kann das schon sein?“ Dann sah ich, dass Android 5 und iOS 10 verschiedene Größen braucht, und war kurz eingeschüchtert. Es ist aber kinderleicht!

Icon-Größen je Plattform

Jede Plattform bringt natürlich eigene Regeln mit. Android und iOS verlangen unterschiedliche Größen.

Icon-Größen für Android

Android verwendet für die verschiedenen Bildschirmdichten unterschiedliche Größen:

• mdpi: 48 × 48 px
• hdpi: 72 × 72 px
• xhdpi: 96 × 96 px
• xxhdpi: 144 × 144 px
• xxxhdpi: 192 × 192 px

Für den Play Store sind mindestens 512 × 512 px erforderlich.

Icon-Größen für iOS

Bei iOS wird es noch kleinteiliger:

• 20 × 20 (2x, 3x)
• 29 × 29 (2x, 3x)
• 40 × 40 (2x, 3x)
• 60 × 60 (2x, 3x)
• 76 × 76 (2x)
• 83,5 × 83,5 (2x)
• 1024 × 1024 (für den App Store)

Für den App Store sind 1024 × 1024 px Pflicht.

Der einfache Weg: das Paket flutter_launcher_icons

All diese Größen von Hand zu erzeugen ist sehr mühsam. Zum Glück gibt es das Paket flutter_launcher_icons!

1. Das Paket hinzufügen

Öffnen Sie Ihre pubspec.yaml und ergänzen Sie es unter dev_dependencies:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

2. Icon konfigurieren

Fügen Sie die Icon-Einstellungen in dieselbe Datei ein:

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

Damit wird für Android und iOS dasselbe Icon verwendet.

3. Die Icon-Grafik vorbereiten

Legen Sie im Projekt einen Ordner assets/icon/ an und speichern Sie dort Ihre Icon-Grafik. Anders als die Bilder im Beitrag zum Einbinden von Bildern müssen Sie diese Datei nicht unter flutter: assets: eintragen; das Paket liest sie nur beim Erzeugen der Icons.

Wichtig:

• Mindestgröße: 1024 × 1024 px (ideal für beide Plattformen)
• Format: PNG (transparenter Hintergrund möglich)
• Quadratisch: Seitenverhältnis 1:1

Warum so groß? Weil das Paket alle Größen automatisch durch Verkleinern dieser Grafik erzeugt. Aus einem kleinen Bild große Größen zu erzeugen führt zu Qualitätsverlust; von groß nach klein ist unproblematisch.

4. Die Icons erzeugen

Führen Sie diesen Befehl im Terminal aus:

flutter pub get
flutter pub run flutter_launcher_icons:main

Oder kürzer:

flutter pub run flutter_launcher_icons

Beim Ausführen sehen Sie eine Ausgabe wie diese:

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

Herzlichen Glückwunsch! Ihr Icon ist jetzt auf beiden Plattformen eingerichtet.

Unterschiedliche Icons je Plattform

Manchmal möchten Sie für Android und iOS verschiedene Icons. iOS bevorzugt zum Beispiel abgerundete Ecken, während Android mit eckigen Formen besser aussieht.

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)

Ab Android 8.0 (API 26) können Sie adaptive Icons verwenden:

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 können auf verschiedenen Launchern (Nova, OneUI, Pixel) in unterschiedlichen Formen erscheinen.

Tipp: Verwenden Sie für den Vordergrund ein transparentes PNG und für den Hintergrund eine Volltonfarbe oder ein Muster.

Manuelle Einrichtung (falls nötig)

Wenn Sie das Paket nicht nutzen möchten, geht es auch von Hand (ich rate allerdings davon ab).

Manuelle Einrichtung für Android

Legen Sie die Icons in dieser Ordnerstruktur ab:

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 der AndroidManifest.xml:

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

Manuelle Einrichtung für iOS

Fügen Sie die Icons in Xcode im Ordner ios/Runner/Assets.xcassets/AppIcon.appiconset/ hinzu.

Außerdem müssen Sie die Datei Contents.json aktualisieren. Das ist umständlich und lohnt sich nicht!

Praktische Tipps

1. Regeln für das Icon-Design

• Halten Sie es einfach: Komplexe Details verschwinden in kleinen Größen
• Kräftige Farben: Auffällige Farben mit hohem Kontrast
• Kein Text: In sehr kleinen Größen unlesbar
• Zentrieren Sie das Motiv: Auf manchen Launchern werden Ränder beschnitten

2. Testen Sie es

Testen Sie nach dem Hinzufügen der Icons immer:

# Android
flutter run

# iOS
flutter run -d ios

Deinstallieren Sie die App vollständig und installieren Sie sie neu. Manchmal erscheint wegen des Caches noch das alte Icon.

3. Transparentes PNG oder Vollton?

• Android: Transparenter Hintergrund ist möglich (mit adaptivem Icon)
• iOS: Transparenz ist möglich, Apple empfiehlt jedoch Vollton

4. Werkzeuge zur Icon-Erzeugung

Zum manuellen Skalieren:

• AppIcon.co
• IconKitchen
• MakeAppIcon

Laden Sie auf diesen Seiten eine Grafik mit 1024 × 1024 px hoch und laden Sie alle Größen fertig herunter.

Vollständiges Beispiel einer pubspec.yaml

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

Häufige Probleme

„Das Icon hat sich nicht geändert“

Lösung:

flutter clean
flutter pub get
flutter pub run flutter_launcher_icons
flutter run

„Das Icon sieht auf iOS eckig aus“

iOS rundet die Ecken automatisch ab. Darum müssen Sie sich nicht kümmern.

„Das adaptive Icon funktioniert nicht“

Adaptive Icons funktionieren unterhalb von Android 8.0 nicht. Dort wird das normale Icon angezeigt.

Zusammenfassung

Ein Icon in Flutter hinzufügen:

1. Das Paket flutter_launcher_icons einbinden
2. Eine PNG-Grafik mit 1024 × 1024 px vorbereiten
3. In der pubspec.yaml konfigurieren
4. flutter pub run flutter_launcher_icons ausführen

Die wichtigsten Punkte:

• Android mindestens: 512 × 512 px (empfohlen 1024 × 1024)
• iOS mindestens: 1024 × 1024 px
• Für beide Plattformen kann dieselbe Grafik verwendet werden
• Nutzen Sie eine große Vorlage (Verkleinern erhält die Qualität, Vergrößern nicht)
• Das adaptive Icon sorgt ab Android 8.0 für ein modernes Erscheinungsbild

Das eigene Icon zum ersten Mal in der ersten eigenen App zu sehen ist ein wirklich schönes Gefühl. Jetzt fühlt es sich tatsächlich nach „meiner“ App an!

---

Brauchen Sie Unterstützung bei Ihrer App-Entwicklung?

• WhatsApp: +90 546 400 56 58
• Flutter-Kurs – Sorbil
• Mein Superprof-Profil

Bis zum nächsten Artikel! 🚀

Häufig gestellte Fragen

Muss ich die Datei aus image_path auch im Abschnitt assets der pubspec eintragen?

Nein. flutter_launcher_icons liest diese Datei nur, während der Befehl läuft, und schreibt das Ergebnis in die Plattformordner unter android/ und ios/. Tragen Sie sie in die Liste assets: ein, landet die 1024-Pixel-Grafik ohne Grund im App-Paket.

Kann ich dart run statt flutter pub run verwenden?

Ja. In aktuellen Flutter-Versionen wird flutter pub run schrittweise abgekündigt; dart run flutter_launcher_icons erledigt dieselbe Aufgabe und ist die empfohlene Schreibweise.

Wie viel Fläche sollte das Logo im Vordergrundbild eines adaptiven Icons einnehmen?

Ein adaptives Android-Icon wird auf einer Fläche von 108 dp gezeichnet, Launcher garantieren aber nur die Anzeige der mittleren sicheren Zone, eines Kreises mit 66 dp Durchmesser. Halten Sie Ihr Logo in der Mitte des Vordergrund-PNGs innerhalb von etwa zwei Dritteln der Fläche; was bis an den Rand reicht, wird auf manchen Geräten beschnitten.