Vor wenigen Tagen wurde iOS 18 veröffentlicht und für App-Publisher und -Agenturen geht das alljährliche Update-Chaos los. In diesem Blogbeitrag möchten wir uns auf eine der neuen Funktionen fokussieren: Die neuen Gestaltungsmöglichkeiten für App-Icons.
Welche Änderungen bei App Icons bringt iOS 18?
Mit iOS 18 erhalten Nutzer großzügigere Möglichkeiten, den Startbildschirm ihres iPhones anzupassen. Dazu gehört unter anderem die farbliche Anpassung der App Icons. Während Apple mit iOS 13 vor fünf Jahren den Dunkelmodus („Dark Mode“) eingeführt hat, haben sich App Icons diesem bislang nicht angepasst. Mit den neuen Anpassungsmöglichkeiten ist es nun jedoch möglich, App Icons in einem dunklen oder gefärbten Farbschema anzeigen zu lassen.
Bei rund zwei Millionen Apps im App Store ist es jedoch gar nicht so einfach, jeden App-Publisher dazu zu bewegen, neue App Icons zu gestalten. Um diesem Problem vorzubeugen, werden die notwendigen Icon-Varianten automatisch vom System generiert. Dies ist jedoch nur möglich, wenn das App Icon einfach genug aufgebaut ist und farblich ein klarer Kontrast zwischen Vordergrund und Hintergrund ersichtlich ist. Ist dies der Fall, generiert das System nach bestem Gewissen automatisch dunkle und farblich getönte Icon-Varianten.
Durch die automatische Generierung der Icon-Varianten laufen Sie jedoch potentiell die Gefahr, die Kontrolle über das Branding Ihrer App zu verlieren – oder die Generierung funktioniert aufgrund eines zu aufwändig gestalteten Icons überhaupt nicht. Die Icon-Varianten lassen sich durch App-Entwickler daher auch anpassen. Entwickler können eine dunkle Variante ihres Icons, sowie eine Vorlage für farblich getönte Icons hinterlegen, welche dann vom Gerät des Nutzers verwendet werden.
Im nachfolgenden Abschnitt zeigen wir Ihnen, wie Sie als Entwickler das Beste aus dieser neuen Funktion für Ihre App herausholen können.
Schritt-für-Schritt-Anleitung, um Ihre App Icons bereit für iOS 18 zu machen
Bevor wir damit anfangen können, unsere App Icons für iOS 18 aufzupeppen, müssen wir sichergehen, dass wir die technischen Voraussetzungen dazu haben. Konkret müssen wir Xcode auf Version 16 aktualisieren. Neue Xcode-Versionen lassen sich über den macOS App Store oder über die Apple Developer Webseite herunterladen. Sobald Xcode aktualisiert wurde, können wir unser Projekt darin öffnen.
Ist Xcode einmal offen, können wir unser App Icon im Asset-Katalog auswählen. Dort angekommen, navigieren Sie zu View > Inspectors > Attributes (oder nutzen den Hotkey CMD + Option + 4) und setzen die Einstellung im Feld „Appearances“ auf „Any, Dark, Tinted“.
Anschließend können Sie die dunklen und getönten App-Icons hinzufügen.
Wie Sie eine in React Native entwickelte App an iOS 18 anpassen
Während wir uns im vorangegangenen Abschnitt hauptsächlich mit nativ entwickelten iOS-Apps befasst haben, werden hybride Apps, insbesondere mit React Native, bei Publishern und Entwicklern immer beliebter. Auch wir als spezialisierte React Native Agentur setzen bei Kunden-Apps inzwischen nahezu ausschließlich auf dieses Framework. Daher möchten wir Ihnen nachfolgend noch einige Tipps geben, wie Sie als Entwickler eine in React Native entwickelte App an die neuen Icon-Varianten in iOS 18 anpassen können.
Bei einem „puren“ React Native Projekt (auch „Bare React Native“ oder „React Native CLI“ genannt) handelt es sich grundsätzlich um die selben Schritte wie für eine native iOS-App. Sie öffnen daher einfach den Xcode-Arbeitsbereich im ios-Ordner Ihres React Native Projekts und nehmen die Änderungen wie im zuvor beschriebenen Abschnitt vor.
Inzwischen wird ein großer Teil an React Native Projekten jedoch mit dem hervorragenden Framework von Expo umgesetzt. Expo abstrahiert den Großteil des nativen Codes weg und generiert die nativen Projektdateien automatisch durch den sogenannten Prebuild-Prozess. Dies hat jedoch zur Folge, dass Sie kein Xcode-Projekt haben, welches Sie anpassen könnten.
Das Team bei Expo arbeitet aktuell daran, die neuen Icon-Varianten von Haus aus über die app.json-Konfigurationsdatei zu unterstützen. Die Funktion dürfte aller Voraussicht nach im nächsten großen SDK-Release, Expo SDK 52, landen.
Bis dahin können Sie sich jedoch mit einem „Config Plugin“ Abhilfe schaffen. Mit einem solchen Plugin können Sie den Prebuild-Prozess anweisen, die notwendigen Änderungen an den nativen iOS-Dateien vorzunehmen.
Leider ist ein solches Config Plugin derzeit nicht in der Open-Source-Gemeinschaft verfügbar. Hinsichtlich dessen, dass der Release von Expo SDK 52 kurz bevor stehen dürfte, wird es in diesem Bereich vermutlich auch keine größeren Anstrengungen geben. Zum Glück können Config Plugins von spezialisierten React Native- bzw. Expo-Entwicklern im Handumdrehen selbst umgesetzt werden.
Perfektionierung Ihrer Icons: Wesentliche Richtlinien für dunkle und getönte Designs
Bevor Sie Ihre Änderungen an Apple zum Review übermitteln, ist es hilfreich, die hierzu von Apple veröffentlichten Guidelines zum Gestalten von dunklen und getönten App Icons zu studieren.
Um Ihnen einen groben Überblick über die sonst recht tiefgreifenden Guidelines zu verschaffen, haben wir Ihnen eine der wichtigsten Punkte hier zusammengefasst:
Als Ausgangspunkt benötigen Sie eine vereinfachte Version Ihres Icons, die auf dessen Hauptmerkmale reduziert wurde. Hierzu müssen Sie einen klaren Kontrast zwischen Vorder- und Hintergrund schaffen.
Das helle Standard-Icon sollte einen hellen oder farbigen Hintergrund haben, während die dunkle Icon-Variante einen dunklen Hintergrund nutzen und etwaige Farbakzente statt dessen im Vordergrund platzieren sollte. Für die getönte Variante sollte nach Möglichkeit ein Graustufenbild verwendet werden, erneut mit deutlich abgesetztem Vorder- und Hintergrund. Das System erzeugt basierend auf dieser Graustufenvorlage dann farblich getönte Icons.
Einige der Icons für iOS-Standard-Apps sind ein gutes Beispiel, wie Sie farbliche Akzente korrekt in allen drei Icon-Varianten umsetzen:
Im letzten Beispiel handelt es sich um die getönte Icon-Variante mit Weiß als eingestellter Farbtönung.
Sinn und Nutzen der App Icon Varianten in iOS 18
Im Anschluss an die Vorstellung der neuen Anpassungsmöglichkeiten wurde online viel darüber diskutiert, ob diese Änderung tatsächlich notwendig sei. Einige Nutzer haben kommentiert, dass Steve Jobs und der ehemalige Chef-Designer Jony Ive den Nutzern solche weitgehenden Gestaltungsfreiheiten nicht gegeben hätten:
Neben einem Kontrollverlust beim Branding Ihrer App können Sie im schlimmsten Fall riskieren, dass Nutzer Ihre App im Zweifel lieber vom Startbildschirm entfernen, anstatt auf die neuen Anpassungsmöglichkeiten zu verzichten. Stellen Sie sich vor, dass Ihre App die einzige App auf dem Startbildschirm des Nutzers ist, welche sich nicht an die neuen Icon-Varianten anpasst. Ihre App würde massiv hervorstechen und wortwörtlich ein Dorn im Auge sein.
Es ist daher unerlässlich, Ihre App auf die neuen gestalterischen Freiheiten vorzubereiten und sicherzustellen, dass sie in jedem Fall gut aussieht. Sollten Sie Ihre App noch nicht angepasst haben, ist es daher höchste Zeit für ein Spätjahres-Update.