App-Icons in Flutter erstellen und einrichten

App-Icons in Flutter erstellen

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.

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:

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:

Das Paket flutter_launcher_icons einbinden
Eine PNG-Grafik mit 1024 × 1024 px vorbereiten
In der pubspec.yaml konfigurieren
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 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?

Bis zum nächsten Artikel! 🚀

App-Icons in Flutter erstellen und einrichten