WPGuideBlogHinzufügen eines Favicons in WordPress

Hinzufügen eines Favicons in WordPress

In diesem Beitrag zeigen wir dir Schritt für Schritt, wie du ein Favicon in WordPress hinzufügst, sei es durch manuellen Upload auf dem Root Server oder die Verwendung deines Themes.
Teilen
Tweet
Teilen
Teilen

Inhalt

Favicon einbinden

Ein Favicon (Favoritenicon) ist das kleine Symbol, das in der Browser-Tab-Leiste neben dem Titel deiner Website angezeigt wird. Es ist ein wichtiger Bestandteil des Webdesigns und hilft dabei, deine Website professioneller und erkennbarer zu gestalten.

Warum ist ein Favicon wichtig?

Ein Favicon mag zwar winzig sein, aber seine Bedeutung für deine Website ist enorm:

  1. Markenidentität: Ein Favicon kann das Logo oder ein markantes Symbol deiner Marke repräsentieren, was die Wiedererkennung bei Besuchern fördert.

  2. Professionelles Erscheinungsbild: Ein Favicon verleiht deiner Website ein professionelles Erscheinungsbild und signalisiert, dass du auf Details achtest.

  3. Benutzerfreundlichkeit: Wenn Benutzer mehrere Tabs geöffnet haben, hilft das Favicon dabei, deine Website schnell zu identifizieren.

Ein Favicon in WordPress einfügen

Es gibt zwei Hauptmethoden, um ein Favicon in deine WordPress Website hinzuzufügen.

Wir werden dir beide Wege vorstellen, damit du die Methode auswählen kannst, die am besten zu deinen Bedürfnissen passt.

Methode 1:
Favicon manuell auf dem Root Server hochladen

Schritt 1: Favicon erstellen oder vorbereiten

Bevor du beginnst, solltest du ein Favicon erstellen oder ein Bild vorbereiten, das du als Favicon verwenden möchtest. Das Bild sollte quadratisch sein und idealerweise mindestens 260×260 Pixel groß sein, damit es in verschiedene Größen für unterschiedliche Geräte und Browser skaliert werden kann.

Schritt 2: Besuche RealFaviconGenerator

Öffne deinen Webbrowser und gehe zu RealfaviconGenerator.net

Schritt 3: Bild hochladen

Klicke auf die Schaltfläche „Bild hochladen“ und wähle das zuvor vorbereitete Favicon-Bild von deinem Computer aus. RealFaviconGenerator wird das Bild analysieren und für verschiedene Plattformen und Geräte optimierte Favicons generieren.

Schritt 4: Favicon-Generator-Einstellungen anpassen (optional)

Du kannst die Generator-Einstellungen anpassen, wenn du spezielle Anforderungen hast. Zum Beispiel kannst du das Hinzufügen eines Apple-Touch-Icons oder eines Favicon-Texts aktivieren.

Schritt 5: Favicon generieren

Klicke auf die Schaltfläche „Favicon generieren„. RealFaviconGenerator wird die Favicons erstellen und in einem Zip-Archiv zum Download bereitstellen.

Schritt 6: Zip-Archiv herunterladen und entpacken

Lade das generierte Zip-Archiv herunter und entpacke es auf deinem Computer. Du solltest eine Vielzahl von Favicon-Dateien in verschiedenen Größen und Formaten erhalten.

Fav Icon Diverse Dimensionen

Schritt 7: Favicon-Dateien auf deinen Root Server hochladen

Verbinde dich mit deinem Root Server über FTP oder einen Dateimanager, den dein Hosting-Anbieter bereitstellt.

Navigiere zu dem Verzeichnis, in dem sich deine Website-Dateien befinden, normalerweise ist dies das „public_html“-Verzeichnis oder ein ähnlicher Name.

Hosting Dateimanager

Lade die generierten Favicon-Dateien in dieses Verzeichnis hoch.

Schritt 8: Favicon in deine Website integrieren

Öffne deine Website-Dateien und füge den folgenden HTML-Code in den <head>-Bereich deiner Webseite ein. Stelle sicher, dass der href-Wert auf die richtige Pfad-URL zu deinem Favicon verweist:


<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Du kannst den obigen Code für verschiedene Favicons in verschiedenen Größen anpassen, um sicherzustellen, dass deine Website auf verschiedenen Geräten und Browsern korrekt angezeigt wird.

Schritt 9: Überprüfe und speichere deine Änderungen

Speichere die Änderungen an deinen Website-Dateien und lade sie auf deinen Root Server hoch.

Schritt 10: Favicon testen

Öffne deine Website in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass das Favicon ordnungsgemäß angezeigt wird.

Methode 2:
Verwenden des Themes für das Favicon

Schritt 1: Ein passendes WordPress-Theme auswählen

Bevor du beginnst, musst du sicherstellen, dass das von dir verwendete WordPress-Theme die Option zur Anpassung des Favicons unterstützt. Nicht alle Themes bieten diese Funktion an, daher ist die Auswahl eines Themes, das dies ermöglicht, entscheidend.

Schritt 2: Einloggen und WordPress-Dashboard öffnen

Logge dich in dein WordPress-Dashboard ein, indem du zu deiner Website gehst und „/wp-admin“ zur URL hinzufügst. Gib deine Anmeldeinformationen ein, um Zugriff auf das Dashboard zu erhalten.

Schritt 3: Zum Customizer wechseln

Im Dashboard navigiere zu „Design“ und wähle „Customizer“ aus. Der Customizer ist eine intuitive Oberfläche, die es dir ermöglicht, verschiedene Design-Elemente deiner Website anzupassen.

Schritt 4: Favicon-Einstellungen finden

Im Customizer solltest du eine Option namens „Site-Identität“, „Header“ oder „Favicon“ finden. Die genaue Bezeichnung kann je nach deinem Theme variieren. Klicke darauf, um zu den Favicon-Einstellungen zu gelangen.

Schritt 5: Favicon hochladen

In den Favicon-Einstellungen wirst du die Möglichkeit haben, ein neues Favicon-Bild hochzuladen. Klicke auf die Schaltfläche „Favicon hochladen“ oder „Bild auswählen“, je nachdem, was angezeigt wird. Lade dein Favicon-Bild von deinem Computer hoch.

Schritt 6: Bild zuschneiden und anpassen

Je nach den Anforderungen deines Themes musst du möglicherweise das hochgeladene Bild zuschneiden oder anpassen, um sicherzustellen, dass es in das Favicon-Bereich passt. Befolge die Anweisungen des Customizers, um dies zu tun.

Schritt 7: Änderungen speichern

Nachdem du das Favicon-Bild angepasst hast, klicke auf die Schaltfläche „Änderungen veröffentlichen“ oder „Speichern“ im Customizer, um die Änderungen zu speichern und das Favicon auf deiner Website zu aktivieren.

Schritt 8: Überprüfe das Favicon

Öffne deine Website in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass das Favicon ordnungsgemäß angezeigt wird.

Herzlichen Glückwunsch!

Du hast erfolgreich ein Favicon zu deiner WordPress-Website hinzugefügt. Deine Website sieht jetzt professioneller und ansprechender aus.