App-Icon-Design: Was es auf einen Blick erkennbar macht

Woher „auf den ersten Blick erkennbar" kommt: ein Symbol, Weißraum als Struktur, die Arbeitsteilung mit dem System, Zurückhaltung bei der Farbe — Apple und Google erzählen dasselbe.

Gute Icons haben eine gemeinsame Eigenschaft: Man muss nicht nach ihnen suchen — sie springen einen an. Apple und Google schreiben jeweils ein ganzes Buch mit Icon-Guidelines, doch auseinandergenommen und nebeneinandergelegt sagen sie dasselbe: Auf einem Startbildschirm, auf dem hundert Icons um Aufmerksamkeit ringen — warum soll ausgerechnet deins auf einen Blick erkannt werden? Dieser Artikel nimmt die Frage auseinander.

Die Kraft eines einzelnen Symbols

Erkennbarkeit beginnt mit „weniger". Icons, die bestehen, haben fast immer nur einen Protagonisten: einen Pfotenabdruck, einen Ring, einen Buchstaben. Sobald sich die Symbole vermehren, drängeln die Icons auf dem Bildschirm gegeneinander, und jedes zusätzliche Detail verwässert die Erinnerung. Verdichte zuerst das Wesen des Produkts zu einem einzigen Element, dann zeichne es mit möglichst wenigen Formen.

Formen groß, Striche dick. Icons werden am häufigsten bei rund vierzig Pixeln gesehen — bei dieser Größe verschwinden dünne Linien, spitze Winkel verschmieren, Linienrahmen zerfallen in Rauschen; gefüllte Farbflächen behalten ihre Silhouette. Eine praktische Reihenfolge der Prüfung: Sieh zuerst, ob es bei 48px steht, dann skaliere hoch und ergänze Details. Zeichne möglichst vektorbasiert (SVG/PDF, Text in Pfade konvertiert): Skaliere, wie du willst — die Silhouette verrät dich nicht.

Weißraum ist eine Struktur

Die endgültige Form eines Icons entscheidet nicht der Designer: Das System maskiert es zu einem Kreis, einem abgerundeten Quadrat, mitunter zu einer herstellerspezifischen Form. Weißraum ist also keine ästhetische Präferenz, sondern eine strukturelle Notwendigkeit. Googles Zahlen liefern die konkreteste Referenz: Die Leinwand misst 108dp, der äußere 18dp-Ring ist ohnehin für Masken und Parallaxenbewegung reserviert, und das Motiv muss in die zentrale 66dp-Safe-Zone. Ausgerechnet heißt das: Das Motiv belegt nur etwa die mittleren 60 % der Leinwand. Apple formuliert es anders, verlangt aber dasselbe: das Motiv zentriert, außer Reichweite jeder Maske.

Das erklärt auch, warum geometrische Logos sich nicht abmühen sollten, die Leinwand zu füllen. Ist die Form selbst die Markenressource, gibt ihr die Zentrierung aufs Keyline-Raster mit Hintergrundfarbe ringsum mehr Identität, nicht weniger; Illustration ist das gegenteilige Extrem, von Natur aus für randabfallend gebaut.

Das System ist der zweite Designer

Ein modernes Icon ist ein halbfertiges Werk. Nach der Übergabe zeichnet das System weiter: Die Ecken schneidet das System, die Schatten fügt das System hinzu, und iOS Liquid Glass legt Spiegellichter und Refraktion darüber. Die Aufgabe des Designers ist es, diesem zweiten Designer eine gute Arbeitsfläche zu bereiten — randabfallendes Material, saubere Kanten, eine Vordergrundebene mit klarer, unweichgezeichneter Silhouette, damit Glanz und Schatten des Systems irgendwo landen können.

Tiefe folgt derselben Logik: nicht mit Effekten vortäuschen, mit Struktur reservieren. Trenne in der Vordergrundebene Vorne und Hinten durch Opazitätsunterschiede (Apples Photos-Icon ist der Lehrbuchfall) oder lass Vollformen übereinanderliegen — die Tiefe stellt sich von selbst ein. Selbst gemalte Glanzlichter und Schatten sind statisch und werden für immer mit dem dynamischen Licht des Systems streiten.

Zurückhaltung und Freisetzung der Farbe

Der Hintergrund ist der Atemraum des Icons; eine flächige Farbe oder ein schlichter Verlauf genügt. Seine Aufgabe ist es, das Motiv zu tragen, nicht ihm die Show zu stehlen. Reines Schwarz ist die eine Ausnahme, die Aufmerksamkeit braucht — es löst sich in dunklen Hintergründen auf; hebe das Schwarz eine Stufe an.

Auf die Probe gestellt wird Farbe in den Erscheinungsvarianten. iOS bietet dunkle, klare und getönte Bildschirmformen, und zwischen den Varianten sollte sich nur die Farbstimmung ändern — niemals die Elemente. Erkennen die Nutzer dich nicht mehr im Moment des Umschaltens, war das ganze Design davor vergebens. Androids Theme-Icons spitzen diese Prüfung zu: Das System nimmt die Farben weg und behält nur eine monochrome Ebene, die es mit der Hintergrundfarbe einfärbt — die Silhouette muss also ganz ohne Farbe allein stehen können.

Der Rückzug des Textes

Text ist das Element, bei dem man am ehesten zu viel denkt: in kleinen Größen unlesbar, ausgeschlossen von Barrierefreiheit und Lokalisierung — und der App-Name steht ohnehin neben dem Icon. Braucht die Marke wirklich ein Ein-Buchstaben-Monogramm, zeichne es als Form, setze es nicht als Schrift. Dieselbe Logik gilt für Fotos und UI-Screenshots — ihre Feinheiten scheitern an den realen Größen — und für Hardware-Silhouetten, die Apple ausdrücklich verbietet.

Zurück zu jenem einen Blick

Vom Symbol bis zur Farbe dient jedes Detail demselben Moment: dem Blick, mit dem der Nutzer über den Startbildschirm streicht. Eine randabfallende Leinwand, ein zentriertes Motiv, klare Kanten, zurückgehaltene Farbe, eine Silhouette, die allein steht — tu das, und das System malt gerne die andere Hälfte.

Quellen

• Apple Human Interface Guidelines — App icons
• Google Play icon design specifications
• Adaptive icons — Android Developers

Geprüft am 2026-09-02