WordPress Favicon hinzufügen: So klappt’s

WordPress Favicon hinzufügen: So geht’s

Ein Favicon bringt Vorteile mit sich und ist vergleichsweise einfach zu erstellen. Wir zeigen dir, wie du dabei vorgehen solltest, warum es wichtig ist und wie du bei WordPress ein Favicon hinzufügen kannst.

Was ist ein Favicon?

Bevor wir uns mit den Vorteilen, dem Erstellen und dem Hinzufügen eines Favicon bei WordPress beschäftigen, sollte erst einmal klar sein, worum es sich überhaupt handelt.

Die gute Nachricht ist, dass du bereits jeden Tag mit mehreren Favicons konfrontiert wirst und sie daher bereits bestens kennst. Hast du gerade mehrere Tabs in deiner Browserleiste offen, kannst du direkt mehrere davon bewundern, denn:

Ein Favicon ist das Webseiten-Symbol (nicht die Beschriftung dahinter). Es erscheint also auf dem Tab und hilft dir somit bei der Orientierung, wenn die URL nicht sichtbar ist. Darüber hinaus kann es jedoch noch mehr leisten.

Vorteile eines WordPress Favicon

Das Favicon ist wichtig in Hinblick auf das Branding. Es erschafft einen Wiedererkennungswert deiner Website und erfüllt damit auch in Hinblick auf das Marketing eine wichtige Funktion.

Diesen Effekt kennst du mit Sicherheit bereits selbst, wenn du an einige der bekannten Grössen denkst. Ob Google, YouTube, Amazon oder Facebook – jeder erkennt die Symbole und kann sie entsprechend zuordnen. Den Namen zu lesen ist nicht mehr notwendig.

Im Idealfall erreichst du das mit deinem Favicon ebenfalls. Anfangs gibst du damit jedoch zumindest eine Orientierung, die sich unter anderem bei den bereits erwähnten Tabs bewähren kann.

Davon abgesehen hat es weitere Vorteile, bei WordPress ein Favicon hinzuzufügen. Bei diesen handelt es sich um:

• Nutzung als iOS-Symbol auf mobilen Geräten
• Vermittlung von Professionalität und Hochwertigkeit
• höherer Wiedererkennungswert
• Steigerung der Glaubwürdigkeit

Demgegenüber steht ein geringer Aufwand für die Gestaltung und das Einbinden des Favicons bei WordPress.

Wie wird ein WordPress Favicon erstellt?

Am einfachsten ist das Erstellen eines Favicons, wenn bereits ein Logo für dein Unternehmen oder deine Seite vorhanden ist. Du kannst das Logo in diesem Fall mit einem entsprechenden Generator in dein Favicon verwandeln.

Steht noch kein Symbol zur Verfügung, musst du kreativ werden und eine Grafik erstellen, die du als Favicon verwenden möchtest. Achte dabei auf die folgenden Punkte:

• optisch deutliche Unterschiede zu anderen Favicons
• auch im kleinen Format deutlich und gut erkennbar
• passend zum Unternehmen oder zum Image der Webseite
• auffallend und mit hohen Wiedererkennungswert

Dein Favicon wird Menschen im Gedächtnis bleiben. Daher solltest du mit der Grafik rundum zufrieden sein, bevor du sie verwendest.

Natürlich kannst du später noch Änderungen vornehmen und das Symbol abwandeln. Die Möglichkeit einer Aktualisierung hast du also jederzeit.

Das bedeutet jedoch in jedem Fall eine Umstellung für deine Leser oder Kunden, was zu Verwirrung und zumindest vorübergehend zu einem verringerten Wiedererkennungswert führen kann.

Abgesehen von der kreativen Seite gibt es beim Erstellen und Einfügen deines Favicons allerdings noch einige Punkte, die du berücksichtigen solltest.

Grösse des Favicons

Das Favicon wird quadratisch angezeigt. Wähle daher ein Motiv, das in diesem Format ansprechend aussieht.

Lege die Grösse bei 512 x 512 Pixeln fest, um eine hochwertige Qualität zu erhalten. Überprüfe zudem, ob deine Grafik als Quadrat den gewünschten Effekt hat.

Zudem benötigst du das passende Dateiformat. Verwende daher einen Generator.

Generator für das Favicon

Wenn du bei WordPress ein Favicon hinzufügen möchtest, musst du einige Faktoren bedenken. Dazu gehört unter anderem, dass das Symbol nicht nur auf dem Desktop, sondern auch auf mobilen Endgeräten angezeigt wird.

Die passenden Generatoren verwandeln deine Grafik in den entsprechenden Code, sodass du unabhängig von Smartphone, Laptop oder Tablet optimale Ergebnisse erzielst.

Geeignet sind hierfür:

• RealFaviconGenerator
• cc
• Favicon Generator

Folge bei dem Einsatz den jeweiligen Anleitungen. Im Grunde musst du jedoch bei allen lediglich eine Grafik hochladen oder erstellen und diese im gewünschten Format als Code ausgeben lassen.

Wähle dabei „ICO“ als Dateiendung beziehungsweise Dateiformat.

Quelle: https://realfavicongenerator.net/

Welche Grösse sollte das WordPress Favicon haben?

Wie bereits erwähnt, sollte es eine Grösse von 512 x 512 Pixeln aufweisen. Die Anzeige erfolgt mit 16 x 16 und sollte auch dann deinen Vorstellungen entsprechen, gut erkennbar sein und nicht verzerrt wirken. Sowohl Grösse als auch Format kannst du problemlos mit jedem Bildbearbeitungsprogramm aber ebenso in einigen Generatoren, Plugins und bei WordPress selbst einstellen.

Favicon direkt in WordPress ändern mit dem Customizer

Sofern deine ausgewählte Grafik die richtige Grösse und das korrekte Format aufweist, kannst du es direkt bei WordPress einstellen.

Du benötigst das Symbol wahlweise im Dateiformat:

• ICO
• JPG
• PNG

Liegt dies als Basis vor, sind lediglich die folgenden Schritte erforderlich:

1. Melde dich als Admin bei WordPress an.
2. Suche im Menü das Feld „Design“ auf. Wähle darunter den „Customizer“ aus.
3. Unter dem Punkt öffnet sich eine weitere Liste. Wähle hier „Header“ aus.
4. Auf diese Weise gelangst du in die „Webseite-Informationen“.
5. Klicke auf „Webseite-Icon“ – so wird das Favicon bei WordPress bezeichnet.
6. Nun musst du unter „Bild auswählen“ lediglich die gewünschte Datei hochladen und den Prozess durch das Speichern beenden. Fertig ist dein neues Symbol.
   

Favicon ohne Plugin ändern über FTP

Wenn du auf ein (weiteres) Plugin verzichten möchtest und dich bereits mit HTML und dem notwendigen Code auskennst, kannst du dein Favicon auch manuell einfügen.

Verwende hierzu zunächst einen Generator wie den RealFaviconGenerator und lade die ausgesuchte Grafik hoch.

Im Anschluss gehst du wie folgt vor:

1. Lasse das Favicon und den dazu gehörigen HTML-Code generieren.
2. Lade die Datei herunter und speichere sie unter dem Namen „favicon.ico“. Hierdurch wird sie später direkt von deinem FTP-Server erkannt.
3. Nun loggst du dich auf deinem FTP-Server ein und speicherst das Favicon-Paket. Es sollte im Anschluss auf derselben Ebene wie die Ordner „wp-admin“, „wp-content“ und „wp-includes“ sein.
4. Öffne die Datei „header.php“ in deinem WordPress-Theme-Editor. Füge hier den generierten HTML-Code ein. Achte dabei darauf, dass deine Domain im „href=“-Bereich ergänzt ist.

Dieses Vorgehen erfordert einige Kenntnisse in Hinblick auf HTML. Wenn du dieses noch nicht besitzt und das Favicon einfacher zu WordPress hinzufügen möchtest, bietet sich daher der Weg über ein Plugin an.

Favicon mit Plugin hinzufügen oder ändern

Eine einfachere Variante bei WordPress ein Favicon hinzuzufügen ist die Verwendung eines Plugins. Hierfür kommt wiederum der RealFaviconGenerator infrage.

Dieser ist sowohl als Plugin als auch als cloudbasierter Generator erhältlich. Als Plugin musst du es herunterladen und installieren.

Im Anschluss daran taucht bei WordPress der neue Punkt „Favicon“ im Design-Menü auf. Darüber kannst du die auserwählte Grafik hochladen und im Anschluss abhängig von deinen Vorstellungen und bei Bedarf noch anpassen und gestalten.

Wenn du mit deiner Bearbeitung fertig bist, klickst du auf „Generate your favicons and HTML Code“ und fügst diese bei WordPress ein.

Ein sinnvolle und praktische Zusatzfunktion dieses Plugins ist der Test, den du direkt im Anschluss durchführen kannst.

Dabei kannst du dir anzeigen lassen, wie dein Favicon auf verschiedenen Endgeräten und unter unterschiedlichen Betriebssystemen dargestellt wird.

Das RealFaviconGenerator-Plugin ist nicht die einzige Möglichkeit für dich, bei WordPress ein Favicon hinzuzufügen und testen zu können. Ebenso zur Verfügung steht dir das All-in-one Favicon.

Quelle: https://de.wordpress.org/plugins/favicon-by-realfavicongenerator/

Bei WordPress Favicon über ein Theme hinzufügen

Wenn du ein Theme bei deiner WordPress-Seite verwendest, unterscheidet sich das Vorgehen zum Hinzufügen des Favicons in der Regel kaum von der direkten Einbindung auf WordPress.

Leider gibt es jedoch keine pauschalen Angaben dazu, da die jeweiligen Menüpunkte bei jedem Theme anders organisiert sein können.

Empfehlenswert ist jedoch, ein Child-Theme zu verwenden. Dadurch bleibt das Favicon auch bei Änderungen erhalten.

WordPress Favicon testen

Das Favicon ist ein wichtiger Teil deines Images und damit eine Art Aushängeschild. Daher ist es entscheidend, dass es auf allen Endgeräten korrekt dargestellt wird.

Als abschliessenden Schritt solltest du das Webseiten-Symbol daher testen. Führe diese Massnahme nach jeder Änderung durch, um Probleme sofort beheben zu können.

Ebenso wie bei dem Hinzufügen des Favicons in WordPress, stehen dir dafür verschiedene Möglichkeiten zur Verfügung. Wir haben die schnellsten, einfachsten und praktischsten Wege für dich zusammengefasst:

1. Leere deinen Browser-Cache: Im Anschluss daran sollte das Symbol wie gewünscht links neben der Adresse auftauchen, bei Tabs und in deinen Lesezeichen sichtbar sein.
2. Nutze den Inkognito-Modus deines Browsers: Hierbei werden bei dem Aufrufen der Seite weniger Daten übertragen, wodurch du die Ansicht dem entspricht, was die Besucher deiner Seite mit dem entsprechenden Endgerät sehen.
3. Verwende RealFaviconGenerator: Ja, auch hierbei kann er dir helfen, denn er stellt die Ansicht in verschiedenen Systemen dar. Fehler fallen dabei schnell auf.
4. Sitechecker zu Hilfe nehmen: Sitechecker oder andere entsprechende Seiten können dir dabei helfen, dein Favicon und andere Aspekte deiner Webseite auf Herz und Nieren zu prüfen. Nutze diese Angebote, um Probleme frühzeitig zu erkennen und sie beheben zu können. Dadurch werden optimale Ergebnisse möglich.

Quelle: https://sitechecker.pro/de/what-is-favicon/

Das kleine Favicon und der Aufwand dahinter

So winzig das Webseiten-Symbol ist, so gross kann der damit verbundene Aufwand sein. Von der Gestaltung über die Bearbeitung bis hin zu der richtigen Einbindung finden sich einige Problembereiche und Stolpersteine.

Wenn du dich als Laie nicht damit befassen möchtest oder trotz zahlreicher Versuche langsam daran verzweifelst, ist eine fachkundige Beratung und Durchführung die beste Wahl.

Dies gilt vor allem dann, wenn du häufige Änderungen ebenso wie Fehler vermeiden möchtest und das gesamte Potenzial des Favicons ausschöpfen willst.

Ein professionelles Design und die reibungslose Anzeige stellen sicher, dass sich das Symbol zu deinem Markenzeichen entwickeln kann und deinem Image zuträglich ist. Das fachkundige Erstellen und Hinzufügen ist daher eine sinnvolle Investition und kann ein nicht zu unterschätzender Grundstein für deinen Erfolg sein.

Fazit

Mit dem entsprechenden Wissen, den richtigen Tools und etwas Geduld kannst du dein Favicon ikonisch werden lassen.

Unterschätze nie seine Wirkung und lege sowohl Wert auf die Gestaltung als auch auf die Anzeige. Denn was deine Besucher und (potenziellen) Kunden sehen, ist entscheidend.

Versuche dich dabei stets in die Lage deiner Zielgruppe zu versetzen und nutze bei Bedarf professionelle Hilfe. Denn durch diese lassen sich Verbesserungen oftmals ungeahnt schnell und einfach umsetzen.

Wenn du deine Nerven schonen willst und Wert auf ein professionelles Auftreten deiner Webseite legst, solltest du daher entweder viel Geduld mitbringen oder deine Grenzen kennen und Hilfe in Anspruch nehmen, die deinem Erfolg einen erheblichen Boost verleihen kann.

FAQ

Was ist ein Favicon?

Kurz gesagt handelt es sich hierbei um ein Webseiten-Symbol, das unter anderem auf dem Tab und als iOS-Symbol auf mobilen Endgeräten angezeigt wird. Es erhöht den Wiedererkennungswert und spielt daher eine entscheidende Rolle beim Branding und Marketing. Für Leser und Kunden stellt es eine wertvolle und praktische Orientierung dar, vermittelt dabei aber zugleich Professionalität, Qualität und Verlässlichkeit. Als kleines Detail bringt es daher gleich mehrere Vorteile mit sich und sollte in seiner Bedeutung nicht unterschätzt werden.

Was eignet sich als Favicon?

In der Regel sollte das Logo des Unternehmens als Favicon festgelegt werden. Hierdurch wird zum einen ein einheitlicher Look geschaffen. Zum anderen steigt der Wiedererkennungswert.

Ist noch kein Logo vorhanden, kann dieses gemeinsam mit dem Favicon erstellt werden. Dabei ist es wichtig, dass sich das Symbol klar von anderen absetzt, auch in einem kleinen Format problemlos erkennbar ist und gut aussieht. Für gewöhnlich sind daher einige Entwürfe notwendig, um das passende „Aushängeschild“ zu entwerfen und diese bis zur vollen Zufriedenheit damit zu bearbeiten.

Falls du bereits ein Logo für dein Unternehmen oder deine Webseite hast, ist der Prozess zur Erstellung des Favicons deutlich einfacher und schneller. Du benötigst dafür lediglich den passenden Generator.

Wo speichert WordPress das Favicon?

WordPress speichert das Favicon unter den Website-Informationen. Hier kannst du das Symbol ebenso einbinden beziehungsweise hochladen.

Welche Grösse muss ein WordPress Favicon haben?

Das Favicon wird quadratisch dargestellt, sollte also auch das entsprechende Format aufweisen. Ideal ist eine Qualität von mindestens 512 x 512 Pixeln. Achte dabei darauf, dass es mit 16 x 16 Pixeln angezeigt wird. Es sollte also auch in dieser Grösse gut aussehen. Um das sicherzustellen, empfehlen wir einen entsprechenden vorherigen Test. Zusätzlich solltest du bei Plugins darauf achten, welche Vorgaben zu der Grösse gemacht werden. Diese können sich voneinander unterscheiden.

Wie bekomme ich das WordPress-Logo im Browser entfernt?

Dieser Vorgang ist einfacher als du denkst. Gehe dafür als Admin auf den WordPress-Dashboard. Rufe zunächst den Listenpunkt „Design“ und wähle darunter den Punkt „Anpassen“ aus. Hierüber gelangst du auf die „Webseite-Informationen“. Unter dem Eintrag „Logo“ erscheint die Auswahl „Logo entfernen“. Wenn du diesen Punkt aktiviert hast, verschwindet das WordPress-Symbol. Ohne eingebundenes Favicon ist also zunächst kein Zeichen vorhanden. Auch das wirkt bereits professioneller als das W-Symbol.