So fügen Sie ein Favicon zu Ihrer WordPress-Website hinzu

Ein Favicon zu WordPress hinzuzufügen dauert etwa 30 Sekunden: Gehen Sie zu Design → Anpassen → Website-Informationen → Website-Icon, laden Sie ein 512x512 PNG hoch und klicken Sie auf Veröffentlichen. Fertig.

Aber wenn das nicht funktioniert – oder Sie mehr Kontrolle möchten – lesen Sie weiter. Es gibt einige Fallstricke, die Sie kennen sollten.

Der schnelle Weg: WordPress Customizer

Dies funktioniert auf jeder WordPress-Website ab Version 4.3 (veröffentlicht 2015). Wenn Sie eine einigermaßen aktuelle Version verwenden, steht Ihnen diese Option zur Verfügung.

Schritt 1: Customizer öffnen

• Gehen Sie zu Design → Anpassen in Ihrem WordPress-Adminbereich
• Oder klicken Sie auf „Anpassen" in der Admin-Leiste, während Sie Ihre Website ansehen

Schritt 2: Website-Informationen finden

• Klicken Sie auf Website-Informationen in der Customizer-Seitenleiste
• Scrollen Sie nach unten zu Website-Icon

Schritt 3: Bild hochladen

• Klicken Sie auf Website-Icon auswählen
• Laden Sie ein PNG-Bild mit mindestens 512 x 512 Pixel hoch
• WordPress generiert automatisch alle benötigten kleineren Größen (einschließlich 32x32, 180x180 usw.)
• Beschneiden Sie bei Aufforderung und klicken Sie auf Veröffentlichen

Das war's. WordPress erledigt den Rest – es erstellt die <link>-Tags für Browser-Favicons, Apple Touch Icons und sogar das Windows-Kachelbild.

Der Code-Weg: Favicon manuell hinzufügen

Manchmal reicht der Customizer-Ansatz nicht aus. Vielleicht entwickeln Sie ein eigenes Theme oder Ihr Theme überschreibt das Standardverhalten. So fügen Sie es per Code hinzu.

Option A: Dateien im Theme ablegen

Laden Sie Ihre Favicon-Dateien in das Stammverzeichnis Ihres Themes hoch und fügen Sie dies in die functions.php Ihres Themes ein:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Option B: SVG-Favicon verwenden

SVG-Favicons skalieren perfekt und unterstützen den Dunkelmodus. Fügen Sie dies in die functions.php ein:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

Der PNG-Fallback ist für Safari gedacht, das SVG-Favicons noch nicht vollständig unterstützt.

Ein Plugin verwenden (falls bevorzugt)

Mehrere Plugins kümmern sich um Favicons, aber ehrlich gesagt funktioniert der integrierte Customizer für die meisten Websites gut genug. Plugins sind sinnvoll, wenn Sie benötigen:

• Unterschiedliche Favicons pro Seite oder Beitrag
• A/B-Tests mit verschiedenen Icons
• Multisite mit separaten Favicons pro Website

Beliebte Optionen sind All in One Favicon und Flavor (ehemals flavicon). Aber nochmals – probieren Sie zuerst den Customizer.

WordPress Block-Themes (Full Site Editing)

Wenn Sie ein Block-Theme wie Twenty Twenty-Four oder Twenty Twenty-Five verwenden, ist der Ablauf etwas anders:

1. Gehen Sie zu Design → Editor
2. Klicken Sie auf Stile (das Halbkreis-Symbol)
3. Navigieren Sie zu den globalen Stilen Ihrer Website
4. Die Website-Icon-Einstellung befindet sich weiterhin unter Design → Anpassen → Website-Informationen

Block-Themes verwenden für das Favicon immer noch denselben Customizer. WordPress hat dies noch nicht in den Website-Editor verschoben.

Empfohlene Favicon-Dateien

Für vollständige Abdeckung bereiten Sie diese Dateien vor:

Der WordPress Customizer verarbeitet die meisten davon automatisch, wenn Sie ein 512x512-Bild hochladen. Die SVG- und ICO-Dateien müssen manuell hinzugefügt werden, falls gewünscht.

Fehlerbehebung: Favicon wird nicht angezeigt

Alles leeren

Favicon-Probleme bei WordPress sind fast immer auf Caching zurückzuführen:

1. Browser-Cache: Erzwungene Aktualisierung mit Ctrl+Shift+R (Windows) oder Cmd+Shift+R (Mac)
2. WordPress-Cache: Wenn Sie WP Super Cache, W3 Total Cache oder LiteSpeed Cache verwenden – leeren Sie ihn
3. CDN-Cache: Cloudflare, Fastly oder was auch immer Sie verwenden – leeren Sie die Favicon-URLs
4. Inkognito versuchen: Öffnet eine saubere Sitzung ohne zwischengespeicherte Dateien

Plugin-Konflikte prüfen

Einige SEO-Plugins und Theme-Frameworks fügen eigene Favicon-Tags ein. Wenn Sie doppelte <link rel="icon">-Tags im Quelltext Ihrer Seite sehen:

1. Seitenquelltext anzeigen (Ctrl+U)
2. Nach „icon" oder „favicon" suchen
3. Wenn es Duplikate gibt, prüfen Sie, welches Plugin sie hinzufügt
4. Deaktivieren Sie die Favicon-Funktion des Plugins oder entfernen Sie Ihren manuellen Code

Theme-Überschreibungsprobleme

Einige Themes (besonders Premium-Themes) haben eigene Favicon-Einstellungen, die den Customizer überschreiben. Prüfen Sie:

• Das Theme-Optionen-Panel auf eine Favicon-Einstellung
• Die header.php des Themes auf fest codierte <link rel="icon">-Tags
• Die Theme-Dokumentation für Favicon-Anweisungen

Fehlerbehebung: Google zeigt falsches Favicon

Google kann Tage bis Wochen brauchen, um Favicons in Suchergebnissen zu aktualisieren. So beschleunigen Sie es:

Googles Favicon-Anforderungen

Google hat spezifische Regeln für die Anzeige von Favicons in Suchergebnissen:

• Muss ein Vielfaches von 48px sein (48x48, 96x96, 144x144)
• Muss quadratisch sein
• Darf keine unangemessenen oder NSFW-Inhalte enthalten
• Muss die Website repräsentieren (kein generisches Icon)

Aktualisierung beschleunigen

1. Stellen Sie sicher, dass Ihr Favicon live und zugänglich ist
2. Öffnen Sie die Google Search Console
3. Verwenden Sie die URL-Überprüfung für Ihre Startseite
4. Klicken Sie auf Indexierung beantragen
5. Warten Sie – es dauert in der Regel 1-2 Wochen

Fehlerbehebung: Favicon auf Desktop sichtbar, aber nicht auf Mobilgeräten

Mobile Browser sind wählerischer bei Favicon-Formaten:

• iOS Safari: Benötigt apple-touch-icon (180x180) – das reguläre Favicon wird nicht auf dem Startbildschirm angezeigt
• Android Chrome: Sucht nach manifest.json mit Icon-Referenzen für den Startbildschirm
• PWA: Benötigt sowohl 192x192 als auch 512x512 Icons, die im Web App Manifest definiert sind

Wenn Ihre WordPress-Website ein Web App Manifest hat (einige Themes und Plugins fügen eines hinzu), stellen Sie sicher, dass die Icon-Pfade darin korrekt sind.

Multisite-Überlegungen

Betreiben Sie WordPress Multisite? Jede Website benötigt ihr eigenes Favicon.

• Der Customizer ist websitespezifisch, sodass jede Unterwebsite ihr eigenes Icon haben kann
• Netzwerkweite Einstellungen umfassen kein Standard-Favicon
• Wenn Sie einen netzwerkweiten Standard möchten, fügen Sie ihn über die functions.php in einem Must-Use-Plugin (wp-content/mu-plugins/) hinzu

Best Practices

• Groß anfangen: Laden Sie mindestens 512x512 hoch – WordPress verkleinert, vergrößert aber nie
• PNG verwenden: Transparente Hintergründe funktionieren besser als JPEG
• Einfach halten: Ihr Favicon ist winzig – komplexe Logos sind bei 16x16 nicht erkennbar
• Browserübergreifend testen: Verwenden Sie Favicon.im, um Ihr Setup zu überprüfen
• Favicon versionieren: Hängen Sie ?v=2 an die URL an, wenn Sie aktualisieren, um den Cache zu umgehen

FAQ

Wie füge ich ein Favicon in WordPress hinzu?

Gehen Sie zu Design → Anpassen → Website-Informationen → Website-Icon, laden Sie ein 512x512 PNG-Bild hoch und klicken Sie auf Veröffentlichen. WordPress generiert automatisch alle erforderlichen Größen.

Welche Größe sollte ein WordPress-Favicon haben?

Laden Sie mindestens 512 x 512 Pixel hoch. WordPress erstellt automatisch 32x32, 180x180 und andere Größen. Für Google-Suchergebnisse verwenden Sie Vielfache von 48px.

Warum wird mein WordPress-Favicon nicht angezeigt?

Normalerweise ein Caching-Problem. Leeren Sie Ihren Browser-Cache, das WordPress-Cache-Plugin und den CDN-Cache. Versuchen Sie ein Inkognito-Fenster. Prüfen Sie auch auf Plugin-Konflikte, die doppelte Favicon-Tags verursachen.

Kann ich in WordPress ein SVG-Favicon verwenden?

WordPress unterstützt SVG-Uploads aus Sicherheitsgründen standardmäßig nicht. Sie können SVG-Favicon-Unterstützung manuell über functions.php-Code hinzufügen oder ein Plugin verwenden, das SVG-Uploads ermöglicht.

Wie füge ich verschiedene Favicons für Hell- und Dunkelmodus in WordPress hinzu?

Verwenden Sie ein SVG-Favicon mit eingebetteten CSS-Media-Queries für prefers-color-scheme. Fügen Sie die SVG-Datei manuell über die functions.php hinzu, da der Customizer nur PNG/ICO-Formate verarbeitet.

Referenzen

1. Site Icon - WordPress Developer Resources - Offizielle WordPress-Dokumentation
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Favicon-Test- und Validierungstool