Favicon in WordPress (Theme vs. Plugin)

WordPress-Favicons verwaltest du über Site Icon im Customizer (Design > Customizer > Website-Identität). WordPress erzeugt mehrere Größen und schreibt die passenden link-Tags. Themes und Plugins können diese überschreiben oder duplizieren. SEO-Plugins fügen manchmal eigene Icon-Logik hinzu.

Dieser Leitfaden erklärt den nativen WordPress-Weg, wann Theme-Dateien oder Plugins sinnvoll sind und wie du Icons auf der Live-WordPress-URL prüfst.

Kurzantwort: zuerst Site Icon nutzen

Seit WordPress 4.3 ist Site Icon der Standardweg:

1. Design > Customizer > Website-Identität öffnen
2. Site Icon auswählen klicken
3. Quadratisches Bild mit mindestens 512×512 px hochladen
4. Veröffentlichen

WordPress croppt und liefert Icons für Browser-Tabs, Admin-Leiste und Mobile-Homescreen. HTML-Tags schreibt WordPress für dich.

Für Basis-Favicons brauchst du kein Plugin, außer dein Theme blockiert Site Icon oder du brauchst erweiterte PWA-Manifest-Kontrolle.

Was WordPress im Hintergrund erzeugt

Mit gesetztem Site Icon:

• Speichert den Anhang in der Mediathek
• Gibt link rel="icon"-Tags in mehreren Größen aus
• Fügt apple-touch-icon für iOS hinzu
• Stellt Icon-URLs über wp_site_icon() in Themes bereit

Im Seitenquelltext nach site-icon suchen:

<link rel="icon" href="https://example.de/wp-content/uploads/2026/06/cropped-favicon-32x32.png" sizes="32x32">
<link rel="icon" href="https://example.de/wp-content/uploads/2026/06/cropped-favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="https://example.de/wp-content/uploads/2026/06/cropped-favicon-180x180.png">

WordPress erzeugt cropped-*-Varianten in Standardgrößen. Upload-Qualität zählt. Von scharfem 512×512-Master starten.

Methode 2: Theme functions.php oder header.php

Ältere Themes hardcoden Favicons in header.php:

<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/assets/favicon.ico">

Oder per wp_head:

function mytheme_favicon() {
  echo '<link rel="icon" type="image/png" sizes="32x32" href="' . get_template_directory_uri() . '/assets/favicon-32x32.png">';
}
add_action('wp_head', 'mytheme_favicon');

Problem: Konflikt mit Site Icon. Doppelte oder konkurrierende Tags. Browser wählen unvorhersehbar.

Fix: Hardcodierte Favicon-Zeilen im Theme entfernen, wenn Site Icon aktiv ist. In Block-Themes (FSE) theme.json und Template Parts prüfen.

Methode 3: SEO- und Favicon-Plugins

Plugins wie Yoast, Rank Math oder dedizierte Favicon-Plugins können Tags oder Manifest-Support hinzufügen.

Vor Installation:

• Prüfen, ob Site Icon schon reicht
• Redundante Favicon-Ausgabe deaktivieren
• Icons von eigener Domain, nicht unbekanntem CDN

Manche Plugins ergänzen Web-App-Manifest-Icons für PWA. Größen: Favicon-Größen-Leitfaden.

Methode 4: favicon.ico ins Site-Root legen

WordPress liegt auf manchen Hosts in Unterverzeichnissen (example.de/blog/). Browser rufen trotzdem https://example.de/favicon.ico an der Domain-Root ab, nicht unter /wp-content/.

Optionen:

• favicon.ico per FTP ins Web-Root (über WordPress)
• Host bitten, /favicon.ico auf WordPress Site Icon zu mappen
• Redirect in .htaccess oder nginx

Fehlendes Root-ICO bedeutet Generics in E-Mail-Clients. Favicon Check testet HTML-Tags und /favicon.ico in einem Durchlauf.

Multisite und Subdirectory-Installs

Multisite: Jede Site im Netzwerk setzt eigenes Site Icon im jeweiligen Customizer. Network-Defaults können auf alten Setups Subsites übersteuern. Jede Subdomain oder jeden Pfad separat testen.

Subdirectory: Icon-URLs müssen vom Unterverzeichnis-Pfad auflösbar sein. Exakte öffentliche URL scannen.

Cache-Plugins und CDNs

WordPress-Favicon-Probleme nach Änderung meist Cache, nicht Core.

Caches in Reihenfolge leeren:

1. WordPress Object Cache (Redis, Memcached-Plugin)
2. Page Cache (WP Rocket, W3 Total Cache, LiteSpeed)
3. CDN (Cloudflare, Bunny)
4. Browser-Favicon-Cache (Inkognito testen)

Site-Icon-Änderungen aktualisieren Mediathek-Dateien. Gecachtes HTML referenziert alte URLs bis Purge.

Cloudflare: alles purgen oder Homepage-HTML nach Icon-Wechsel.

Typische WordPress-Favicon-Probleme

Site Icon gesetzt, Tab zeigt altes Logo

Favicon-Cache ist aggressiv. Alle Caches purgen, Mediadatei neu hochladen (Site Icon erneut setzen), Inkognito testen. Siehe Favicon wird nicht angezeigt.

Theme dupliziert Favicon-Tags

Seitenquelltext prüfen. Zwei rel="icon"-Sets: Theme-Hardcoding entfernen oder Plugin-Duplikat abschalten.

Unscharfes Icon nach WordPress-Crop

Mindestens 512×512 hochladen. Kein breites Logo. WordPress croppt zentriert quadratisch. Vorab in Design-Tools croppen für Kontrolle.

Site Icon fehlt nur auf Startseite

Manche Page Builder oder Head-Optimierer strippen wp_head() auf Landing Pages. <?php wp_head(); ?> in header.php oder Block-Theme-Template bestätigen.

HTTPS Mixed Content

Icon-URLs müssen auf SSL-Sites https:// nutzen. Mixed Content blockiert Icons in strikten Browsern. Site-URL unter Einstellungen > Allgemein fixen.

Vollständige WordPress-Checkliste

1. 512×512 quadratisches PNG als Site Icon hochladen
2. Customizer-Änderungen veröffentlichen
3. favicon.ico ins Domain-Root (optional, empfohlen)
4. Doppelte Theme-Favicon-Code entfernen
5. Web-Manifest per Plugin, falls PWA-Install-Icons nötig
6. Alle Caches purgen
7. Live-URL mit Favicon Check scannen
8. Open Graph Check für Share-Previews (Yoast/Rank-Math-OG getrennt von Favicons)

Test-Schritte: Favicons testen vor Launch.

Child Themes und Custom Development

Custom Theme:

// WordPress-Core-API bevorzugen
add_theme_support('custom-logo');
// Site Icon automatisch, wenn Nutzer es im Customizer setzt
// Kein Hardcoding, wenn Site Icon aktiv

Programmatischer Fallback ohne Site Icon:

function mytheme_fallback_favicon() {
  if (! has_site_icon()) {
    echo '<link rel="icon" href="' . esc_url(get_template_directory_uri() . '/assets/favicon.ico') . '">';
  }
}
add_action('wp_head', 'mytheme_fallback_favicon', 99);

Niedrige Priorität (99), damit Core-Site-Icon-Tags zuerst kommen.

WordPress vs. statisches HTML

WordPress abstrahiert Icon-Tags. HTML-Regeln wie überall. Siehe Favicon per HTML einbinden bei statischem Export oder Headless-Front-end.

Headless WordPress und entkoppelte Front-ends

Viele Teams nutzen WordPress als CMS, rendern aber das Front-end in Next.js oder Gatsby. Site-Icon-Tags leben in WordPress-PHP-Templates, nicht in der JavaScript-App.

Ignoriert dein Headless-Setup WordPress-Theme-Output:

• Favicon-URLs aus WordPress REST API exportieren oder CDN-Pfade im Front-end hardcoden
• Nicht annehmen, dass WordPress Site Icon für app.example.de gilt, wenn diese Domain eine separate SPA ausliefert
• Jede öffentliche Origin separat scannen

Das WordPress-Admin kann korrektes Site Icon zeigen, während das entkoppelte Front-end kein Favicon ausliefert. Diese Lücke ist nach Migrationen häufig.

WooCommerce und Shop-Seiten

E-Commerce-Themes überschreiben manchmal Favicons pro Produkt oder Kategorie (selten, via SEO-Plugins). Nach Theme-Updates:

1. Startseite, Produktseite und Checkout-Favicon prüfen
2. Checkout nicht auf Subdomain ohne Site Icon lassen
3. WooCommerce- und CDN-Cache nach Icon-Wechsel purgen

Konsistentes Tab-Branding beim Checkout unterstützt Vertrauen beim Bezahlen.

Managed WordPress und Host-Einschränkungen

Managed Hosts (WP Engine, Kinsta, Raidboxes) erlauben manchmal kein FTP ins Domain-Root oberhalb von WordPress. Dann:

• Support nach Root-favicon.ico-Mapping fragen
• Oder CDN-Regel setzen, die /favicon.ico auf die Site-Icon-URL zeigt
• Scan trotzdem ausführen, um zu sehen, ob der Fallback fehlt

Ohne Root-ICO funktionieren HTML-Tags meist trotzdem, aber E-Mail-Signaturen und ältere Tools zeigen weiterhin Generics.

Block-Themes (FSE) und Full Site Editing

WordPress-Block-Themes speichern Templates in der Datenbank. Site Icon bleibt im Customizer, manche Block-Themes injizieren zusätzliche link-Tags über theme.json oder Pattern-Header.

Nach Theme-Wechsel:

1. Site Icon neu speichern, auch wenn Vorschau korrekt wirkt
2. Template Parts (header.html) auf hardcodierte Icon-Links prüfen
3. Site-Editor-Vorschau nutzen, dann Production-URL scannen

Klassische Theme-Tipps gelten, Duplikate verstecken sich oft in synced Patterns statt in header.php.

Gutenberg und Page-Builder-Konflikte

Elementor, Divi und Beaver Builder laden manchmal eigene <head>-Bereiche auf Landing Pages.

Symptome:

• Startseite ohne Site-Icon-Tags
• Innere Seiten mit korrektem Icon
• Builder-„Custom Code“-Block mit doppelten Favicon-Links

Fix: Builder-Header-Override auf betroffenen Seiten abschalten oder Favicon-Ausgabe ausschließlich WordPress Site Icon überlassen und Builder-Injection entfernen.

wp-cli und Bulk-Migration

Bei vielen Sites im Netzwerk kann wp-cli helfen, Site Icon-Attachments zu listen:

wp option get site_icon

Nach Domain-Umzug URLs in der Mediathek prüfen. Alte HTTP-URLs in Icon-href brechen Mixed-Content-Checks. Search-Replace-Plugins vorsichtig nutzen und danach Favicon Check auf Stichproben-URLs laufen lassen.

Site Icon vs. Custom Logo (Customizer)

WordPress unterscheidet Site Icon (Favicon) und Custom Logo (Header-Bild). Das Custom Logo ist oft breit und hochauflösend. Nicht als Site Icon hochladen ohne quadratischen Crop.

Wenn Design nur ein breites Logo liefert:

1. Quadratischen Ausschnitt exportieren
2. Als Site Icon setzen
3. Breites Logo separat als Custom Logo

So bleibt das Tab-Icon lesbar und der Header behält volle Markenbreite.

Updates nach WordPress-Core-Upgrade

Major WordPress-Releases ändern selten Site Icon, aber Block-Themes und Customizer-UI können sich verschieben. Nach Core-Upgrade:

1. Customizer öffnen und Site Icon-Vorschau prüfen
2. Mediathek-URLs auf 404 testen
3. Cache purgen und Favicon Check auf Startseite laufen lassen

Ein Upgrade ersetzt nicht automatisch deine Icons, aber Permalink- oder Upload-Pfad-Änderungen können indirekt Icon-URLs brechen.

Bei Managed-Hosting-Support-Tickets immer die betroffene Live-URL und einen Screenshot aus Favicon Check anhängen. Das verkürzt die Rückfragen zur Root-favicon.ico-Frage erheblich.

Speichere in der Projektdoku, ob Root-ICO per FTP, CDN-Regel oder gar nicht möglich ist. Nächstes Teammitglied spart damit eine Stunde Host-Recherche.

Local Development vs. Production

Auf localhost oder .local-Domains sehen Site-Icon-URLs oft korrekt aus, während Production unter HTTPS andere Mediathek-Pfade nutzt. Nach jedem Staging-Deploy die öffentliche URL scannen, nicht nur wp-admin-Vorschau. Plugin-Caches wie WP Rocket können HTML mit alten Icon-Links ausliefern, obwohl Mediathek schon neue Dateien zeigt.

FAQ

Wo ist die Favicon-Einstellung in WordPress?

Design > Customizer > Website-Identität > Site Icon in wp-admin. Block-Themes nutzen denselben Customizer-Pfad.

Welche Größe für WordPress Site Icon?

Mindestens 512×512 px, quadratisch. WordPress erzeugt 32×32, 180×180, 192×192 und weitere Größen automatisch.

Erstellt WordPress favicon.ico?

Site Icon erzeugt PNG-Varianten in uploads. Nicht immer favicon.ico an Domain-Root. ICO separat hochladen für Legacy-Fallback.

SVG-Favicons in WordPress?

Core Site Icon erlaubt kein SVG-Upload aus Sicherheitsgründen. PNG nutzen. SVG in Theme-Dateien möglich, selten, braucht PNG-Fallback.

Warum unterscheidet sich WordPress-Favicon von Staging?

Andere Site-Icon-Media-IDs, Cache oder veraltete Staging-Domain. Seitenquelltext auf beiden URLs mit Favicon Check vergleichen.

Ersetzen SEO-Plugins WordPress Site Icon?

Meist nein. Sie ergänzen Open-Graph-Bilder und Meta-Tags. Favicon bleibt Site Icon, außer ein Favicon-Plugin überschreibt.

WordPress-Favicon nach Migration fixen?

Site Icon im Customizer neu speichern, Einstellungen > Allgemein URLs aktualisieren, Cache purgen, Root-favicon.ico hochladen, Production scannen.

Favicon und OG-Bild in WordPress angleichen?

Gleiche Marke, andere Dateien und Größen. Favicon quadratisch und klein. OG-Bild 1200×630 für Social Shares. Siehe Favicon vs. Open-Graph-Bild.

Fazit

WordPress-Favicons starten mit Site Icon im Customizer. Theme-Duplikate entfernen, Root-favicon.ico bei Bedarf ergänzen, Cache nach Änderungen purgen und Live-URL mit Favicon Check scannen.

Zur Launch-Woche Open Graph Check dazu, damit Tabs und geteilte Links zur aktuellen Marke passen.