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

von Tobias Berger / updated 03.10.2025 / 3 Min. Lesezeit

von Tobias Berger / updated 03.10.2025 /
3 Min. Lesezeit
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 |
Praxis: drei Wege, die sicher funktionieren
512×512
).
Dashboard → Design → Website-Informationen → Website-Icon (512×512 PNG)
<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">
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 nachrel="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.
Wo füge ich in WordPress mein Favicon am schnellsten hinzu?
Über WP-Admin → Design → Customizer → Website-Informationen → Website-Icon. Lade ein 512×512-PNG hoch; WordPress erzeugt automatisch die nötigen Größen.
Mein Favicon erscheint nicht – was prüfe ich zuerst?
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.
Welches Quellformat ist best practice für WordPress?
Ein transparentes 512×512-PNG als Quelle. Daraus generiert WordPress Tab-Icons, Apple-Touch-Icon u. a. automatisch.
In diesem Artikel

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.