Favicon - ein kleines Symbolbild, das auf keiner Webseite fehlen darf

Dieses kleine Icon ist in der Internetumgebung viel wichtiger, als es auf den ersten Blick scheint. Es taucht im Browser-Fenster, in der Lesezeichen-Symbolleiste, in den Suchergebnissen von Suchmaschinen oder im Browser-Verlauf auf und damit endet die Aufzählung noch lange nicht. Wofür es gut ist, wie man es erstellt und in die Webseiten einbindet, erfahren Sie in diesem Beitrag.

Was ist ein Favicon?

Ein Favicon (aus dem Englischen „Favorite icon“ also ein Favoriten-Symbol) ist ein kleines Symbol, das im Browser neben dem Titel Ihrer Webseite erscheint, meistens ist es ein Minaturbild des Logos. Es hilft Besuchern auf den ersten Blick Ihre Webseite zu erkennen. Ursprünglich sollte es zur besseren Übersichtlichkeit der Webseiten dienen, die man als Lesezeichen abgespeichert hat. Sie können es über der Browser-Adresszeile in den geöffneten Seiten-Tabs, Lesezeichen, im Browser-Verlauf und in den Suchergebnissen diverser Online-Suchmaschinen sehen.

Záložky

Beim Favicon handelt es sich also um ein wichtiges, grafisches Element der Webseite, das den Wiedererkennungswert und die Benutzerfreundlichkeit Ihrer Webseite steigert und für die Übersichtlichkeit sorgt. Ein Favicon ist in der Regel 16x16 Pixel groß.

Ein markantes Favicon erhöht den Wiedererkennungswert Ihrer Webseite

Bei modernen Browsern wird die Suche im Internet über Browser-Tabs organisiert und so kann es schon mal passieren, dass sich in einem geöffneten Fenster einige Dutzend verschiedener Tabs ansammeln. Favicons dienen dann als visuelle Orientierungshilfe und sorgen dafür, dass Sie zwischen gerade geöffneten Webseiten schnell und zielgenau wechseln können. Wenn Sie sich Ihren Browserverlauf anschauen, werden in den meistbenutzten Browsern neben der Adresse und dem Titel der Seite auch ein Favicon angezeigt. Das Gleiche gilt für die Lesezeichenleiste.

Záložky A24

Das Favicon ist auch für SEO wichtig - es wird von Suchmaschinen verwendet

Die Favicons werden von Suchmaschinen positiv bewertet und tragen zur Suchmaschinenoptimierung (SEO) bei. In den Suchergebnissen (SERP) von Google werden die Favicons zurzeit nicht angezeigt aber viele andere Suchmaschinen berücksichtigen sie um so mehr, so z.B. die immer beliebtere „DuckDuckgo.com”.

Wie man ein Favicon in Wordpress einbindet

Der einfachste Weg - über das Wordpress-Backend, direkt in den WP-Einstellungen

Sie finden diese Einstellungen unter: „Design” » „Customizer”, wählen Sie den oberen Menüpunkt „Website Informationen”, laden Sie z.B. eine PNG-Datei Ihres Favicons hoch, speichern und veröffentlichen Sie die Einstellungen. Die empfohlene Bildgröße beträgt dabei 512 × 512 Pixel. Sollte das Favicon nicht sofort im Fenster-Tab erscheinen, löschen Sie Ihren Browser-Cache, damit die Webseite neu lädt.

Der sicherste Weg – über die Code-Verlinkung im Header.php

Die meisten Browser erkennen die Favicons automatisch aus dem Quellordner der Webseite, wenn sie im .ICO-Format vorliegen. Aber neben .ICO können Sie auch ein .GIF- oder .PNG-Format nutzen und einen individuellen Dateinamen verwenden. Die andersformatige Datei müssten Sie dann allerdings noch im Code in der Datei „header.php” verlinken.

Laden Sie zuerst Ihr Favicon per FTP-Zugriff in das Hauptverzeichnis Ihrer Wordpress-Installation hoch (dasselbe Verzeichnis, wo Ihre „wp-admin” und „wp-content” Ordner liegen). Sie können dazu ein FTP-Programm wie z.B. Total Commander, FileZilla oder unseren Online-FTP-Manger verwenden. In der Datei „header.php” müssen Sie jetzt nur noch folgenden Code zwischen den Head-Zeilen einfügen: 

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Achten Sie darauf, dass Sie sowohl den Pfad als auch den Dateinamen korrekt angegeben. Um die Datei „header.php” zu bearbeiten, können Sie auch den Editor von WordPress nutzen und die Änderung direkt über das Dashboard vornehmen. Sie finden diese Möglichkeit im Dashboard unter: „Design” » „Editor” und dann die entsprechende Datei (header.php) auswählen.

Wie erstellt man ein Favicon?

Das Favicon kann im Prinzip mit jedem Bildbearbeitungsprogramm z.B. GIMP oder Photoshop erstellt werden. Wichtig ist, dass es nachher im .ico-Format mit der Auflösung von 16 × 16 Pixel vorliegt, dann wird es von den meisten Browsern automatisch erkannt. Für die Umwandlung der Datei können Sie einen der zahlreichen, kostenlosen Favicon-Generatoren zu Hilfe nehmen. Man lädt hier einfach die selbst erstellte Grafik bzw. das eigene Logo hoch und lässt daraus eine fertige .ico-Datei generieren.

Google

Die ideale Basis für ein Favicon ist ein Logo im PNG- oder JPEG-Format. Denn gerade das Logo, gilt als ein wichtiges Element der Corporate Identity und wird von Ihren Besuchern gemerkt. Ob es sich nun um eine Firmenwebseite, einen Onlineshop oder einen Blog handelt, ein fertiges Logo liegt meistens bereits vor und eben das können Sie für Ihr Favicon ausnutzen.

Als Standardabmessung eines Favicons gelten 16 × 16 Pixel, aber viele Generatoren erstellen gleich eine ganze Reihe von verschiedenen anderen Größen. Denn dies ist aufgrund der Vielzahl unterscheidlicher Geräte und Systeme sehr wichtig. Aktiv eingesetzt werden sie zum Beispiel auf mobilen Anwendungen. Die gute Nachricht dabei ist, dass es für Sie praktisch keine zusätzliche Arbeit bedeutet.

Die beste Online-Favicon-Generatoren:

Generátor favicon

Und was tun, wenn Sie kein Logo oder kein geeignetes Bild haben? Wenn Sie kein Logo haben, können Sie ein Favicon auch von Anfang an in einem Favicon-Editor selbst erstellen. Zeichnen Sie Ihr Muster, wählen Sie die Schriftart und die Wunschfarbe aus und in wenigen Minuten haben Sie ein fertiges Favicon, bereit für den Einsatz.

Bewertung

Durchschnittsbewertung: 4.9/5

Bewertungen: 71