Favicons und App-Icons entwerfen, die auch in kleiner Darstellung überzeugen

Schauen Sie sich die Reihe der Registerkarten an, die gerade am oberen Rand Ihres Browsers geöffnet sind. Jede ist auf ein winziges Quadrat geschrumpft, kaum so groß wie ein Fingernagel, und doch können Sie wahrscheinlich die gewünschte Registerkarte erkennen, ohne ein einziges Wort zu lesen. Dieses kleine Quadrat ist ein Favicon, und die Tatsache, dass Sie es sofort erkennen, ist kein Zufall. Jemand hat es so entworfen, dass es bei einer Größe überlebt, die die meisten Menschen als unmöglich klein ansehen würden.

Favicons und App-Icons sind der kleinste und härteste Test, dem eine Marke je begegnet. Es gibt keinen Platz, sich zu verstecken. Kein Slogan, keine clevere Fotografie, kein großzügiger Weißraum, um die Stimmung zu schaffen. Nur ein paar Pixel, die Ihr Publikum bitten, Sie auf einem überfüllten Startbildschirm oder in einem vollen Browserfenster zu erkennen. In diesem Leitfaden werden wir erläutern, was diese winzigen Zeichen sind, warum so viele von ihnen versagen und wie man solche entwirft, die bestehen, wenn alles andere weggelassen wird.

Was ein Favicon und ein App-Icon tatsächlich sind

Lassen Sie uns zuerst den Jargon klären, denn die Begriffe werden oft leichtfertig verwendet. Ein Favicon, kurz für „Favourite Icon“, ist das winzige Bild, das in einem Browser-Tab, in einer Lesezeichenliste und auf einigen Geräten in der Adressleiste erscheint. Ein App-Icon ist das abgerundete Quadrat, das Sie antippen, um Software auf einem Telefon, Tablet oder Desktop zu öffnen. Sie sind verwandt. Beide sind klein, beide repräsentieren Ihre Marke auf einen Blick, und beide leben in Umgebungen, die Sie nicht vollständig kontrollieren.

Das Entscheidende ist, dass dies nicht nur verkleinerte Versionen Ihres Logos sind. Ein Logo ist dafür gemacht, in einer angenehmen Größe gelesen zu werden, oft mit Wörtern und feinen Details. Wenn Sie dasselbe Kunstwerk auf ein winziges Quadrat pressen, kollabiert das Detail zu Brei. Das Entwerfen eines Favicons oder App-Icons ähnelt eher dem Entwerfen einer Münze oder einer Flagge als dem Entwerfen eines Plakats. Sie arbeiten mit kühnen Formen, starken Kontrasten und einer einzigen, einprägsamen Idee. Wenn Sie eine umfassendere Grundlage dafür wünschen, wie das breitere visuelle System zusammenpasst, ist unser Artikel über den Aufbau eines Brand Style Guides eine gute begleitende Lektüre.

Warum die geringe Größe alles verändert

Stellen Sie sich vor, Sie schreiben Ihren Namen auf ein Reiskorn. Sie würden nicht Ihre normale Handschrift verwenden. Sie würden vereinfachen, die Striche verdicken und alles Fummelige weglassen. Der gleiche Instinkt gilt hier. Bei sehr kleinen Größen verschwinden dünne Linien, subtile Farbverläufe werden zu grauem Schlamm, und jeder Text, der kleiner als ein paar Buchstaben ist, wird zu einem unleserlichen Fleck. Der Bildschirm hat einfach nicht genug Pixel, um die Nuance, die Sie hineingesteckt haben, darzustellen.

Die häufigsten Fehler von winzigen Icons

Bevor wir darüber sprechen, wie man es richtig macht, hilft es, die Fallstricke zu sehen. Die meisten schwachen Favicons und App-Icons scheitern aus vorhersehbaren Gründen, und sobald Sie sie benennen können, werden Sie sie überall entdecken.

Der erste Fehler ist das Überfüllen. Designer nehmen das vollständige Logo, einschließlich des Firmennamens, und verkleinern es, damit es passt. Bei kleiner Größe werden die Wörter zu einem unleserlichen grauen Balken und das Icon wird als visuelles Rauschen wahrgenommen. Der zweite Fehler ist ein geringer Kontrast. Ein blasses Zeichen auf einem blassen Hintergrund mag auf einer Website-Kopfzeile elegant aussehen, aber auf einem belebten Startbildschirm verschwindet es einfach. Der dritte Fehler ist die Überladenheit. Feine Umrisse, zarte Serifen und komplizierte Illustrationen lösen sich alle auf, wenn die Pixel ausgehen. Der vierte und vielleicht am meisten übersehene Fehler ist die Gleichförmigkeit. So viele Marken in derselben Kategorie greifen nach demselben blauen Kreis, dass ihre Icons austauschbar werden.

Es gibt auch einen subtileren Fehler, der nichts mit dem Kunstwerk selbst zu tun hat. Viele Teams entwerfen ein schönes Icon, überprüfen es dann aber nie anhand der Kontexte, in denen es tatsächlich erscheinen wird. Sie bewundern es groß auf einer sauberen Leinwand und versenden es, nur um festzustellen, dass es neben einer Wand von Konkurrenten auf einem Telefon schwach aussieht. Das Testen im Kontext ist kein nettes Extra. Es ist das ganze Spiel.

Prinzipien für Icons, die bestehen

Nun der ermutigende Teil. Eine Handvoll Prinzipien, diszipliniert angewendet, bringt Sie größtenteils zu einem funktionierenden Icon. Keines davon erfordert ein riesiges Budget oder ein berühmtes Studio. Sie erfordern Zurückhaltung, was schwieriger ist, als es klingt.

Wählen Sie eine Idee und bleiben Sie dabei

Die stärksten winzigen Zeichen drücken eine einzige Idee aus. Es könnte ein Buchstabe, ein einfaches Symbol oder eine unverwechselbare Form sein, die aus Ihrem Logo entnommen ist. Widerstehen Sie dem Drang, drei Konzepte zu kombinieren. Ein Favicon ist ein Blick, kein Satz. Wenn Ihre Marke bereits ein erkennbares Symbol hat, ist dieses Symbol fast immer Ihr bester Ausgangspunkt. Wenn nicht, ist der erste Buchstabe Ihres Namens in einer selbstbewussten, gut ausgeglichenen Schriftart ein zuverlässiger Rückfall. Unser Leitfaden zu Ikonografie und Illustration im Branding geht detaillierter darauf ein, wie man ein Symbol entwickelt, das sich gut verkleinern lässt.

Lassen Sie den Kontrast die Hauptarbeit leisten

Kontrast ermöglicht es, dass eine winzige Form wahrgenommen wird, bevor Ihr Publikum sie bewusst fokussiert hat. Das bedeutet normalerweise ein kühnes Zeichen auf einem soliden, deutlichen Hintergrund oder umgekehrt. Überlegen Sie, wo das Icon platziert wird. App-Icons befinden sich auf vom Benutzer gewählten Hintergründen, sodass eine farbige Kachel hinter Ihrem Zeichen Ihnen Kontrolle gibt. Favicons befinden sich auf jeder Farbe, die der Browser verwendet, sodass sie sowohl auf hellen als auch auf dunklen Oberflächen lesbar sein müssen. Starke, bewusste Farbwahlen sind hier von enormer Bedeutung, und unser praktischer Leitfaden zur Auswahl von Markenfarben ist eine Lektüre wert.

Vereinfachen Sie, bis es fast wehtut

Eine nützliche Übung besteht darin, Ihr Icon zu entwerfen und dann so lange Details zu entfernen, bis es beginnt, an Bedeutung zu verlieren, und dann das zuletzt Entfernte wieder hinzuzufügen. Dieser Punkt des Beinahe-Zusammenbruchs ist normalerweise der, an dem kleine Icons am besten aussehen. Abgerundete Ecken, einzelne Farben und großzügige interne Abstände helfen alle. Wenn eine Form überlebt, im Format eines Miniaturbilds in Schwarz-Weiß gedruckt zu werden, überlebt sie fast alles.

Die technische Seite ohne Kopfschmerzen richtig machen

Sie müssen kein Entwickler sein, um einen guten Briefing zu erstellen, daher ist hier die einfache Erklärung, was ein Favicon- und App-Icon-Set beinhaltet. Moderne Geräte fragen nach dem gleichen Zeichen in verschiedenen Größen, da ein Browser-Tab, eine Lesezeichenleiste, ein Telefon-Startbildschirm und ein hochauflösender Desktop alle unterschiedliche Pixelabmessungen benötigen. Der sicherste Ansatz ist, Ihr Zeichen sauber in einer großen Größe zu entwerfen und es in jede erforderliche Größe zu exportieren, wobei Sie jede einzelne Version visuell überprüfen, anstatt der Software zu vertrauen, dass sie es perfekt verkleinert.

Es gibt einige Größen, die es wert sind, in der Unterhaltung erwähnt zu werden. Das traditionelle Favicon hat eine Größe von etwa sechzehn und zweiunddreißig Pixeln im Quadrat. App-Icons und Touch-Icons sind größer, oft in den Hunderten von Pixeln, damit sie auf modernen hochauflösenden Bildschirmen scharf aussehen. Sie werden auch eine Version benötigen, die als einfache, einfarbige Silhouette funktioniert, da einige Systeme einen vereinfachten Umriss Ihres Zeichens anzeigen. Das Entwerfen mit dieser Einschränkung von Anfang an spart viel Nacharbeit.

Hintergründe, Polsterung und sichere Bereiche

Besonders App-Icons haben Regeln, wie nah Ihr Artwork am Rand platziert werden darf. Betriebssysteme beschneiden Icons zu abgerundeten Formen und fügen eigene subtile Schatten hinzu, sodass Ihr Zeichen möglicherweise beschnitten wird, wenn Sie es direkt in die Ecke schieben. Lassen Sie einen bequemen Rand zum Atmen. Behandeln Sie den äußeren Ring der Leinwand als Sperrzone und zentrieren Sie Ihre Idee im sicheren Mittelbereich. Dies ist dieselbe Disziplin, die Sie anwenden würden, um Ihre visuelle Identität auf jeder Oberfläche sauber zu halten, ein Thema, das wir in unserem Artikel über Markenkonsistenz über alle Kanäle hinweg untersuchen.

Testen, wie Ihr Publikum es tatsächlich sehen wird

Dies ist der Schritt, den die meisten Teams überspringen, und der, der funktionierende Icons von Icons trennt, die in einer Präsentation lediglich gut aussehen. Bevor Sie es abzeichnen, platzieren Sie Ihr Icon in seinem echten Lebensraum. Legen Sie es auf einen Screenshot eines überfüllten Telefon-Startbildschirms, umgeben von den Apps, die Ihre Kunden bereits nutzen. Öffnen Sie zehn Browser-Tabs und sehen Sie, ob Ihr Icon heraussticht. Betrachten Sie es auf einem kleinen und einem großen Bildschirm, im Hell- und Dunkelmodus, an einem hellen und einem dunklen Tag.

Wenn Ihr Icon zwischen seinen Nachbarn verschwindet, liegt das Problem selten an der handwerklichen Qualität. Es liegt meistens daran, dass Form oder Farbe zu generisch sind. Die Lösung besteht darin, ein Element zu finden, das wirklich Ihnen gehört, und sich darauf zu konzentrieren. Das könnte eine unerwartete Farbe, ein ungewöhnlicher Winkel oder ein Negativraum sein, der eine unvergessliche Silhouette erzeugt. Unverwechselbarkeit, nicht Dekoration, ist das, was Sie auf den ersten Blick bemerken lässt.

Barrierefreiheit ist Teil des Tests

Winzige Icons müssen auch für Menschen mit eingeschränktem Sehvermögen oder Farbenblindheit lesbar sein. Das bedeutet, sich auf Form und Kontrast statt nur auf Farbe zu verlassen, um Bedeutung zu vermitteln. Wenn zwei Ihrer Produkt-Icons nur durch den Farbton unterschieden werden, wird ein Teil Ihres Publikums sie nicht auseinanderhalten können. Die Prinzipien in unserem Leitfaden zu Farbkontrast und Barrierefreiheit im Branding gelten für ein 16-Pixel-Quadrat genauso wie für eine vollständige Webseite.

Ihre winzige Marke über die Zeit konsistent halten

Sobald Sie ein Icon haben, das standhält, schützen Sie es. Fügen Sie es Ihren Richtlinien mit klaren Regeln für Mindestgrößen, Hintergrundoptionen und die Silhouettenversion hinzu. Notieren Sie, welche Datei wohin gehört, damit ein zukünftiger Entwickler oder Designer nicht stillschweigend einen leicht abweichenden Farbton oder eine gestreckte Version austauscht. Kleine Inkonsistenzen summieren sich. Ein Favicon, das jedes Jahr ein wenig driftet, wird am Ende unkenntlich, und die Wiedererkennung ist der gesamte Grund, warum das Icon existiert. Wenn Sie eine Arbeitscheckliste führen, ist unsere Checkliste für Markenrichtlinien ein sinnvoller Ort, um diese Details festzuhalten.

Es lohnt sich auch, Ihr Icon zu überarbeiten, wenn Sie andere Teile Ihrer Identität aktualisieren. Ein kleines Zeichen kann eine Marke still und heimlich datieren, und eine sanfte, sorgfältig durchgeführte Modernisierung hält Sie aktuell, ohne die aufgebaute Wiedererkennung zu verlieren. Das Ziel ist Evolution, nicht Neuerfindung. Wenn Schrift und Icon als System zusammenarbeiten, wirkt die gesamte Marke bewusster, weshalb unsere Arbeit an der Typografie für Marken natürlich zu diesem Thema passt, insbesondere wenn Ihr Icon eine Buchstabenform ist. Für die breitere Beziehung zwischen Schriften und Farben im Web ist dieser Überblick über Website-Schriften und -Farben ein hilfreicher Querverweis.

Ein einfacher Arbeitsablauf, dem Sie folgen können

Um alles zusammenzufassen, hier ist eine praktische Reihenfolge. Beginnen Sie mit Ihrem stärksten bestehenden Symbol oder einem klaren Initial. Vereinfachen Sie es zu kühnen Formen und einer einzigen, selbstbewussten Idee. Wählen Sie Farben mit hohem Kontrast und einer markanten Kante. Exportieren Sie das Zeichen in jeder benötigten Größe und überprüfen Sie jede einzelne visuell. Erstellen Sie eine Silhouettenversion für Systeme, die eine benötigen. Testen Sie dann, und das ist entscheidend, den gesamten Satz in realen Kontexten, bevor Sie ihn veröffentlichen. Wenn er den überfüllten Startbildschirm und die Reihe der Browser-Tabs überlebt, haben Sie ein Icon, das sich jahrelang bewähren wird. Wenn Sie eine zweite Meinung zu Ihrem Icon wünschen, können Sie uns jederzeit kontaktieren.

Häufig gestellte Fragen

Referenzen

1. Nielsen Norman Group. „Icon Usability.“ nngroup.com.
2. W3C. „HTML Living Standard: Link Types and Icons.“ w3.org.
3. Smashing Magazine. „Designing Better App And Favicon Sets.“ smashingmagazine.com.