Deinen Website Favicon einzubinden, dauert in WordPress nur 5 Minuten. Wir zeigen dir in unserer Schritt-für-Schritt Anleitung wie du schnell und einfach deinen WordPress Favicon einfügen und ändern kannst.
WordPress Favicon einfügen: Anleitung
Mittlerweile gehört der WordPress Favicon zu einer Standardfunktion von WordPress. Das bedeutet, du kannst dir komplizierte Wege sparen! Deswegen zeigen wir dir anfängerfreundlich, wie du deinen WordPress Favicon einfügen und ändern kannst. Nachdem du deinen WordPress Favicon eingefügt hast, wird dieser zum Beispiel in deinen Browser Tabs oder auch in der Favoritenleiste als kleines Icons angezeigt und steigert den Widererkennungswert deiner Website.
Deinen WordPress Favicon kannst du schnell und einfach in nur drei Schritten einbinden:
- WordPress Favicon erstellen
- Favicon Datei im WordPress Dashboard hochladen
- Cache leeren und testen
Nachfolgend beschreiben wir dir die einzelnen Schritte ausführlich! Wenn du unsere WordPress Favicon Anleitung befolgst, hast du in ca. 5 Minuten bereits deinen Favicon auf deiner Website eingebunden 😊
Website-Favicon-Datei erstellen
Im ersten Schritt erstellst du deinen Favicon, der in der Regel (einen Teil) dein(es) Logos enthält. Damit der Favicon im Anschluss sauber dargestellt wird, sollte der Favicon folgende Formatregeln erfüllen:
- Format 512 x 512 Pixel
- Dateiformat bei transparentem Hintergrund: PNG
- Dateiformat bei nicht transparenten Hintergrund: JPG
Hinweis: Das Dateiformat .ICO wird nicht mehr benötigt. - Dateigröße: So gering wie möglich.
Unser Tipp: Für die Komprimierung kannst du zum Beispiel das kostenfreie und unkomplizierte Tool TinyPNG nutzen.
Für die Erstellung deines Favicons kannst du die typischen Grafikprogramme, wie Adobe Photoshop, Gimp oder Canva verwenden.
Alternative: Favicon Generator
Solltest du keines dieser Programme nutzen, haben wir eine einfache Alternative für dich. Lade dein Logo in einen Favicon Generator hoch, der für dich dein bestehendes Logo in einen Favicon verwandelt. Dafür kannst du zum Beispiel den Real Favicon Generator verwenden.
Wähle über den blauen Button „Select your Favicon image!“ und lade von deinem PC / Laptop deine Logodatei hoch. Nach erfolgreichem Upload wird dir eine Vorschau angezeigt, denn der Generator ergänzt für dich Ränder, damit dein Logo dem notwendigen Format von 512 x 512 px entspricht.
Die Datei kannst du noch entsprechend für verschiedene Formate stylen und dir danach den Favicon erstellen lassen. Das Favicon Paket kannst du dir im nächsten Schritt über „Favicon Package“ herunterladen. In diesem Ordner findest du die richtige Datei für die nächsten Schritte mit 512×512 am Ende des Dateinamens.
Weitere einfach und praktische Favicon Generatoren sind:
- Favicon Generator, der analog des beschriebenen Real Favicon Generator funktioniert.
- favicon.cc, mit dem du einen eigenen neuen Favicon designen und herunterladen kannst.
Favicon einfügen im WordPress Customizer
Dir liegt jetzt deine Datei vor, die du jetzt auf deiner WordPress Website einbindest. Logge dich dafür in deinem WordPress Dashboard ein und wähle im linken Menü „Design“ > „Customizer“. Im Customizer wählst du den Menüpunkt „Website-Informationen“ > „Website Icon auswählen“ > „Dateien hochladen“ und wähle deine WordPress Favicon Datei aus.
Jetzt nur noch auf „Veröffentlichen“ klicken und du hast deinen WordPress Favicon erfolgreich eingefügt.
Hinweis: Bei manchen Themes muss der neue Favicon direkt in den Theme-Einstellungen hochgeladen werden. Dort kannst du dann ebenso den vorhandene WordPress Favicon ändern.
Cache leeren und Favicon testen
Um sicher zu stellen, dass dein neuer Favicon angezeigt wird, leere den Cache deiner Website. Wenn du das im WordPress Hosting von WPspace kostenfreie Premium Caching Plugin Accelerate WP verwendest, kannst du zum Cache leeren einfach in deinem Dashboard oben über AccelerateWP hovern und „Clear and Preload Cache“ auswählen. Den Rest erledigt das Plugin für dich.
Testen kannst du deinen Favicon entweder selbst, in dem du deine Website zum Beispiel in einem neuen Tab aufrufst und oben im Tab dein Favicon zu sehen ist oder mittels verschiedener Favicon Tester.
WordPress Favicon ändern
Wenn du deinen aktuell vorhandenen WordPress Favicon ändern möchtest, musst du die gleichen Schritte wie in der Anleitung zu „WordPress Favicon einfügen“ befolgen.
Erstelle also deinen neuen WordPress Favicon und navigiere in deinem WordPress Dashboard in den „Customizer“ > „Website Informationen“. Hier klickst du auf den Button „Bild wechseln“ und lädst deine neuen Favicon wie gehabt hoch.
Sobald du auf „Veröffentlichen“ klickst, publizierst du deinen neuen Favicon auf deiner Website. Ich empfehle dir auch beim Ändern deines Favicons im Nachgang den Cache deiner Website zu leeren, damit der neue Favicon global sichtbar ist.
Fazit: WordPress Favicon einfügen und ändern
Mit dem Favicon schaffst du einen Widererkennungswert deiner Website und es sollte Bestandteil jeder professionellen Website sein. Da es mittlerweile zu den Standardfunktionen von WordPress gehört, den Favicon einzufügen und zu ändern, kann selbst jeder Anfänger seinen Favicon in nur 3 einfachen Schritten einfügen:
- WordPress Favicon erstellen
- WordPress Favicon im Customizer deiner Website hochladen
- Website Cache leeren und Testen
Nimm dir also die 2 bis 5 Minuten, um deinen WordPress Favicon zu erstellen, einzufügen und ordentlich zu testen! Das Beste: In der Regel muss man den Favicon nur einmal einfügen 😊
4 Antworten
Hallo!
Ich betreue die Homepage des O.Ö.Seniorenbundes für unsere Ortsgruppe-Leonding
über das Programm TYPO3 CMS 11.5.25 – grundsätzlich alles o.k.
ABER
Nach dem Hochladen der Internetseite auf den PC bzw. auf ein Handy, iPhone oder Android erscheint lediglich ein „A“ bzw. ein „O“ Buchstabe.
Ich möchte hier jedoch das Symbol/Icon des Seniorenbundes als Icon sehen. Ähnlich wie bei einer App. Ich habe als Vorlage bereits dieses Symbol als „Favicon“ als JPG gespeichert.
Ich finde bei meinen Eistellungen im Dashboard keinen Menüpunkt Design auch keine weiteren Möglichkeiten ?
Was kann ich da machen
Danke für eine Rückmeldung
Reinhard
Hallo Reinhard,
danke für dein Kommentar! Die Favicon-Anleitung bezieht sich auf das Content Management System (CMS) WordPress. Aus deinem Kommentar entnehme ich, dass ihr eine TYPO3 Website habt? Wenn ja, google am besten gezielt nach einer TYPO3 Anleitung zum Favicon einfügen. Sollte es sich bei eurer Website doch um eine WordPress-Website handeln, melde dich gerne einfach über den Chat noch einmal bei uns – wir helfen dir gerne beim Einfügen des Favicons 🤗
Wenn ich bei einem verlinkten Dokumenk im Link einstelle das dieser in einem neuen Tab geöffnet werden soll, dann erscheint im neuen Tab nicht das FavIcon der Webseite sondern das WordPress FavIcon. Wie kann ich das ändern?
In der Regel definiert man ein Favicon global für die gesamte Website. Das heißt, es greift für Seiten, Beiträge und Medien. Wird das Favicon wie in deinem Beispiel nicht bei Medien angezeigt, ist vermutlich in einer Einstellung noch das Standard-Favicon von WordPress hinterlegt. Daher empfehle ich dir, alle Einstellungen noch einmal gegen zu prüfen – ggf. hat sich irgendwo noch das WordPress Favicon versteckt.