Favicon-Beispiele, Best Practices und Techniken

Achten Sie jemals auf diese winzigen Symbole oben auf den Browser-Registerkarten? Wie wäre es, wenn Sie eine Verknüpfung zu einer Website oder Seite online speichern? Diese winzigen Bilder oder Favicons wurden speziell für diesen Zweck entwickelt.

Es gibt einen ziemlich deutlichen Unterschied zwischen dem, was ein gutes oder schlechtes kleines Symbol ausmacht. Es wird Ihnen verziehen, wenn Sie denken, dass Designentscheidungen im winzigen Maßstab weniger wichtig sind. Aber ein schlecht gestaltetes Favicon kann Ihre Marke schlecht widerspiegeln.

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

Entdecken Sie Envato-Elemente

Was ist ein Favicon?

Ein Favicon ist einfach ein kleines, transparentes Symbol, das eine Website, eine Marke oder ein Unternehmen darstellt. Favicons tragen zur Verbesserung der Benutzererfahrung bei, indem sie eine konsistente Markierung bereitstellen, die Website-Besuchern dank einer konsistenten visuellen Darstellung mitteilt, dass sie sich auf derselben Website befinden wie sie.

Der Begriff Favicon stammt von „Lieblingssymbol“. Diese Terminologie stammt aus Internet Explorer-Tagen, als mit Lesezeichen versehene Seiten als "Favoriten" bezeichnet wurden. Das Favicon wurde erstmals vom World Wide Web Consortium (W3C) für HTML 4.0, circa 2000, übernommen und erschien im folgenden Jahr konsistenter in Browserfenstern.

Verwenden Sie Favicons, um schnell zwischen den Browser-Registerkarten zu wechseln, ein Lesezeichen zu identifizieren oder eine gespeicherte App oder Verknüpfung auf Ihrem Telefon zu finden. Die visuelle Kennung wird von den meisten Benutzern verwendet, um diese Links und Seiten mit der rechten Schaltfläche für den Zugriff darauf zu verknüpfen.

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

Technische Überlegungen

Zu einer Zeit waren alle Favoriten superkleine 16-Pixel-Quadrate. Dies ist bei hochauflösenden Retina-Bildschirmen und Verknüpfungssymbolen nicht mehr der Fall.

HTML 5 enthält Standards für Favoriten mit mehreren Größen für alle Arten von Anwendungen, von winzigen Browsersymbolen über Symbole für Computer-Dockingstationen bis hin zu Startbildschirmsymbolen. Sie brauchen dieses 16-Pixel-Quadrat nicht mehr wirklich.

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-Sternsymbol
• 152 × 152: iPad-Touch-Symbol
• 167 × 167: iPad Retina Touch-Symbol
• 180 × 180: iPhone Retina-Symbol
• 192 × 192: Empfehlung der Google Developer-Webanwendung
• 196 × 196: Android-Startbildschirmsymbol

Empfohlene Vorgehensweise

Es scheint zwar eine Ikone zu sein, die für das Gesamtdesign so unbedeutend sein könnte, aber das ist alles andere als wahr.

Ein Favicon sagt viel über Ihre Marke und Website aus. Benutzer erwarten sie, wenn sie sie nicht anhand ihres Namens identifizieren können. Diese kleinen Elemente tragen zur allgemeinen Benutzererfahrung und Marke bei.

Wie können Sie das Beste aus einem Favicon machen?

Beachten Sie diese Best Practices:

• Ein Favicon sollte eine Verbindung zu Ihrer Markenidentität herstellen, ist jedoch häufig zu klein, um ein gesamtes Logo aufzunehmen. Verwenden Sie ein identifizierbares Element wie den ersten Buchstaben Ihres Markennamens oder eine winzige Marke, die Sie in Verbindung mit der Marke verwenden.
• Denken Sie an 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 Kanten abrunden, was eine weitere Überlegung bedeutet.
• Stellen Sie sicher, dass die Datei klein, aber nicht zu klein ist. Laden Sie eine Favicon-Größe hoch, die auf den meisten Geräten ordnungsgemäß gerendert wird, aber die gesamte Website nicht beeinträchtigt.
• Vermeiden Sie Wörter oder komplexe Elemente im Favicon-Design.
• Halten Sie sich an eine einfache, optimierte Farbpalette für das Favicon. Es ist zu klein, um verrückt nach Farbe zu werden. Aus diesem Grund verwenden die meisten dieser winzigen Symbole nur eine Hintergrund- und Vordergrundfarbe mit viel Kontrast zwischen den beiden.

Designtechniken

Da ein Favicon klein ist, können Sie es in Photoshop aus einer Laune heraus entwerfen. Dies ist nicht der empfohlene Weg für eine lange Lebensdauer.

Die oberste visuelle Designregel für Favoriten ist, das Design einfach zu halten. Gehen Sie nicht mit Farben, Text oder Markenelementen über Bord.

Erstellen Sie Ihr Favicon in einem Vektorwerkzeug wie Illustrator oder Sketch und exportieren Sie das Design in die erforderlichen Größen. Dadurch wird sichergestellt, dass Sie bei sich ändernden Bildschirmauflösungen ein Favicon haben, das den Test der Zeit besteht. (Alles, was Sie tun müssen, ist den Reexport in einer neuen Größe.)

Die oberste visuelle Designregel für Favoriten ist, das Design einfach zu halten. Gehen Sie nicht mit Farben, Text oder Markenelementen über Bord. Wenn Sie sich die Beispiele in diesem Beitrag ansehen, werden Sie feststellen, dass fast alle diese winzigen Elemente mit 16 x 16 Pixel lesbar sind.

Vermeiden Sie Tricks wie Animationen. sie stören nur hier.

Betrachten Sie es als Design-Herausforderung. Es kann ziemlich schwierig sein, etwas so Kleines zu erstellen, dass es leicht zu lesen ist.

Speichern Sie die Datei als transparentes PNG. Es ist eine gute Angewohnheit, die sicherstellt, dass Sie keine merkwürdigen Kanten oder Ränder auf dem Favicon haben. (Nichts sieht schlimmer aus als ein gezackter weißer Rand, der das Symbol umgibt.)

Verwenden Sie die Prinzipien guten Designs. Sie wissen nie, wann das Favicon für etwas mit einer größeren, besser sichtbaren Größe verwendet werden kann. Beim Speichern eines Website-Lesezeichens kann beispielsweise eine große Version eines Favicons verwendet werden. Gleiches gilt für das Andocken und sogar für die Vorschau von Suchmaschinenergebnissen.

Obwohl es klein ist, repräsentiert dieses Symbol Ihre Marke. Gestalte es gut.

Sobald Sie die Datei fertig haben, können Sie sie mit nur wenigen Codezeilen zu Ihrer Website hinzufügen. (Viele WordPress-Themes und Website-Builder enthalten bereits ein Favicon-Element, sodass Sie nicht einmal über diesen Schritt nachdenken müssen.)

Fügen Sie nach dem Hochladen der Bilddatei den folgenden Code in die Kopfzeile Ihrer Website ein und beachten Sie, dass sich "iconpath" und "iconname" auf Ihr spezifisches Dateielement beziehen:

• HTML-Indexdatei:
• WordPress:

Beispiele

Die folgenden Beispiele enthalten einige Markenelemente mit zugehörigen Favoriten. (Stellen Sie sicher, dass Sie sich durchklicken und den Designern auf ihren Dribbble-Seiten etwas Liebe zeigen.)

Prodigi.team Responsive Logotype

Vorgeschlagenes Butterscotch-Logo-System

Logo Favicon Anzeige

Favicon-Vorlage

TEC Logo Option 2

Fazit

Was den Favoriten an Größe fehlt, machen sie in der Benutzererfahrung wieder wett. Diese Symbole dienen als Navigationswerkzeuge für Besucher Ihrer Website und für diejenigen, die dazu neigen, zu viele Browser-Registerkarten offen zu lassen.

In der Regel ist ein Favicon eine schnelle visuelle Kennung, die den Benutzer mit Ihrer digitalen Präsenz verbindet. Achten Sie darauf, dass es die beste und genauere Darstellung Ihrer Marke ist.