Favicon: klein aber oho!

von Marlien Kastner

 | 

28.06.2022

 | 

SEO Wiki

Was ist ein Favicon?

Great things come in small packages! Und so ist es auch mit Favicons. Die kleinen Zeichen haben eine große Wirkung und ihre Bedeutung war nie größer. Worum es sich bei dem Kofferwort Favicon handelt und warum Du unbedingt eines dieser kleinen Symbole für Deine Webseite brauchst, zeigen wir Dir hier!

Was sind Favicons?

Das Wort Favicon ist ein sogenanntes Kofferwort und setzt sich aus den englischen Begriffen „favorite“ und „icon“ zusammen. Favicon kann auf Deutsch als Lieblingssymbol übersetzt werden. Die Favicons wurden erstmals 1999 mit dem Internet Explorer von Microsoft ins Leben gerufen. Es handelt sich um die kleinen Icons, Logos oder Symbole, die Webseiten verwenden, um an Wiedererkennungswert im Webbrowser und einer höheren Aufmerksamkeit der User zu gewinnen. Die Symbole haben eine Größe von 16×16 oder 32×32 Pixel und werden unter anderem in den Tabs (Registerkarten), der Favoritenliste des Browsers und in der Lesezeichenliste (Favoriten) angezeigt. Auch als App-Symbole werden die kleinen Icons verwendet und auf mobilen Geräten angezeigt. Aufgrund ihrer Größe sind einfache Bilder oder eine Buchstabenkombination von bis zu drei Zeichen am besten geeignet. 

Wozu dient ein Favicon?

Ein Favicon ist ein Teil des Brandings jeder Unternehmenswebseite, der zu einem professionellen Web-Auftritt des Unternehmens gehört. Mit den Icons verschafft man der Webseite einen höheren Wiedererkennungswert und ermöglicht eine schnelle und einfache Identifizierung der Seite für den Nutzer. Die grafische Markierung der Webseite wird besser von dem Gehirn aufgenommen und bietet eine strukturierte und übersichtliche Handhabung für den Web-User. Besonders nützlich sind die Symbole auf Tablet- und Smartphone-Displays, sowie auf anderen mobilen Endgeräten.

// Du willst Dein Wissen vertiefen?

SEO Blog der SEo Agentur

Blog

Alles rund ums Online Marketing.

> zum Blog

SEO WIKI der SEO Agentur H&W

SEO WIKI

Unser Online Marketing Glossar.

> zur WIKI

H&W//SEO-Agentur Podcast

Podcast

Online Marketing Podcast

> zum Podcast

Wie erstelle ich ein gutes Favicon?

Um ein gutes Favicon zu erstellen, gibt es einige Kriterien, die man berücksichtigen muss, denn die kleine Grafik soll eine große Wirkung haben. Das Ziel ist es, eine visuelle Verbindung mit der Marke für den Nutzer zu schaffen. Hier zeigen wir Dir einige Faktoren, die Dir helfen, Dein Favicon zu erstellen.

Farbe

Die Wahl der Farbe für Dein Favicon ist wichtig. Mit der Verwendung von Kontrastfarben ist es leichter relevante Formen und Zeichen für den User hervorzuheben. Eine Signalfarbe ist sehr auffällig, aber Dein Favicon sollte zu Deiner Marke passen. Aufgrund der geringen Größe des Symbols kann nicht mit viel Form gearbeitet werden, die Farbwahl ist somit ein entscheidender Faktor.

Einfach und unkompliziert

Das Favicon sollte so einfach wie möglich gestaltet werden. Die geringe Fläche lässt nicht viel Spielraum zu und wirkt schnell überladen. Zu viele Einzelheiten wirken schnell chaotisch und unruhig. 

Branding

In das Favicon sollte Deine Markenidentität mit eingebunden werden. Versuche zu zeigen, worum es bei Deinem Unternehmen geht. Da das oft sehr schwer ist, muss man hier kreativ werden. Tipp: Finde ein Wort, das das Unternehmen beschreibt und erarbeite Dir daraus Dein Zeichen. Kreativität und Einzigartigkeit zahlt sich beim Favicon aus.

Abkürzungen

Wenn ein Bild oder eine grafische Darstellung nicht zu Deinem Unternehmen passt, ist die Verwendung von Akronymen oder dem Anfangsbuchstaben eine gute Lösung für Dein Favicon. Probiere einfach aus, welche Variation am besten aussieht und für Dein Unternehmen passt.

    Hau Dir was auf die Ohren!

    Lerne wie Du digitale Stratgien für Dich und Dein Unternehmen erfolgreich einsetzt. Hole Dir jede Menge Input für Deine Projekte im Online Marketing.

    SEO Freelancer geht ab wie eine Bombe

    Sind Favicons SEO-relevant?

    Die Favicons zählen zwar nicht zu den direkten Faktoren der Suchmaschinenoptimierung, sind aber dennoch ein Teil, der zur Verbesserung des Rankings in den Suchmaschinen gehört. Du fragst Dich, wie ein Favicon der Positionierung Deiner Webseite helfen kann? Wir zeigen es Dir: 

    • Sichtbarkeit

    Ein Favicon ist eine grafische Darstellung Deiner Webseite und Deines Unternehmens. Der Wiedererkennungswert wird gesteigert und damit auch die Sichtbarkeit. Mit der steigenden Sichtbarkeit steigen auch die Klicks auf die Seite.

    • Branding

    Die visuelle Kennzeichnung Deiner Webseite gehört zu den Branding- und Marketing-Strategien und somit auch zur SEO. Der Benutzer verbindet das Favicon mit Deiner Marke und erkennt es wieder. 

    • Stärkere Nutzung durch benutzerfreundliche Webseiten

    Die Benutzerfreundlichkeit einer Webseite ist ein indirekter Einfluss auf das Ranking in den Suchergebnissen. Mit einem Favicon auf Lesezeichen, Tabs, Verlaufsarchiven, etc. kann der User die Webseite schneller identifizieren und finden. Das erspart Zeit und erleichtert das Browsen für den Benutzer. Zusätzlich wird die Interaktion durch das schnelle Wiederfinden der Seite, erhöht und mehr Nutzer nehmen Deine Webseite wahr.

    • Das Favicon als Lesezeichen

    Google Chrome versetzt häufig aufgerufene Seiten mit Lesezeichen. Dabei spielt auch eine Rolle, ob die Webseite mit einem Favicon versehen ist oder nicht. Mit Favicon-Lesezeichen sticht eine Seite visuell hervor und wird dadurch öfter aufgerufen. Der zunehmende Traffic hat Einfluss auf die SEO.

    Jetzt mit Online Marketing durchstarten.

    Steigere Deine Performance durch mehr Sichtbarkeit und Vertrauen in Deine Brand.

    Was ist ein Online Favicon Generator?

    Mit einem Favicon Generator ist es dem User möglich, ganz einfach sein individuelles Favicon erstellen zu lassen. Hier wird eine Bilddatei in eine ICO- oder PNG-Datei umgewandelt. Mit dem Herunterladen der ZIP-Datei lässt sich die kleine Grafik auf Deine Webseite einfügen. Im Web findest Du das Angebot zahlreicher kostenloser und kostenpflichtiger Generatoren. Hier ist es wichtig immer auf den neuesten Stand der Generatoren zu achten, um für die aktuellen Techniken von HTML5-, CSS- und JavaScript verwendbar zu sein. Ein Generator hilft als Werkzeug für das schnelle und unkomplizierte Erstellen und Generieren des Favicons für HTML.

    Wir zeigen Dir hier zwei tolle und kostenfreie Favicon-Generatoren, mit denen Dein Favicon ein Hingucker wird:

    Der Hoststar Favicon Generator bietet Dir eine super simple und kostenfreie Möglichkeit Dein Favicon zu erstellen. Ob Logo oder Buchstaben, mit diesem Programm lässt sich Dein Design schnell umsetzen und in die Domain einbinden.

    Mit Zyro kannst Du Dein gewünschtes Design oder eines der vielen bereitgestellten Grafiken aus dem Generator verwenden. Das Layout kann leicht bearbeitet werden, nach Wunsch kann ein Text hinzugefügt werden.  

    Wie funktioniert das Hochladen des Favicons auf Deine Webseite?

    Wenn das Design Deines Favicons feststeht, kann es nun an das Einbinden des Symbols auf Deiner Webseite gehen. Eine Möglichkeit ist es, die ICO-Datei im Hauptverzeichnis der Domain Deiner Webseite unter dem Namen „favicon.ico“ zu speichern. Es gibt allerdings Browser, mit denen das nicht geht und deshalb ist der beste Weg, das Favicon in ein HTML-Element einzubinden.

    Einbinden in ein HTML-Element

    Die Datei muss zwar nicht den Namen favicon.ico beinhalten, aber dennoch zunächst referenziert werden. Dazu musst Du bestimmte Code-Zeilen im Head Bereich des HTML-Elements Deiner Webseite hinzufügen. Je nach Dateiformat unterscheidet sich die benötigte Code-Zeile. Wir zeigen Dir, welchen Code Du wann brauchst:

    • ICO – Dateiformat

    <link rel=“icon“ type=“image/vnd.microsoft.icon“ href=“(PFADANGABE/DATEINAME.ico“>

    • PNG – Dateiformat

    <link rel=“icon“ type=“image/png“ href=“(PFADANGABE/DATEINAME.png“>

    • GIF – Dateiformat

    <link rel=“icon“ type=“image/gif“ href=“(PFADANGABE/DATEINAME.gif“>

    Achte darauf, den Pfadnamen und den Namen der Datei korrekt zu schreiben. 

    Jetzt mit Online Marketing durchstarten

    Nutze Online Marketing um Deine Zielgruppen zu erreichen und mit Deinem Unternehmen zu wachsen.

    SEO Rakete

    Welche Bildformate eignen sich für die Verwendung von Favicons?

    Portable Network Graphics (PNG)

    Das PNG-Format eignet sich sehr gut für Favicons. Allerdings gibt es einen Nachteil: Internet Explorer unterstützt die PNG-Datei nicht.

    Windows ICO

    Windows ICO kann mehrere Bittiefen und verschiedene Auflösungen enthalten und ist das am häufigsten unterstützte Dateiformat. 

    Scalable Vector Graphics (SVG)

    Dieses Format wird von Opera und einigen anderen Browsern unterstützt.

    Joint Photographic Experts Group (JPG)

    JPG Dateiformate können überall verwendet werden. Hört sich super an, oder? Allerdings gibt es einen Nachteil, denn die Auflösung ist geringer als bei einem PNG-Format.

    Graphics Interchange Format (GIF)

    GIFs versprechen zwar mehr Aufmerksamkeit, aber genau diese kann sich negativ auf Deine Webseite auswirken. Die animierten Grafiken neigen dazu den User zu irritieren und das Favicon samt Deiner Webseite von seinem Bildschirm zu schmeißen.

    Welche Größe hat ein Favicon?

    Im Normalfall besitzen Favicons ein Format von 16×16 oder 32×32 Pixel und können so in allen Browsern verwendet werden. Es gibt allerdings Ausnahmen, die auch verwendet werden können. Welche das sind, zeigen wir Dir im Folgenden:

    • 32 x 32 Pixel – Neue Registerkarte Internet Explorer
    • 57 x 57 Pixel – IOS – Startbildschirm für iPhone bis 3G und iPod Touch
    • 24 x 24 Pixel – Internet Explorer 9
    • 72 x 72 Pixel – iPad Startbildschirm-Icon 
    • 96 x 96 Pixel – Google TV
    • 195 x 195 Pixel – Opera Kurzwahl
    • 128 x 128 Pixel – Chrome Webstore

    Zusammenfassung: Favicon

    Die Bedeutung von Favicons ist in den letzten Jahren sehr gestiegen und damit sind Favicons ein wichtiges Tool für den Wiedererkennungswert Deiner Webseite und Dein Branding (Markenbildung). Der große Vorteil der kleinen Symbole liegt in der Usability. Favicons bieten, dank der verbesserten Übersichtlichkeit, einen hohen Mehrwert für den User. Dieser Benutzer-Mehrwert zahlt sich auch für Dein Unternehmen aus, denn er hat einen indirekten Einfluss auf die Platzierung Deiner Webseite in den Suchergebnissen. Mittlerweile gibt einen sehr einfachen Weg für gute Favicons: Favicon-Generatoren! Komplizierte Bildbearbeitung-Softwares sind also überflüssig. Ein Favicon ist ein absolutes Muss für Deine Webseite. Für das kleine Zeichen gilt: weniger ist mehr! Einzigartigkeit und Kreativität stehen dennoch an erster Stelle.

    Marlien Felicitas Kastner

    SEO//Content Creator

    Als Grafikdesign Studentin gehören sowohl visuelle Kompositionen als auch Marketing und Texten zu den Interessen von Marlien. Individueller und hochwertiger Content ein absolutes Muss für sie. Sie sagt "Gafikdesign gibt der welt erst Inhalt Form & Farbe." Mit ihrer Arbeit bei H&W kann sie ihre sprachlichen und visuellen Know-hows zum Einsatz bringen. Die täglich unterschiedlichen Aufgaben und Herausforderungen sind für sie besonders spannend.