Mach aus deinem Logo ein Favicon
Dein Logo hat eine Wortmarke, ein Symbol und feine Details. Bei 16 Pixeln Breite überlebt nur eines davon. Wähle es bewusst, bevor du irgendetwas exportierst.
Warum das ganze Logo scheitert
Ein Favicon wird so klein wie 16 Pixel breit gerendert. Ein komplettes Logo mit Wortmarke und feinen Details wird bei dieser Größe zu einem grauen Fleck: Der Text ist unlesbar und die Details zerfallen zu Matsch.
Die Lösung ist, das Favicon als eigenes, vom Logo abgeleitetes Asset zu behandeln, nicht als das Logo selbst. Die meisten starken Favicons sind ein Symbol, ein Monogramm oder ein einzelner Buchstabe, weil nur das in Tab-Größe überlebt.
Vom Logo zum Favicon
- 1
Extrahiere ein Element
Nimm das Symbol aus deinem Logo oder eine einzelne Initiale, falls dein Logo eine Wortmarke ist. Lass den Text und alles Dekorative weg.
- 2
Vereinfache, bis es klein lesbar ist
Entferne dünne Linien, Verläufe und innere Details. Ziele auf eine kräftige Form mit hohem Kontrast gegen ihren Hintergrund.
- 3
Gestalte zuerst in der kleinsten Größe
Zoome auf 16x16 und mach es dort lesbar. Wenn es bei 16 funktioniert, funktioniert es überall. Ein kleines Design hochzuskalieren ist einfach; umgekehrt nicht.
- 4
Gib ihm bei Bedarf einen Hintergrund
Eine kompakte Marke liest sich oft besser auf einem soliden oder leicht gepolsterten Hintergrund als randlos schwebend. Das hilft auch dem apple-touch-icon, das iOS auf Schwarz legt.
- 5
Exportiere den kompletten Satz
Generiere das favicon.ico, die PNGs und das apple-touch-icon aus der finalen Marke, damit jede Größe aus demselben sauberen Artwork stammt.
Design-Regeln, die das Verkleinern überleben
Hoher Kontrast zuerst. Die Marke muss sich hart vom Hintergrund abheben, denn subtile Tonabstufungen verschwinden bei kleinen Größen. Kräftiger Vordergrund, schlichter Hintergrund.
Eine Form, nicht drei. Ein Favicon, das sich als einzelne Silhouette liest, funktioniert. Stapelst du mehrere Elemente, verschmelzen sie zu Rauschen. Wenn du zwischen zwei Ideen schwankst, liefere die einfachere.
Achte auf den Negativraum. Dünne Lücken zwischen Formen schließen sich bei 16 Pixeln und die Marke läuft zu einem Klecks zusammen. Gib den Formen Platz oder verdicke sie, damit die Lücken offen bleiben.
Häufig gestellte Fragen
Kann ich mein Logo als Favicon verwenden?
Nicht das ganze Logo. Extrahiere das Symbol oder eine einzelne Initiale und vereinfache es, bis es bei 16 Pixeln lesbar ist, und exportiere dann daraus den Favicon-Satz. Eine komplette Wortmarke wird im Tab zu Matsch.
Wie mache ich ein Favicon aus einem Logo?
Nimm ein Element aus dem Logo, entferne die feinen Details, stimme es bei 16x16 auf Lesbarkeit ab, gib ihm einen Hintergrund, falls die Marke kompakt ist, und generiere dann jede Favicon-Größe aus dem finalen Artwork.
Warum sieht mein Logo als Favicon unscharf aus?
Es hat zu viele Details für 16 Pixel. Dünne Linien, Text und Verläufe zerfallen bei dieser Größe. Vereinfache auf eine kräftige Form mit hohem Kontrast.
In welcher Größe sollte ich ein Favicon gestalten?
Gestalte zuerst in der kleinsten Größe, 16x16. Wenn die Marke sich dort liest, liest sie sich in jeder größeren Größe. Ein kleines, sauberes Design hochzuskalieren ist sicher; ein detailliertes zu verkleinern nicht.