Der ultimative Leitfaden für Favicons

Was ist ein Favicon?

Im Webdesign sind Favicons normalerweise verkleinerte Logos eines Unternehmens oder einer Organisation, die das Branding unterstützen. Sie erscheinen in der Ecke eines Website-Tabs und enthalten normalerweise das Logo-Design der besuchten Website. Favicons sind sehr klein und haben bestimmte Anforderungen. Daher solltest du wissen, wie man ein Favicon für jede deiner eigenen oder verwalteten Websites erstellt.

Wo werden Favicons eingesetzt?

Favicons sind in vielen Webbrowsern zu finden. Sie können sich auf der rechten oder linken Seite von Browser-Tabs, Verlaufsergebnissen, Toolbar-Apps und Suchleisten befinden. Wo Favicons angezeigt werden, hängt normalerweise vom verwendeten Browser ab. Zum Beispiel erscheinen Favicons in Google Chrome auf der linken Seite des Tabs, in der Lesezeichenleiste, im Browserverlauf und in der Suchleiste, während du tippst.

Sind Favicons wichtig?

Ja, Favicons sind äußerst klein, aber auch äußerst wichtig. Ein Favicon ist oft eines der ersten Logos, die ein Besucher beim Besuch einer Website sieht, insbesondere während die Seite noch lädt. Deine Besucher erinnern sich viel eher an deine Website und die Marke, die sie repräsentiert, wenn dein Favicon bunt ist oder ein eindeutiges Bild verwendet, um eine Botschaft zu vermitteln. Ohne ein Favicon könnte deine Website leicht in Vergessenheit geraten.

Zu den bemerkenswertesten Vorteilen der Verwendung von Favicons gehören:

Markenidentität

Die Definition und Einrichtung der Identität deiner Marke ist entscheidend, besonders wenn du in einen stark umkämpften oder übersättigten Markt eintrittst. Es kann hilfreich sein, von Anfang an eine Markenidentität mit einem professionellen Favicon zu haben, damit sich deine Website von ähnlichen Websites in der gleichen Branche abhebt. Wenn Markenbekanntheit für dein Unternehmen unerlässlich ist, solltest du dir die Chance nicht entgehen lassen, ein eigenes Favicon zu implementieren.

Lesezeichenidentifizierung

Wenn ein Benutzer deine Website mit einem Lesezeichen versieht, wie hoch ist die Wahrscheinlichkeit, dass er sie ohne Favicon leicht wiederfindet? Ein Favicon trägt zur besseren Erkennung deiner Website für Besucher bei, die sie in Zukunft erneut aufrufen möchten.

Verbesserte UX

Der Aufbau einer erfolgreichen Website und Online-Präsenz erfordert heute mehr als nur die Bereitstellung von qualitativ hochwertigen Inhalten bzw. Produkten. Wenn du deinen Besuchern ein nahtloses Nutzererlebnis bietest, kann das auch beim Aufbau und der Entwicklung einer neuen Online-Marke sehr hilfreich sein. Ein Favicon wirkt auf die meisten professionell und kann dazu beitragen, dass deine Marke von neuen Besuchern als glaubwürdig und seriös wahrgenommen wird.

Suchmaschinenoptimierung (SEO)

In einigen Fällen kann ein gut gestaltetes Favicon helfen, die SEO einer Website zu verbessern. Wenn dein Favicon auffällig und visuell ansprechend ist, könnte es mehr Klicks und Aufmerksamkeit als andere konkurrierende Links oder Websites erhalten. Obwohl es nicht garantiert ist, dass du die SEO deiner Website mit einem gut gestalteten Favicon verbessern kannst, ist es mit genügend Besucherengagement möglich.

Reputation und Glaubwürdigkeit

Einen guten ersten Eindruck zu hinterlassen ist wichtig, besonders wenn du dein Unternehmen oder deine Marke potenziellen Kunden zum ersten Mal vorstellst. Die Verwendung eines Favicons ist eine Möglichkeit, Professionalität und Authentizität zu vermitteln, was dazu beitragen kann, eine positive Beziehung zwischen dir und deinen Besuchern aufzubauen. Auch durch die Verwendung professioneller Logos, Farbschemata und Favicons kannst du eine Botschaft der Authentizität und Glaubwürdigkeit vermitteln, was deinen Ruf stärkt.

Favicon-Formatierung

Ein Favicon-Leitfaden kann dir helfen, dein Favicon zu formatieren und dabei mehr über die geeigneten Bilddateitypen für diese Grafik zu lernen. Früher mussten alle Benutzer Windows-ICO-Dateien verwenden, um ein Favicon zu laden, doch jetzt erlauben verschiedene Browser die die Verwendung von Standard-Bilddateien wie PNG, SVG und GIF.

Die folgenden Dateitypen werden heute am häufigsten zur Formatierung von Favicons verwendet:

Windows ICO

Windows-ICO-Dateien (Windows Icon) sind die am häufigsten verwendeten Dateitypen, um Favicons zu speichern. Wenn du nach kostenlosen Favicons suchst, anstatt deine eigenen zu entwerfen oder zu entwickeln, werden dir Bibliotheken mit Windows-ICO-Dateien angezeigt. Es gibt auch Online-Konverter, mit denen du deine eigene traditionelle Bilddatei hochladen kannst, um sie in eine Standard-Windows-ICO-Datei zur Verwendung als Favicon umzuwandeln. Der Windows-ICO-Dateityp ist für ein 32-Pixel-Icon nützlich.

PNG

PNG-Dateien sind äußerst beliebte Bilddateitypen, die auch ohne zusätzliche Formatierung oder Programmierung als Favicons verwendet werden können. Eine PNG-Datei ist für alle empfehlenswert, die mit traditionellen Grafiken und Bildern hochwertige Ergebnisse erzielen möchten. Wenn du ein transparentes Logo erstellen, aber keine Windows-ICO-Datei verwenden möchtest, ist die Verwendung eines PNG oft die beste Wahl.

SVG

SVG-Bilder sind leistungsstarke Bilddateien, die auch zum Erstellen und Anzeigen von Favicons verwendet werden können. Obwohl SVG-Dateien nicht so schnell geladen werden wie herkömmliche JPG- und GIF-Dateien, sind sie mit einer Vielzahl von Webbrowsern, von Microsoft Edge und Mozilla Firefox bis hin zu Opera, universeller kompatibel.

GIF

Du kannst eine GIF-Datei nutzen, wenn du ein neues Favicon für deine Website erstellst. Falls du ein transparentes oder animiertes GIF als Favicon verwenden möchtest, ist dies unter Umständen möglich, je nachdem, wie du dein Favicon hochlädst und präsentierst.

APNG

Ein weiteres Format für die Erstellung von Favicons ist APNG. APNG ist ähnlich wie PNG-Dateien, erlaubt jedoch verschiedene Bewegungen und Animationen wie ein GIF. APNG-Dateien sind auch mit Browsern wie Opera und Mozilla Firefox kompatibel.

JPG

Selbst wenn du neu im Bereich Webdesign und -entwicklung bist, hast du wahrscheinlich von JPG-Dateien gehört. Ein JPG ist heutzutage eines der am häufigsten verwendeten Formate, um Fotos und Grafiken zu speichern. JPGs werden jedoch selten zur Erstellung von Favicons verwendet, da sie häufig an Qualität einbüßen, wenn sie bearbeitet und in der Größe angepasst werden. Die wiederholte Bearbeitung eines JPGs führt nicht immer zu dem professionellen Ergebnis, das man sich für ein Logo oder Favicon vorstellt.

Favicon-Größenrichtlinien

Bevor du ein von dir entworfenes Favicon hochlädst oder versuchst, ein herkömmliches Bild für dein Favicon zu verwenden, ist es wichtig zu wissen, welches Format und welche Größe am besten geeignet sind, um es speichern zu können. Favicons sind im Allgemeinen kleinere oder komprimierte Versionen von Logos. Und wenn wir klein sagen, meinen wir das auch so. Während ein klassisches Logo von 50 Pixeln bis zu mehr als 300-500 Pixeln reichen kann, beginnt die Größe eines Favicons bei 16x16 Pixeln.

Hier sind die gängigsten Favicon-Richtlinien hinsichtlich der passenden Größe.

• 16x16 Pixel : Bei der Erstellung eines Favicons solltest du im Kopf behalten, dass 16x16 Pixel die am häufigsten verwendete Größe ist. Obwohl 16x16 Pixel eine extrem kleine Dateigröße darstellen, sind sie nützlich, um Logos und Favicons im gesamten Web in Suchleisten, Tabs und im Browserverlauf anzuzeigen.
• 32x32 Pixel : Favicons, die 32x32 Pixel groß sind, sind ideal für alle, die ihre Website oder Inhalte in einer Taskleiste bewerben möchten. Außerdem lädt diese Größe am besten für Benutzer von macOS und dem Safari-Browser, da sie dem Standard für den „Später lesen“-Bereich des Browsers entspricht.
• 72x72 Pixel : Während die traditionellen 16x16-Pixel-Favicons früher als universell galten, haben verschiedene Technologien und neue Geräte Platz für noch mehr Größenoptionen geschaffen. Wenn du Benutzer ansprichst, die über Mobiltelefone oder iPads surfen, ist ein 72x72 Pixel großes Favicon ein Muss.
• 96x96 Pixel : Für diejenigen, die User von Google TV ansprechen möchten, ist ein 96x96 Pixel großes Favicon sehr empfehlenswert, um Streckungen und Qualitätsverluste beim Laden in einer größeren Auflösung zu vermeiden.
• 114x114 Pixel: Ein Favicon mit 114x114 Pixeln ist optimal für diejenigen, die die neueste Version des Apple iPhone verwenden, da die App-Symbole größer sind und das Retina-Display doppelt so groß ist. Um zu verhindern, dass dein Favicon von minderer Qualität und verschwommen ist, verwende die passende Größe für die Kanäle, die du ansprechen möchtest.
• 128x128 Pixel : Wenn du deine Website oder Online-Präsenz über den Google Chrome Web Store bewerben möchtest, kannst du dies mit einem 128 x 128 Pixel großen Favicon tun.
• 195x195 Pixel: Diese Größe ist zwar selten, kann aber für diejenigen geeignet sein, die den Opera-Browser oder die Opera-Schnellwahl-Einstellungen verwenden, um bevorzugte Websites zu speichern.

Wenn du die verschiedenen Favicon-Größen kennst, die heute am häufigsten verwendet werden, kannst du die richtige Größe für dein Favicon bestimmen. Wenn du mit den Formaterwartungen deines Favicons in verschiedenen Webbrowsern, App Stores und Geräten vertraut bist, kannst du das Risiko minimieren, dein Unternehmen oder deine Marke in minderwertiger Qualität zu präsentieren.

Warum ist die Größe deines Favicons wichtig?

Das Erstellen von Favicons in verschiedenen Größen kann helfen, Qualitäts- oder Auflösungsverluste zu vermeiden, wenn das Symbol für Benutzer geladen wird, unabhängig davon, ob sie deine Website besuchen oder über den offiziellen Chrome Web Store auf deine App zugreifen. Wenn dein Favicon zu klein ist oder die falsche Größe hat, riskierst du Folgendes:

• Negative Aufmerksamkeit für deine Marke . Ein schlechter erster Eindruck kann Benutzer davon abhalten, deiner Website oder Marke jemals eine Chance zu geben, insbesondere wenn ein konkurrierendes Unternehmen mit professionell gestalteten Grafiken und Favicons einen positiven Eindruck hinterlässt.
• Abschrecken potenzieller Kunden . Wenn dein Favicon veraltet, verschwommen oder körnig erscheint, könnten Benutzer dich für nicht professionell halten oder dich nicht ernst nehmen, was zu einem Verlust an Web-Traffic, Verkäufen und letztlich an Gesamtumsatz führen kann.

So erstellst du ein Favicon

Ein Favicon zu erstellen ist einfach, besonders mit der heutigen Technologie. Du benötigst dafür zunächst einen Internetzugang und eine Grafikdesign-Software, die dein Symbol auf die passende Größe skalieren kann.

Um loszulegen, befolge die untenstehenden Richtlinien zur Erstellung von Favicons:

1. Überlege dir, welches Bild du für dein Favicon verwenden möchtest. Nimmst du das Standardlogo deiner Marke dafür oder eine besondere Version des Logos?
2. Überlege dir, wo dein Favicon angezeigt wird. Wenn dein E-Commerce-Shop beispielsweise keine App hat, musst du dir keine Sorgen über die Anpassung der Größe deines Favicons für mobile Anwendungen auf Smartphones oder Tablets machen.
3. Wähle den Dateityp aus, den du für dein Favicon verwenden möchtest. Die gebräuchlichsten Dateitypen für Favicons sind heute Windows-ICO-Dateien, SVG-Dateien, PNG-Dateien und GIFs. Erkundige dich bei deinem Webhost, ob es Einschränkungen bei der Auswahl deiner bevorzugten Dateitypen gibt.
4. Mach das Favicon-Upload-Skript deines Webhosts ausfindig, um das Bild hochzuladen, das du konvertieren und als Favicon deiner Website verwenden möchtest. Du kannst auch einen Drittanbieter mit dem Erstellen und Hochladen einer Favicon-Datei beauftragen, die auf deinem Webserver gespeichert und hochgeladen werden kann.
5. Lade dein Favicon mit der passenden Methode hoch, die von den Host- und Favicon-Einstellungen deiner Website oder App abhängt.

Best Practice hinsichtlich Favicons

Egal, ob du neu in der Webentwicklung bist oder aus Reputationsgründen ein professionelles Favicon integrieren möchtest – du solltest beim Umgang mit Favicons die Regeln der Best Practice beachten, wie zum Beispiel:

• Es sollte erkennbar sein . Dein Favicon sollte so gestaltet sein, dass es auch aus der Ferne erkennbar bleibt. Da dein Favicon deutlich kleiner sein wird als die meisten herkömmlichen Logos, ist es am besten, eine verkleinerte und vereinfachte Version deines Logos zu verwenden, wenn dieses eher komplex und bunt ist.
• Weniger ist mehr . Vermeide komplexen Text oder komplizierte Linien bei Favicons, insbesondere wenn du die kleinste Größe benötigst.
• Konzentriere dich auf das Branding . Wenn du dein Favicon erstellst, überlege, wie es von aktuellen Followern und Benutzern, die deine Website zum ersten Mal besuchen, wahrgenommen und interpretiert wird. Das Favicon sollte mit deinen aktuellen Stilrichtlinien deiner Marke übereinstimmen.
• Verwende einen transparenten Hintergrund . Es wird dringend empfohlen, ein transparentes Logo zur Erstellung deiner Favicon-Datei zu verwenden, da Favicons mit Hintergrundfarben veraltet oder für manche zu ablenkend erscheinen können. Transparente Favicons sind auch viel universeller und können fast überall hochgeladen und geteilt werden, ohne die Hintergrundfarben einer Website, eines Browsers oder eines Geräts zu beeinträchtigen.

Solltest du ein Favicon verwenden?

Die Verwendung eines Favicons wird dringend empfohlen, egal ob du eine persönliche Website, eine Website für dein lokales Unternehmen oder sogar eine Online-Präsenz für eine internationale Marke aufbaust. Jeder, der heute eine Website hat, sollte ein Favicon verwenden, da es bei Folgendem hilfreich ist:

• Markentreue . Wenn eines deiner Ziele darin besteht, Markentreue aufzubauen, ist es eine großartige Idee, ein Favicon zu verwenden. Favicons helfen dir, in jeder Branche und auf jedem Markt eine Botschaft der Authentizität, Glaubwürdigkeit und Professionalität zu vermitteln. Außerdem wird Besuchern jedes Mal, wenn sie auf deine Website zugreifen, dein Favicon angezeigt, wodurch sie sich im Laufe der Zeit an deine Marke erinnern.
• Suchvorschläge . Immer wenn ein Benutzer nach Informationen sucht, die dazu führen, dass die URL deiner Website in einem Webbrowser erscheint, wird auch dein Favicon neben dem Titel deiner Website angezeigt. Dies kann noch mehr Traffic auf deiner Website generieren.
• Suchergebnisse . Wenn deine Website in den Suchergebnissen einer Seite erscheint, nachdem ein Benutzer seine Suchanfrage eingegeben hat, wird dein Favicon ebenfalls geladen und angezeigt. Ein visuell ansprechendes Logo und Favicon können Benutzer dazu motivieren, mehr über deine Website herauszufinden.
• Browser-Verlauf . Wenn du ein Favicon verwendest, erscheint es im Browserverlauf deiner Benutzer. Dadurch können sie deine Website erheblich einfacher wiederfinden. Dies ist auch für langfristige Branding-Zwecke ein nützliches Tool.

Verwende Favicons, um deine Online-Präsenz aufzubauen

Die Verwendung von Favicons ist nichts Neues, aber sie sind beim Aufbau einer Online-Präsenz in allen Branchen äußerst nützlich. Egal, ob du ein persönliches Portfolio erstellst, ein lokales Start-up gründest oder Besucher aus der ganzen Welt auf deine Website locken möchtest: Ein Favicon kann erheblich dazu beitragen, die Identität deiner Marke zu etablieren und dein Angebot bekannt zu machen.

Wenn du eine einfache Möglichkeit suchst, Favicons in eine Website, einen E-Mail-Newsletter und Marketingkampagnen zu integrieren, wende dich an Mailchimp. Mailchimp bietet eine zugängliche All-in-one-Lösung zur Verwaltung deiner Online-Präsenz und der Favicons, die du für Newsletter-E-Mails, Marketingkampagnen und offizielle Websites verwendest.