📌 So fügst du ein Favicon in WordPress hinzu: 3 Wege für jede Website

Eine Website ohne Favicon wirkt unfertig. Ein Besucher öffnet fünf Tabs, sucht Ihren darunter und findet ihn nicht, weil statt eines Symbols ein grauer Browser-Platzhalter erscheint. Eine Kleinigkeit? Ja. Aber es sind diese Kleinigkeiten, die den Eindruck prägen: Da hat sich jemand gekümmert oder es lieblos hingeklatscht.

WordPress hat das Hinzufügen eines Website-Symbols auf wenige Klicks vereinfacht, doch die Hälfte aller Seitenbetreiber kennt diese Funktion entweder nicht oder stößt nach dem Hochladen auf das Problem, dass das Favicon nicht angezeigt wird. Der Grund ist fast immer der Browser-Cache oder eine falsche Dateigröße.

Nachfolgend drei funktionierende Wege, ein Favicon in WordPress einzubinden: über den Customizer (der einfachste), manuell per Code und über ein Plugin. Dazu eine Aufschlüsselung der Größen- und Formatvorgaben, damit das Symbol überall erscheint: in Tabs, Lesezeichen, auf dem iPhone und auf Android.

💡 Kurzüberblick:

• Was ein Favicon ist und warum Ihre Website eines braucht: Wiedererkennung, Vertrauen, Tab-Navigation
• Dateivorgaben: ein quadratisches Bild in Standardgröße, Format PNG, ICO oder SVG
• Methode 1: Upload über „Website" → Customizer (2 Minuten, ohne Plugins)
• Methode 2: Manuelles Einbinden per functions.php oder header.php (für alle, die Themes bearbeiten)
• Methode 3: Installation des Plugins Site Favicon (falls der Customizer nicht verfügbar ist)
• Was zu tun ist, wenn das Favicon nicht angezeigt wird: Browser-Cache, veraltetes ICO, CDN

Warum Ihre Website ein Favicon braucht und welche Vorgaben gelten

Ein Favicon (Kurzform von favorite icon) ist ein kleines Symbol, das der Browser links vom Seitentitel im Tab, in den Lesezeichen und im Verlauf anzeigt. Ein Nutzer mit einem Dutzend geöffneter Tabs findet Ihre Seite in Sekundenbruchteilen visuell, und zwar genau am Favicon, nicht am Titel-Text.

Die zweite Funktion ist weniger offensichtlich: Das Favicon trägt zum Aufbau einer Mikromarke bei. Wenn jemand eine Seite als Lesezeichen speichert oder die Website zum Home-Bildschirm des Smartphones hinzufügt, erscheint dort das Website-Symbol. Ohne eines setzt WordPress entweder einen grauen Platzhalter oder einen Screenshot der Seite ein, was unprofessionell aussieht.

Vorgaben zu Größe und Format

Seit 2014 unterstützt WordPress den Upload eines Website-Symbols über den Customizer. Die Vorgaben sind Standard:

• Größe: 512×512 Pixel. WordPress erzeugt automatisch herunterskalierte Kopien für Browser (32×32, 180×180 für Apple Touch Icon, 192×192 und 512×512 für Android). Sie müssen keine separaten Dateien für jede Auflösung hochladen; der Kern erledigt das selbst. Mehr zu den Vorgaben für Website-Symbole in der offiziellen WordPress-Dokumentation.
• Format: PNG (empfohlen), ICO oder SVG. PNG liefert die beste Qualität auf Retina-Bildschirmen. ICO, ein Altformat für alte Browser, ist im Jahr 2026 praktisch überflüssig.
• Was als Favicon verwenden: ein Logo, das im Quadrat wiedererkennbar und bei starker Verkleinerung noch lesbar ist. Drei oder vier Buchstaben Text auf farbigem Hintergrund funktionieren besser als eine komplexe Illustration.

Die wichtigste Regel bei der Dateivorbereitung: Sie muss quadratisch sein. WordPress beschneidet ein nicht quadratisches Bild zwangsweise, und das Ergebnis entspricht möglicherweise nicht Ihren Vorstellungen.

So fügen Sie ein Favicon in WordPress hinzu: 3 Methoden

Methode 1: über den Customizer, die einfachste

Diese Methode funktioniert mit jeder modernen WordPress-Version und einem klassischen Theme. Bei Block-Themes (FSE) ist der Weg etwas anders; ich zeige beide.

Klassisches Theme (Customizer):

• Melden Sie sich im WordPress-Admin an.
• Gehen Sie zu Design → Customizer.
• Wählen Sie den Bereich Website-Identität. In manchen Themes heißt er „Website-Informationen" oder „Website-Symbol & Logo".
• Suchen Sie das Feld Website-Symbol. Klicken Sie auf „Website-Symbol auswählen" und laden Sie ein quadratisches PNG hoch; WordPress erwartet ein Bild von mindestens 512×512, laut Dokumentation.
• Beschneiden Sie das Bild bei Bedarf mit dem integrierten Editor und klicken Sie auf „Änderungen speichern".

Block-Theme (Website-Editor, WordPress 5.9+):

Wenn das Theme Full Site Editing unterstützt, wird der Customizer durch den Website-Editor ersetzt. Gehen Sie zu Design → Editor, öffnen Sie das Stile-Panel oder die Einstellungen, suchen Sie den Bereich Website-Symbol und laden Sie dasselbe quadratische Bild hoch. Die Logik ist dieselbe, die Oberfläche anders.

Öffnen Sie die Website nach dem Speichern in einem neuen privaten Browserfenster; das Favicon sollte im Tab erscheinen. Keine Panik, wenn es nicht sofort auftaucht: Browser cachen Favicons aggressiv. Mehr dazu im FAQ-Abschnitt weiter unten.

Methode 2: manuell per functions.php

Eine Option für alle, die ein Child-Theme bearbeiten und sich nicht auf den Customizer verlassen möchten. Fügen Sie den folgenden Code in die functions.php des Child-Themes oder über das Plugin Code Snippets ein:

1
/**
2
 * Include favicon via wp_head.
3
 * The favicon.png file should be in the root of the child theme.
4
 */
5
add_action( 'wp_head', 'sdstudio_add_favicon' );
6
 
7
function sdstudio_add_favicon() {
8
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10
    echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11
}

Was hier passiert: Der wp_head-Hook fügt zwei <link>-Tags in den <head> jeder Seite ein. Das erste ist ein Standard-Favicon für Browser, das zweite ein Apple Touch Icon für Apple-Geräte (iPhone, iPad). Die Funktion get_stylesheet_directory_uri() gibt die URL des Child-Themes zurück; das Favicon muss dort abgelegt werden, im Stammverzeichnis des Theme-Ordners.

Die Datei in favicon.ico umzubenennen ist nicht nötig. WordPress arbeitet problemlos mit PNG, und Browser verstehen es ohne Weiteres. Wichtig ist ein Quadrat in Standardgröße.

Wenn Sie das Favicon nicht aus dem Theme, sondern aus dem Stammverzeichnis der Website verlinken, ersetzen Sie get_stylesheet_directory_uri() durch home_url() und passen den Pfad an:

1
$favicon_url = home_url( '/favicon.png' );

Laden Sie nach dem Einfügen des Codes favicon.png per FTP oder über den Hosting-Dateimanager in den entsprechenden Ordner hoch. Prüfen Sie das Ergebnis in einem privaten Browserfenster.

Methode 3: per Plugin

Wenn der Customizer aus irgendeinem Grund keinen Upload eines Website-Symbols zulässt (das kommt bei individuellen und veralteten Themes vor), installieren Sie das Plugin Site Favicon, das minimalistisch und kostenlos ist. Installieren Sie es auf dem Standardweg: Plugins → Installieren → Suche „Site Favicon" → Installieren → Aktivieren. Nach der Aktivierung erscheint im Admin ein Menüpunkt Einstellungen → Site Favicon, wo Sie ein Symbol hochladen und sofort eine Vorschau sehen können.

Eine weitere Option ist All in One SEO. Falls das SEO-Plugin bereits auf der Website läuft, prüfen Sie dessen Einstellungen: Dort gibt es einen Bereich für den Upload des Website-Symbols, der dasselbe ohne zusätzliches Plugin erledigt. Wir empfehlen jedoch nicht, ein schweres SEO-Paket nur für ein Favicon zu installieren; Site Favicon erledigt die Aufgabe, wiegt weniger und verursacht keine zusätzliche Last.

Nachdem Sie das Favicon mit einer der drei Methoden eingerichtet haben, prüfen Sie, ob das Symbol tatsächlich angezeigt wird: Öffnen Sie die Website im Inkognito-Modus und schauen Sie auf den Browser-Tab.

Das Video oben ist eine Schritt-für-Schritt-Demonstration aller drei Methoden auf einer Live-WordPress-Website. Wenn Sie nach dem Lesen noch Zweifel bei einem der Schritte haben, sehen Sie sich das Video an: Bei 1:15 wird der Upload über den Customizer gezeigt, bei 3:40 die manuelle Methode.

⁉️🤔 Häufig gestellte Fragen

Warum wird das Favicon nach dem Upload über den Customizer nicht angezeigt?

In den meisten Fällen liegt das Problem am Browser-Cache. Favicons werden aggressiv gecacht; der Browser kann die alte Version mehrere Tage lang vorhalten. Öffnen Sie die Website im Inkognito-Modus (Strg+Umschalt+N in Chrome): Erscheint das Symbol, liegt es tatsächlich am Cache. Leeren Sie Ihren Browser-Cache oder warten Sie, bis er von selbst abläuft. Der zweithäufigste Grund: Das Favicon wurde im ICO-Format hochgeladen, während der Browser PNG erwartet. WordPress bevorzugt seit Version 4.3 PNG; laden Sie ein Quadrat in Standardgröße als PNG hoch, wie es die Dokumentation verlangt, und das Problem ist behoben.

Kann ich mein Logo als Favicon verwenden?

Das können und sollten Sie; es ist gängige Praxis. Aber nicht jedes Logo eignet sich. Prüfen Sie, wie Ihr Logo in kleiner Darstellung aussieht: Verschwimmen die Details zu einem unleserlichen Klecks, erstellen Sie eine vereinfachte Version. Ein gutes Beispiel ist das WordPress-Symbol (W auf blauem Grund): selbst in winziger Größe wiedererkennbar. Ein horizontales Logo mit zehn Buchstaben Text wird bei starker Verkleinerung zu einem grauen Strich; verwenden Sie für das Favicon nur die Bildmarke ohne Text.

Warum verlangt WordPress ein Favicon genau dieser Größe?

Für WordPress, ja. Der Kern akzeptiert genau diese Größe als Quelle und generiert alle nötigen verkleinerten Kopien automatisch; die offizielle Dokumentation bestätigt die Mindestanforderung von 512 px pro Seite. Laden Sie ein kleineres Favicon hoch (zum Beispiel 128×128), erfolgt die Hochskalierung auf 512 Pixel mit Qualitätsverlust, und auf Retina-Bildschirmen wirkt das Symbol unscharf. Die Ausnahme: Wenn Sie das Favicon manuell per Code einbinden (Methode 2), können Sie mehrere Größen vorbereiten und mit separaten <link>-Tags angeben.

Wie entferne oder ersetze ich ein Favicon?

Der Austausch erfolgt über dieselbe Oberfläche, in der Sie es hochgeladen haben: Customizer → Website-Identität → Website-Symbol → „Entfernen" und dann ein neues hochladen. Das alte Symbol bleibt noch einige Zeit (bis zu mehreren Tagen) im Browser-Cache; das ist normal. Für die vollständige Entfernung nutzen Sie die Schaltfläche „Entfernen" in derselben Oberfläche; danach gibt WordPress keine Favicon-Tags mehr aus und der Browser kehrt zum grauen Platzhalter zurück.

Beeinflusst ein Favicon die Suchmaschinenoptimierung?

Direkt: nein. Google nutzt das Vorhandensein oder Fehlen eines Favicons nicht als Rankingfaktor. Indirekt: ja. Eine Website mit Favicon wirkt professioneller, und Nutzer verwechseln sie beim Navigieren in Tabs seltener mit Wettbewerbern. Das reduziert die Pogo-Sticking-Rate (Rückkehr zu den Suchergebnissen), die Suchmaschinen indirekt berücksichtigen. Zudem zeigt Google Favicons gelegentlich in den mobilen Suchergebnissen an; das Symbol macht das Snippet visuell auffälliger, was die Klickrate verbessert.

Welche Methode wählen: ein kurzer Algorithmus

Haben Sie ein Standard-Theme mit Customizer, nutzen Sie Methode 1. Das sind zwei Klicks, und WordPress übernimmt die gesamte technische Arbeit: Größenanpassung, Tag-Generierung, Apple- und Android-Unterstützung. Neun von zehn WordPress-Websites lösen die Favicon-Frage genau auf diesem Weg.

Ein individuelles Theme ohne Unterstützung für das Website-Symbol? Binden Sie es per functions.php ein (Methode 2); der dreizeilige Code gibt Ihnen volle Kontrolle über Größen und Format. Das Plugin (Methode 3) heben Sie sich für Fälle auf, in denen weder Customizer noch Theme-Bearbeitung verfügbar sind, zum Beispiel wenn die Website in einer Multisite-Installation mit eingeschränkten Berechtigungen läuft oder Sie mit einem Builder arbeiten, der keinen Zugriff auf functions.php gewährt.

Und das Wichtigste: Prüfen Sie die Website nach dem Favicon-Upload in einem neuen Inkognito-Modus des Browsers. Verlassen Sie sich nicht auf ein normales Fenster; dort kann die alte Version oder der Platzhalter selbst gecacht sein. Sehen Sie das Symbol im Tab? Fertig.