Haben Sie jemals auf diese winzigen Symbole am oberen Rand der Browser-Tabs geachtet? Und wenn Sie eine Verknüpfung zu einer Website oder einer Online-Seite speichern? Diese winzigen Bilder, auch Favicons genannt, wurden speziell für diesen Zweck entworfen.

Es gibt einen deutlichen Unterschied zwischen guten und schlechten kleinen Symbolen. Man könnte meinen, dass Designentscheidungen im kleinen Maßstab weniger wichtig sind. Aber ein schlecht gestaltetes Favicon kann ein schlechtes Licht auf Ihre Marke werfen.

Heute schauen wir uns an, was diese Icons sind, grundlegende Designtechniken für sie und die Spezifikationen, die Sie befolgen müssen.

Was ist ein Favicon?

Ein Favicon ist ein kleines, transparentes Symbol, das eine Website, eine Marke oder ein Unternehmen darstellt. Favicons tragen dazu bei, die Benutzerfreundlichkeit zu verbessern, indem sie eine konsistente Markierung bieten, die den Website-Besuchern mitteilt, dass sie sich auf derselben Website befinden, während sie dank einer konsistenten visuellen Darstellung navigieren.

Der Begriff Favicon kommt von „favorite icon“. Diese Terminologie stammt aus der Zeit des Internet Explorers, als die mit Lesezeichen versehenen Seiten „Favoriten“ genannt wurden. Das Favicon wurde erstmals vom World Wide Web Consortium (W3C) für HTML 4.0 um das Jahr 2000 herum eingeführt und erscheint seit dem folgenden Jahr immer häufiger in Browserfenstern.

Mit Favicons können Sie schnell zwischen Browser-Registerkarten wechseln, ein Lesezeichen identifizieren oder eine gespeicherte Anwendung oder Verknüpfung auf Ihrem Telefon finden. Die visuelle Kennzeichnung ist das, was die meisten Menschen verwenden, um diese Links und Seiten mit der richtigen Schaltfläche zu verknüpfen, um sie aufzurufen.

Traditionell verwendeten Favicons ein .ico-Dateiformat, aber das ist jetzt weniger ein Problem. Jeder transparente Dateityp wird in den meisten Fällen funktionieren; .png ist oft das Format der Wahl.

Technische Überlegungen

Es gab eine Zeit, in der alle Favicons super kleine 16-Pixel-Quadrate waren. Das ist heute nicht mehr der Fall, da es immer mehr hochauflösende Retina-Bildschirme und Verknüpfungssymbole gibt.

HTML 5 enthält Standards für Favicons mit verschiedenen Größen für alle möglichen Verwendungszwecke, von winzigen Browsersymbolen über Symbole für Computer-Dockingstationen bis hin zu Symbolen für den Startbildschirm. Man braucht das 16-Pixel-Quadrat eigentlich gar nicht mehr.

Moderne Favicon-Größen und -Verwendung:

• 32×32: Standard für die meisten Desktop-Browser (ersetzt 16×16)
• 128×128: Chrome-Store und kleines Windows-8-Sternchen-Symbol
• 152×152: iPad Touch-Symbol
• 167×167: iPad Retina Touch-Symbol
• 180×180: iPhone Retina-Symbol
• 192×192: Google Developer Web-App-Empfehlung
• 196×196: Android-Startbildschirm-Symbol

Best Practices

Es scheint zwar so, als wäre ein solches Symbol im Hinblick auf das Gesamtdesign unbedeutend, aber das stimmt bei weitem nicht.

Ein Favicon sagt viel über Ihre Marke und Website aus. Die Nutzer haben sich daran gewöhnt, wenn sie sie nicht mit dem Namen identifizieren können. Diese kleinen Elemente tragen zur allgemeinen Benutzererfahrung und zur Marke bei.

Wie können Sie also das Beste aus einem Favicon herausholen?

Beachten Sie diese Best Practices:

• Ein Favicon sollte eine Verbindung zu Ihrer Markenidentität herstellen, ist aber oft zu klein, um ein ganzes Logo zu enthalten. Verwenden Sie ein identifizierbares Element wie den Anfangsbuchstaben Ihres Markennamens oder ein winziges Zeichen, das Sie in Verbindung mit Ihrer Marke verwenden.
• Denken Sie an die Form. Der Platz für ein Favicon ist standardmäßig quadratisch. Wenn Sie etwas anderes wollen, ist ein transparenter Hintergrund erforderlich. Einige Systeme können auch die Ränder abrunden, was eine weitere Überlegung wert ist.
• Stellen Sie sicher, dass die Datei klein, aber nicht zu klein ist. Laden Sie ein Favicon in einer Größe hoch, die auf den meisten Geräten korrekt wiedergegeben wird, aber die Website insgesamt nicht beeinträchtigt.
• Vermeiden Sie Wörter oder komplexe Elemente im Design des Favicons.
• Halten Sie sich an eine einfache, schlanke Farbpalette für das Favicon. Es ist zu klein, um es mit Farben zu überladen. Deshalb verwenden die meisten dieser winzigen Icons nicht viel mehr als eine Hintergrund- und eine Vordergrundfarbe mit viel Kontrast zwischen den beiden.

Gestaltungstechniken

Da ein Favicon klein ist, könnten Sie geneigt sein, es nach Lust und Laune in Photoshop zu gestalten. Das ist nicht der empfohlene Weg für Langlebigkeit.

Erstellen Sie Ihr Favicon in einem Vektorwerkzeug wie Illustrator oder Sketch und exportieren Sie das Design dann in die erforderlichen Größen. Auf diese Weise können Sie sicherstellen, dass Ihr Favicon auch bei sich ändernden Bildschirmauflösungen immer noch aktuell ist. (Alles, was Sie tun müssen, ist, es in einer neuen Größe zu exportieren.)

Die wichtigste Regel für die visuelle Gestaltung von Favicons ist, das Design einfach zu halten. Übertreiben Sie es nicht mit Farbe, Text oder Markenelementen. Wenn du dir die Beispiele in diesem Beitrag ansiehst, wirst du sehen, dass fast alle dieser winzigen Elemente mit 16 x 16 Pixeln lesbar sind.

Vermeide Tricks wie Animationen; sie stehen hier nur im Weg.

Betrachte es als Design-Herausforderung. Es kann ziemlich schwierig sein, etwas so klein zu gestalten, dass es leicht zu lesen ist.

Speichern Sie die Datei als transparentes png. Das ist eine gute Angewohnheit, die sicherstellt, dass das Favicon keine ungeraden Kanten oder Ränder aufweist. (Nichts sieht schlimmer aus als ein gezackter weißer Rand, der das Symbol umgibt.)

Wenden Sie die Grundsätze des guten Designs an. Man weiß nie, wann das Favicon für etwas Größeres, Sichtbareres verwendet werden könnte. Das Speichern eines Website-Lesezeichens kann zum Beispiel eine große Version eines Favicons verwenden. Dasselbe gilt für das Andocken und sogar für die Vorschau von Suchmaschinenergebnissen.

Auch wenn es klein ist, repräsentiert dieses Symbol Ihre Marke. Gestalten Sie es gut.

Wenn Sie die Datei fertig haben, können Sie sie mit nur ein paar Zeilen Code in Ihre Website einbauen. (Viele WordPress-Themes und Website-Builder haben bereits ein Favicon-Element integriert, so dass Sie über diesen Schritt nicht einmal nachdenken müssen.)

Nach dem Hochladen der Bilddatei fügen Sie den folgenden Code in die Kopfzeile Ihrer Website ein, wobei Sie beachten müssen, dass sich „iconpath“ und „iconname“ auf Ihr spezifisches Dateielement beziehen:

Beispiele

Die folgenden Beispiele enthalten einige Markenelemente mit zugehörigen Favicons. (Klicken Sie sich durch und zeigen Sie den Designern etwas Liebe auf ihren Dribbble-Seiten.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Favicon Vorlage

TEC Logo Option 2

Abschluss

Was Favicons an Größe fehlt, machen sie durch ihre Benutzerfreundlichkeit wieder wett. Diese Symbole dienen als Navigationshilfe für Besucher Ihrer Website und für diejenigen, die dazu neigen, zu viele Browser-Tabs geöffnet zu lassen.

Im Allgemeinen ist ein Favicon ein schnelles visuelles Erkennungszeichen, das den Benutzer mit Ihrer digitalen Präsenz verbindet. Achten Sie darauf, dass es die beste und genaueste Darstellung Ihrer Marke ist.