Favicon für WordPress – Erstellen und Einrichten

Beim surfen durch das Internet sieht man auf den Browser-Registerkarten links ein kleines Symbol. Das nennt man Favicon. 99,99 % aller Webseiten nutzen Favicons, damit ihre Seite unverwechselbar ist.

In diesem Tutorial werde ich erklären was ein Favicon ist und wie man es in WordPress richtig einrichtet.

Was ist ein Favicon?

Ein Favicon ist das Favoriten-Symbol des Webbrowsers. Es wird auf der Registerkarte angezeigt und dient gleichzeitig als Lesezeichen-Symbol unserer Seite.  Es erscheint stets links vom Webseiten-Namen. Diese kleine quadratische Bilddatei hilft dem Leser unsere Webseite und Marke zu erkennen.

Für uns ist es eine tolle Möglichkeit, ein kleines Logo zu platzieren. Insbesondere bei Pinterest kann man mühelos erkennen, wie schnell man das kleine Bildchen erkennt.

Es muss kein durchgestyltes Logo sein, dass man als Website-Icon verwendet. Hierbei gilt um so einfacher um so besser.

Der große Vorteil von Favicons ist der Wiedererkennungswert. Auch wenn noch so viele Browserfenster geöffnet sind wird es stets auf der Registerkarte angezeigt. Ähnliches gilt für Lesezeichen. In der Bookmark-Liste ist das kleine Icon immer präsent und sorgt für den perfekten Wiedererkennungseffekt.

Keine Seite kommt heute ohne Favicon aus.  Besonders bekannte Beispiele sind z. B. Google, Pinterest, Bild und Ebay.

Favicon Beispiele für WordPress

Bereits 1999 wurde das Favicon von Microsoft eingeführt und zunächst nur im Internet Explorer 5 unterstützt. Heute verwenden alle Browser das Favicon. Egal ob Smartphone, Tabletts oder PC jede Plattform benötigt ein Favivon.

Wie erstellt man ein Favicon für WordPress?

Die Erstellung und Einbindung ist einfach und man benötigt keinen Entwickler. Über ein Grafikprogramm wie Gravit Designer, Photoshop oder Gimp kann man es mühelos erstellen. Eine Online-Bildbearbeitung wie Canva ist selbstverständlich ebenso geeignet

Die Grundlage ist ein quadratisches Bild das über den WordPress Customizer eingebunden wird. Die ideale Größe ist 512 x 512 Pixel. Man kann wahlweise ein PNG oder JPG verwenden. PNG ist jedoch für die Speicherung von Grafiken besser geeignet. Das JPG-Format verwendet man vorwiegend für Bilder.

Seit der Veröffentlichung von WordPress 4.3 kann man das Favicon direkt im WordPress-Dashboard hochladen.  Es ist jedes quadratische Bild von einer Größe bis zu 512 x 512 Pixel geeignet. Im Hinblick auf die Ladezeit der Seite sollte die Datei nicht zu groß sein. Deshalb ist es besser eine schnörkelllose Webgrafik zu verwenden.

Geeignet sind kleine Logos wenigen Details. Es sollte ein einfaches aber einprägsames Icon werden.

Bevor man sich den Kopf über ein zu kompliziertes Bild zerbricht sollte man mit einfachen Motiven arbeiten. Dies kann ein Kreis oder Rechteck sein. Es kann z. B. den Anfangsbuchstaben der Marke enthalten oder ein Bildsymbol wie ein Herz.

Arbeitet man z. B. mit Canva oder Gravit Designer findet man eine Menge Symbole in den Bibliotheken. Alternativ ist eine Schriftart mit Bildsymbolen geeignet. Schriften wie Wingdings und Webdings sind bei Mac und Windows verfügbar.

Beispiele für Favicons

Auf keinen Fall darf man ein bekanntes Favicon einer Marke kopieren. Auch wenn es noch so verlockend erscheint ist der Urheberschutz zu beachten.

Favicon erstellen

Für Webgrafiken verwende ich das kostenlose Grafikprogramm Gravit Designer. Es ist für Windows und Mac verfügbar. Ich mag es, weil es intuitiv und einfach zu bedienen ist. Wer bereits mit anderen Programmen gearbeitet hat wird sich schnell zurechtfinden. Zum Herunterladen besucht man die Homepage von Gravit Designer besuchen.

Neben Favicons eignet es sich hervorragend für die Erstellung von Social Media Posts. Für Dienste wie Facebook, Pinterest und Instagram bringt Gravit eine Menge pfiffige Templates mit.

Für ein Favicon in Gravit braucht man nicht mehr als 5 Minuten. Die Dokumentengröße stellen wir hierzu auf 512 x 512 Pixel ein.

Favicon 512 Pixel gross erstellen

Wer kein eigenes Favicon zeichnen möchte, findet in der Library von Gravit eine Menge geeigneter Symbole. Der Umfang reich von einfachen Grafiken wie z. B. einem Herz bis zu Sportsymbolen.

Beispiele Gravit Designer Icons

Zieht man aus linken Seitenleiste ein Icon in den Arbeitsbereich, müssen wir es anschliessend vergrößern. Es sollte fast vollständig den Arbeitsbereich ausfüllen.

Favicon erstellen mit Grafikprogramm

Alle Farben des Icons können wir an unsere eigenen Wünsche anpassen. Hierzu das Icon anklicken und über die rechte Maustaste zuerst „ungroup“ auswählen.

Nun markiert man den Bereich, den man bearbeiten möchte. In der rechten Seitenleiste kann man jetzt über die Farbwahlfelder alle Farben verändern.

Favicon speichern

Zum Speichern des Favicons wählen wir über das Menü die Exportfunktion. Damit gelangen wir zu weiteren Einstellungen zum Speichern unserer Datei.

Favicon speichen im richtigen Format

Für einen optimalen Export wählen wir

  • Format: PNG
  • Size: 1x
  • Background: transparent.

Die Transparenz ist besonders wichtig für Icons die nicht den kompletten Arbeitsbereich ausfüllen.

Wir das Bild mit einem sichtbaren Hintergrund exportiert, wird er im Browser angezeigt. In diesem Fall ist die weiße Füllfarbe äusserst störend.

Favicon als PNG exportieren

Favicon in WordPress einbinden

Zum Verknüpfen des Favicons rufen wir im unserem WordPress-Admin den Customizer auf und wählen „Website-Informationen“. Unten links befindet sich die Funktion zum Verknüpfen des Website-Icon.

Um unser Favicon in WordPress zu veknüpfen wählt man „Bild auswählen“ und lädt die Datei hoch.

Website-Icon einbinden

Nach einen kurzen Moment wird die Ansicht aktualisiert und die Vorschau des neuen Favicons wird angezeigt.

Website-Icon in WordPress hochladen

Zum Schluss müssen wir das neue Favicon veröffentlichen. Sobald dieser Schritt abgeschlossen ist zeigt auch der Reiter das das Icon.

Neues Favicon fuer WordPress

Ein Favicon für alle Browser

Mit dem Hochladen des Favicons die Einrichtung noch nicht abgeschlossen. Um wirklich allen Browsern ein Website-Icon zur Verfügung zu stellen müssen wir noch etwas mehr tun.

Dies kann man manuell machen über individuelle Icons und Codezeilen die wir in die header.php einfügen.

Eleganter und leichter geht es mit einem Plugin.

Das Ziel ist ein kompatibles Favicon für alle Browser. Die unterschiedlichen Plattformen sind:

  • Windows (IE, Chrome, Firefox, Opera, Safari)
  • Mac (Safari, Chrome, Firefox, Opera, Camino)
  • iOS (Safari, Chrome, Coast)
  • Android (Chrome, Firefox)
  • Surface (IE)

Meine Empfehlung ist das Wordpress-Plugin: Favicon by RealFaviconGenerator das genau diese Arbeit übernimmt.

Wir installieren und aktivieren es über den WordPress-Admin.

Favicon Plugin WordPress installieren

Konfiguration Favicon by RealFaviconGenerator

Nach der Aktivierung des Plugins müssen wir über Plugins -> Favicon müssen wir noch eine Einstellung vornehmen, bevor es richtig arbeiten kann

Dazu ruft man den Link zum Hinterlegen des Favicons auf. Er befindet sich im oberen Bereich der Konfiguration.

Favicon Plugin einrichten

An dieser Stelle hinterlegen wir unser zuvor erstelltes Favicon. Ist es bereits hochgeladen müssen wir es nur noch aus der Mediathek verknüpfen.

Favicon in WordPress verknüpfen

Anschließend wird die Generierung der Favicons über „Generate favicon“ angestossen. Der Browse leitet uns zu einem Generator weiter.

Favicon Generator

Der Generator übernimmt die Erstellung der Website-Icons für die jeweilige Plattform wie z. B. Apple und Android. Man bekommt die Möglichkeit die Darstellung des Favicons bei Bedarf anzupassen.

Ist die Konfiguration abgeschlossen startet man die Übertragung mit dem Button „Generate your Favicons and HTML code“.

Ist die Generierung erfolgreich verlaufen wird man zur eigenen WordPress-Installation zurückgeleitet. Die neuen Formate unseres Favicons werden automatisch im Hintergrund in unser WordPress übertragen.

Erfolgmeldung generiertes Favicon

Mir gefällt das Plugin, weil es keine Anpassungen im Code des WordPress-Themes erfordert. Durch die automatische Generierung bleibt uns viel manuelle Arbeit erspart.

Zusätzlich bleiben bei einem Update oder Thema-Wechsel alle Einstellungen erhalten

Standardbild

Bettina

Hi, ich bin Bettina Müller und freue mich über Deinen Besuch. Ich bin Freelancer für Social-Media, Wordpress, SEO und berate Blogger und Unternehmen.

Schreibe einen Kommentar