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:
Markenidentität: Ein Favicon kann das Logo oder ein markantes Symbol deiner Marke repräsentieren, was die Wiedererkennung bei Besuchern fördert.
Professionelles Erscheinungsbild: Ein Favicon verleiht deiner Website ein professionelles Erscheinungsbild und signalisiert, dass du auf Details achtest.
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.
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.
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.