Favicon und App Icon sind die miniaturisierten visuellen Identifikatoren einer Marke im digitalen Kontext – klein im Format, groß in ihrer Bedeutung für Wiedererkennung und Nutzererlebnis.
Was sind Favicons und App Icons?
Favicon (kurz für „Favorites Icon") ist das kleine Symbol, das im Browser-Tab, in der Adressleiste, bei Lesezeichen und in Suchergebnissen erscheint. Es ist in der Regel 16×16 bis 32×32 Pixel groß, wird aber in verschiedenen Auflösungen benötigt.
App Icon ist das Symbol einer mobilen Anwendung auf dem Homescreen von iOS oder Android-Geräten. Es erscheint in Größen von 60×60 bis 1024×1024 Pixel und unterliegt plattformspezifischen Gestaltungsrichtlinien (Apple Human Interface Guidelines, Material Design von Google).
Beide sind Ableitungen des Logos und müssen funktionieren, wo das vollständige Logo nicht darstellbar ist. Sie sind oft der erste und häufigste visuelle Kontaktpunkt einer Marke mit Nutzenden.
Erklärung
Warum eigenständige Gestaltung nötig ist
Ein Logo, das auf einem DIN-A4-Briefbogen perfekt funktioniert, ist auf 16×16 Pixel oft unlesbar. Die Ursache: Zu viele Details, zu feine Linien, zu geringe Kontraste. Daher ist Favicon- und App-Icon-Design keine simple Skalierung, sondern ein eigenständiger Gestaltungsprozess.
Grundregel: Je kleiner das Format, desto mehr Reduktion ist notwendig.
Technische Spezifikationen
Favicon (Web):
| Format | Größe | Verwendung |
|---|---|---|
.ico | 16×16, 32×32, 48×48 | Standard-Browser-Favicon |
.png | 32×32 | Moderne Browser |
.png | 180×180 | Apple Touch Icon (iOS Safari) |
.png | 192×192, 512×512 | Android / PWA |
.svg | Skalierbar | Neuere Browser (experimentell) |
In der modernen Webentwicklung wird ein Multi-Size-Favicon über den <link rel="icon"> Tag eingebunden. Tools wie RealFaviconGenerator.net helfen, alle benötigten Varianten zu exportieren.
App Icon (iOS nach Apple HIG 2023):
| Gerät | Größe |
|---|---|
| iPhone Homescreen | 60×60 pt (120×120 px @2x, 180×180 px @3x) |
| iPad Homescreen | 76×76 pt |
| App Store Submission | 1024×1024 px |
iOS-Icons haben automatisch abgerundete Ecken – Design in quadratischer Form, kein manuelles Runden nötig.
App Icon (Android / Material Design): Android erlaubt „Adaptive Icons" – ein Vordergrund-Layer auf einem Hintergrund-Layer, das System schneidet verschiedene Formen (Kreis, Squircle, Teardrop etc.) aus. Design-Empfehlung: Motiv auf 66 × 66 dp im Safe Zone halten, Hintergrund (108 × 108 dp) füllen.
Gestaltungsprinzipien
1. Reduktion auf das Wesentliche Aus einem komplexen Logo wird für das Favicon ein Piktogramm, Monogramm oder vereinfachtes Symbol abgeleitet. Textbestandteile werden in kleinen Formaten unleserlich – Buchstaben nur bei sehr großen Icons (ab ca. 64 px).
2. Kontrast sichern Das Icon muss sowohl auf hellem als auch auf dunklem Hintergrund funktionieren. Dark Mode ist Standard geworden. Designs mit weißem Hintergrund oder weißem Symbol verschwinden.
3. Pixel-Optimierung bei kleinen Größen Bei 16×16 und 32×32 Pixeln ist Pixel-Hinting wichtig: Linien sollten auf Pixel-Grenzen ausgerichtet sein, um Unschärfe durch Anti-Aliasing zu minimieren.
4. Plattformkonformität Jede Plattform hat eigene Gestaltungssprachen. iOS-Icons sind glänzend-modern oder flach-farbig (je nach Ära); Android erlaubt mehr Gestaltungsfreiheit durch Adaptive Icons.
5. Konsistenz mit der Gesamtmarke Das Icon muss die Markenfarben verwenden und zum visuellen System passen. Ein Icon, das vom Brand Guide abweicht, schwächt die Markenkonsistenz.
Varianten-System
Im professionellen Branding werden mehrere Icon-Varianten definiert:
- Standard-Icon (Hauptfarbe, für helle Hintergründe)
- Invertiert (für dunkle Hintergründe)
- Monochromatisch (für kontextuelle Einschränkungen)
- Dark Mode Version (für OS-Dark-Mode)
Beispiele
Spotify: Das grüne Klang-Wellen-Symbol auf schwarzem Kreis. Funktioniert auf 16 px perfekt, ist sofort erkennbar. Das Symbol wurde gezielt für kleine Formate konzipiert und weicht vom Wortlogo ab.
Airbnb: Das „Bélo"-Symbol (vgl. Bekannte Rebrands – Fallstudien) ist ein Paradebeispiel für ein Symbol, das auf allen Ebenen funktioniert – von der Gebäudefassade bis zum 16-px-Favicon.
YouTube: Das rote Rechteck mit weißem Play-Dreieck. Extrem simpel, perfekt erkennbar. Die Reduktion von „YOUTUBE" auf das Play-Icon war eine bewusste Designentscheidung für die digitale Ära.
Notion: Schlichte schwarze Ecke auf weißem Grund – minimalistisch, einprägsam, skalierbar.
Evernote: Der grüne Elefantenkopf funktioniert bis 16 px gut, weil die Form prägnant und die Details für die Größe optimiert sind.
In der Praxis
Designprozess für Favicon/App-Icon
- Ausgangsbasis klären: Existiert ein Symbol im Logo-System? → Vereinfachen und ableiten. Kein Symbol vorhanden? → Monogramm oder neues Piktogramm entwickeln.
- Entwürfe in Zielpixelgröße testen: Nicht nur auf dem Artboard betrachten – immer in der tatsächlichen Darstellungsgröße prüfen.
- Dark Mode testen: Icons auf hellem und dunklem Hintergrund prüfen.
- Export-Setup: Alle benötigten Größen und Formate exportieren (Sketch, Figma, Illustrator bieten Export-Presets).
- In [Brand Guidelines – Das Regelwerk für konsistenten Markenauftritt](/wiki/grafik-kommunikationsdesign/corporate-design/brand-guidelines/) dokumentieren: Favicon-Spezifikationen gehören in den Brand Guide, damit alle Stakeholder konsistente Dateien verwenden.
Häufige Werkzeuge
- Figma / Sketch: Design und Export aller Varianten
- Illustrator: Vektorbasis für spätere Rasterisierung
- RealFaviconGenerator.net: Generiert alle Web-Varianten aus einem Upload
- MakeAppIcon / AppIconMaker: Generiert iOS/Android-Sets aus 1024-px-Master
Vergleich & Abgrenzung
| Begriff | Format/Kontext |
|---|---|
| Favicon | Browser-Tab, Lesezeichen (16–512 px) |
| App Icon | iOS/Android Homescreen (bis 1024 px) |
| Touch Icon | Apple Safari, als Lesezeichen gespeicherte Webseite |
| PWA-Icon | Progressive Web Apps (192×192 px, 512×512 px) |
| Logo-Symbol | Vollversion; Basis für Icon-Ableitungen |
| Maskable Icon | Android-spezifisch, ermöglicht adaptives Zuschneiden |
Häufige Fragen (FAQ)
Kann ich einfach das Logo als Favicon hochladen? Technisch ja, gestalterisch meistens nein. Komplexe Logos werden auf kleinen Größen unleserlich und unkenntlich. Eine vereinfachte Ableitung ist immer besser.
Welches Dateiformat ist empfohlen? Für Browser-Favicons gilt .ico als Standard (enthält mehrere Auflösungen), zunehmend aber .svg für Skalierbarkeit. Für Apple Touch Icons und PWA-Manifeste .png.
Muss ein App Icon animiert sein? Nein. Animierte Icons (lottie-basiert) sind auf manchen Plattformen möglich, aber kein Standard. Statische Icons sind die Norm; Animationen nur dort, wo die Plattform es unterstützt und die UX profitiert.
Was ist der Unterschied zwischen App Icon und Splash Screen? Der Splash Screen ist der Ladebildschirm beim App-Start, kein dauerhaftes UI-Element. Das App Icon erscheint permanent auf dem Homescreen.
Verwandte Einträge
- Logo-Varianten – Flexible Markensysteme für jeden Kontext
- Logoarten Übersicht – Die wichtigsten Logo-Typen im Vergleich
- Corporate Color System – Farben im CD
- Corporate Typography – Schrift im CI
- Brand Guidelines – Das Regelwerk für konsistenten Markenauftritt
- Visual Identity vs. Brand Identity – Visuelles System und Markenidentität im Vergleich
- Bekannte Rebrands – Fallstudien
- Geschäftsausstattung
Weiterführend
- Apple Inc. (2023): Human Interface Guidelines – App Icons. Cupertino: Apple. Online: developer.apple.com/design/human-interface-guidelines.
- Google (2023): Material Design – Product Icons. Mountain View: Google. Online: m3.material.io/styles/icons.
- Wheeler, A. (2018): Designing Brand Identity. 5. Auflage. Hoboken: Wiley.
- Smashing Magazine (2022): „A Guide To Favicon Sizes And Formats." Online: smashingmagazine.com.
- Babich, N. (2021): „The Icon Design Guide." In: UX Planet. Online: uxplanet.org.
