Das WordPress FavIcon – So erstellt und bindet es Ihr ein

Das Favicon ist einer der kleineren Schritt auf dem Weg zu einer Webseiten, fehlen sollte die kleine Grafik vorm dem Titel Feld jedoch nirgends. Wie dies in WordPress realisiert wird erfahrt Ihr hier.

Die quadratische Grafik ist meist 16×16 oder 32×32 Pixel groß und bringt etwas Individualität bei den Tabs im Browsers.
Als Format findet wir neben dem Standard Form Ico auch gif und png Formate.

Warum brauche ich ein FavIcon?

Wiedererkennung & branding

Wie in der klassischen Werbung dienen Logos dazu einen Wiedererkennungswert für eine Marke oder in diesem Fall einer Webseite zu schaffen. Das Logo wird in jedem Tab, welche unserer Seite lädt angezeigt und fördert zudem die Übersichtlichkeit innerhalb der Tabs in unserem Browser

Bookmark

Ich selbst bin ein großer Freund von Bookmarks direkt in der Hauptansicht. Wenn eine Webseite ein Favicon ausliefert kann ich die Bezeichnung kürzen und haben trotzdem einen genauen Bezug. Ohne die Bezeichnung kann ich sehr viele Webseiten handlich bookmarken und effizienter Arbeiten. Haben manche Seiten kein FavIcon kann es ein Grundsein warum dieser Bookmark früher oder später wieder verschwindet.

Ein Ausschnitt meiner Bookmarkliste ohne Beschreibung nur mit Icon
Ein Ausschnitt meiner Bookmarkliste ohne Beschreibung nur mit Icon

Wo bekomme ich das FavIcon her?

Die Grafik kann mit einem beliebigen Grafikprogramm erstellt werden oder in einem Online Editor. Wer den ersten Weg wählt wird schnell merken, dass er nur selten direkt ein .ico Datei erhalten wird. Aus diesem Grund hilft ein FavIcon Konverter um aus normalen Grafiken ein Icon zu erhalten.

2 Wege zum einfügen

Das Favicon kann auf 2 verschiedenen Wegen eingebunden werden.

FavIcon im Root Verzeichnis

Das Root Verzeichnis ist das Verzeichnis direkt unter eurer Domain, zu kompliziert? Ich mache ein Beispiel.


www.euerblog.de/favicon.ico

So hinterlegte Dateien sollen automatisch vom Browser erkannt und anzeigt werden. Ich selbst mache dies nicht so und mache es wie in Variante 2 beschrieben.

FavIcon im Header

Über eine zusätzliche Zeile kann das Icon direkt auf jeder Seite definiert werden dazu ist nur eine simple Anweisung notwendig.


<link rel="icon" href="http://www.euerblog.de/favicon.ico" type="image/x-icon">

Sollte ein PNG oder GIF genutzt werden sieht die Deklaration so aus:


GIF:
<link rel="icon" href="http://www.euerblog.de/favicon.gif" type="image/gif">

PNG:
<link rel="icon" href="http://www.euerblog.de/favicon.png" type=" image/png">

Einbau in WordPress

Um das Favicon in WordPress richtig zu hinterlegen kann wie in Variante 1 die Datei im Root Verzeichnis hinterlegt werden
Da ich Variante 2 bevorzuge nutze ich die Zeile wie gerade beschrieben. Ich selbst hinterlege jedoch das Favicon in das Theme selbst oder innerhalb der Mediathek.

Einbau per Theme

Dazu muss die Grafik in das aktive Theme gelegt werden.
anschließend muss diese Zeile in die header.php eingefügt werden


<link rel="icon" href="<?php echo get_bloginfo('template_directory').'/favicon.ico'; ?>" type=" image/png">

Einbau per Mediathek

Icon Datei in der Mediathek hinterlegen und Pfad kopieren
Icon Datei in der Mediathek hinterlegen und Pfad kopieren

Bei dieser Variante legt Ihr die Datei über die Mediathek an. Nachdem Ihr das Bild hochgeladen habt findet Ihr bei den Details den direkten Link zur Datei. Diesen kopieren wir und kürzen diesen ein.


<link rel="icon" href="/wp-content/uploads/2013/12/icon.ico" type="image/x-icon">

Autor: Marcus

Ich bin einer von zwei Geschäftsführern der Conversion Junkies. Zu meinen Themenschwerpunkten gehört das technische SEO, Entwicklungen im E-Commerce und Programmierung von Shopware und WordPress Plugins. Dieses Wissen gebe ich in Schulungen und Consultings gern weiter. Nutzen Sie die Kommentarfunktion für Ihre Fragen. Ich antworte darauf gern. Oder schreiben Sie mir eine E-Mail an marcus@conversion-junkies.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage einverstanden (Datenschutzbedingungen)