Favicon in WordPress: So fügst du dein Site Icon richtig ein (2025)

Porträt von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, lächelnd in die Kamera blickend.

von Tobias Berger   /   updated 03.10.2025   /   3 Min. Lesezeit

Porträt von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, lächelnd in die Kamera blickend.

von Tobias Berger   /   updated 03.10.2025   /   
3 Min. Lesezeit

Kurzantwort: In WordPress lädst du dein Favicon als Website-Icon im Customizer hoch (mind. 512×512 PNG). WordPress erzeugt automatisch die nötigen Größen und bindet alles korrekt ein. Für Spezialfälle (Custom Themes, Headless, Plugin-Konflikte) helfen die Snippets unten.

Schnell-Referenz: Größen & Formate in WordPress

Use Case Empfohlene Größe(n) Format
Browser-Tab (Standard & HiDPI) 16×16, 32×32 PNG oder ICO
Apple-Touch (iOS/iPadOS) 180×180 PNG
Google/Android & SERPs 48×48 (Vielfache: 96, 192) PNG
Quelle/Source für Generatoren 512×512 PNG, optional SVG (mit Fallback)
Kompatibilität (Fallback) /favicon.ico (Mehrgrößen) ICO
*Für Details zu sinnvollen Größen siehe Favicon-Größen für jede Plattform. Wenn das Icon trotz korrekter Schritte nicht auftaucht, hilft Favicon wird nicht angezeigt: Ursachen & Lösungen. Für die Erstellung kompletter Sets inkl. Code siehe den Favicon-Generator-Vergleich 2025.

Praxis: drei Wege, die sicher funktionieren

Customizer (empfohlen) – schnell, einfach und sicher. Pfad: Design → Website-Informationen → Website-Icon (PNG ≥ 512×512). Dashboard → Design → Website-Informationen → Website-Icon (512×512 PNG)
Manuell im <head> – für eigene Themes oder Spezialfälle. <link rel="icon" href="/favicon-32.png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/favicon.ico" type="image/x-icon">
Plugin-Weg – wenn Themes Einträge überschreiben. Tipp: Danach doppelte Head-Einträge prüfen und Cache leeren. Nach Installation: doppelte <link rel="icon"> entfernen → Cache leeren

MIME-Types & Caches: zwei typische Stolpersteine

1) Korrekte Content-Types ausliefern

Der Server sollte Folgendes senden (DevTools → Network prüfen): image/png image/x-icon Falsche Typen (z. B. text/plain) verhindern die Anzeige.

2) Cache richtig leeren

Browser: Hard-Reload (Strg/Cmd + Shift + R). Server/CDN: Cache/Purge im Hosting/Plugin (z. B. LiteSpeed/Cloudflare). Erst testen, dann ggf. eine Version anhängen (?v=2), aber nicht inflationär verwenden.

Wenn’s hakt: so findest du Doppel-Einbindungen

Öffne den Quelltext (Strg/Cmd + U) und suche nach rel="icon" und apple-touch-icon. Es darf je Typ nur eine aktive Zeile geben. Entferne alte Einträge im Theme/Plugin, damit nur ein Icon-Set greift. Fazit: In WordPress reicht der Customizer mit einer 512×512-PNG in den meisten Fällen. Prüfe bei Problemen doppelte Head-Einträge, korrekte MIME-Types und leere Caches. Für Größen/Generatoren siehe den Hauptartikel.

Über WP-Admin → Design → Customizer → Website-Informationen → Website-Icon. Lade ein 512×512-PNG hoch; WordPress erzeugt automatisch die nötigen Größen.

Antwort: Browser-/Plugin-/CDN-Cache leeren, doppelte <link rel=“icon“> im Head entfernen, und sicherstellen, dass der Server korrekte MIME-Types (image/png, image/x-icon) liefert.

Ein transparentes 512×512-PNG als Quelle. Daraus generiert WordPress Tab-Icons, Apple-Touch-Icon u. a. automatisch.

In diesem Artikel

Porträt von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, lächelnd in die Kamera blickend.

Hey, ich bin Tobias!

Danke, dass du dir die Zeit genommen hast, diesen Beitrag zu lesen – richtig cool, dass dich das Thema Website & Webdesign interessiert! 
Auf unserem Blog findest du noch viele weitere Tipps rund um Design, Technik und SEO. Und falls du Fragen hast oder Unterstützung bei deiner eigenen Website brauchst: Wir von BSC Webdesign stehen dir jederzeit gerne zur Seite.