Ein Favicon erstellen, das nicht wie Müll aussieht
Dieses winzige Icon im Browser-Tab ist wichtiger, als du denkst.
Öffne gerade deine Browser-Tabs. Wie viele kannst du nur am Favicon identifizieren?
Wahrscheinlich die meisten. Dieses 16x16-Pixel-Quadrat leistet ernsthafte Arbeit für die Markenbekanntheit. Googles buntes G. Twitters Vogel. GitHubs Octocat. Du erkennst sie sofort.
Und dann ist da deine Seite mit dem Standard-Leere-Seite-Icon. Oder schlimmer, ein Logo, das bei 500 Pixeln großartig aussah, aber bei 16 zu einem unerkennbaren Klecks wird.
Warum Favicons ignoriert werden
Die meisten Leute designen ihr Logo, bauen ihre Seite und erinnern sich in letzter Minute ans Favicon. „Einfach das Logo verkleinern" scheint vernünftig. Es funktioniert selten.
Ein detailliertes Logo bei 16x16 Pixeln wird zu Matsch. Text ist unleserlich. Feine Linien verschwinden. Farben verschmelzen.
Gute Favicons werden für kleine Größen designt, nicht von großen angepasst.
Was bei winzigen Größen funktioniert
Einfache Formen. Ein einzelner Buchstabe. Eine grundlegende geometrische Form. Etwas in 2 Sekunden Erkennbares.
Hoher Kontrast. Dunkel auf hell oder hell auf dunkel. Subtile Verläufe verschwinden bei kleinen Größen.
Fette Linien. Dünne Striche verschwinden. Dicke, klare Formen überleben die Verkleinerung.
Begrenzte Farben. Zwei oder drei maximal. Komplexe Paletten werden zu Rauschen.
Die Größen, die du wirklich brauchst
Browser, Betriebssysteme und Geräte fordern alle verschiedene Größen an:
- 16x16 - Browser-Tabs (die kritische)
- 32x32 - Taskleiste, Verknüpfungen
- 48x48 - Windows-Desktop
- 180x180 - Apple Touch Icon
- 192x192 - Android Chrome
- 512x512 - PWA-Splash-Screens
Du könntest jede Größe manuell erstellen. Oder einen Generator verwenden, der alle aus einem Quellbild ausgibt.
Häufige Fehler
Dein vollständiges Logo verwenden. „RunToolz" als Text bei 16 Pixeln? Unleserlich. Verwende den Icon-Teil oder erstelle eine vereinfachte Version.
Dark Mode vergessen. Dein schwarzes Icon verschwindet bei dunklen Browser-Themes. Erwäge, einen subtilen Rahmen hinzuzufügen oder eine helle Version zu machen.
Den Hintergrund ignorieren. Einige Kontexte zeigen Favicons auf Weiß, andere auf Dunkel, andere auf deiner gewählten Farbe. Teste alle drei.
Niedrigauflösende Quelle. Beginne mit mindestens 512x512. Runterskalieren funktioniert. Hochskalieren erzeugt Unschärfe.
Schneller Prozess
- Beginne mit deinem Logo oder Markenzeichen
- Vereinfache zum erkennbarsten Element
- Mach es zuerst bei 16x16 funktionieren
- Skaliere von da hoch, füge Details nur hinzu, wo es hilft
- Teste in tatsächlichen Browser-Tabs, nicht nur in deinem Design-Tool
Ein Favicon ist eines dieser kleinen Details, die polierte Seiten von Amateur-Seiten trennen. Dauert 10 Minuten, um es gut zu machen. Macht jedes Mal einen Unterschied, wenn jemand auf seine Tabs schaut.