Favicon in WordPress hinzufügen

Seit WordPress 4.3 liefert Core eine Site Icon-Funktion aus, die für Sie die richtigen <link>-Tags zuschneidet, in der Größe ändert und einfügt. Für Standardseiten ist kein Plugin erforderlich. Verwenden Sie unseren [favicon-Generator](Tool:favicon-Generator), [PNG-zu-ICO-Konverter](Tool:png-to-ico), [SVG-zu-ICO-Konverter](Tool:svg-to-ico) und [Live-favicon-Tester](Dienstprogramm:favicon-Tester), um Ihren Icon-Satz zu erstellen und zu überprüfen, und lesen Sie den Begleiter guide für eine komprimierte Komplettlösung.

Hochgeladene Symbole werden in der Medienbibliothek gespeichert und über wp_site_icon() im Frontend referenziert. WordPress generiert beim Veröffentlichen serverseitig mehrere Größen.

Die Funktion ersetzt manuelle favicon.ico-Uploads für die meisten Blogger, Agenturen und WooCommerce-Shops.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Gehen Sie in wp-admin zu Erscheinungsbild → Anpassen → Site-Identität → Site Icon.

Klicken Sie auf „Site Icon auswählen“ und laden Sie ein Quadrat PNG mit mindestens 512 x 512 Pixel hoch. WordPress zeigt einen Live-Zuschnitt – zentrieren Sie Ihr Logo innerhalb des quadratischen sicheren Bereichs.

Klicken Sie auf Veröffentlichen. Core gibt beim nächsten Laden der Front-End-Seite das Apple-Touch-Symbol, verschiedene PNG-Größen und Meta-Tags aus.

Für Symbole pro Abschnitt oder Unterverzeichnismarken filtern Sie get_site_icon_url() in Ihrem untergeordneten Thema functions.php.

Beispielanwendungsfall: ein Netzwerk mit mehreren Standorten, bei dem jede Unterwebsite eine eindeutige Markierung benötigt, aber ein gemeinsames Thema hat. Gibt unterschiedliche URLs basierend auf blog_id zurück.

Fortgeschrittene Teams können Standard-Site-Icon-Meta aus der Warteschlange entfernen und benutzerdefinierte <Link>-Tags in header.php drucken, aber das Duplizieren funktioniert im Kern bereits gut.

Einzelner Blog: 512×512 PNG über Customizer hochladen. Fertig – kein FTP, keine .ico-Bearbeitung.

WooCommerce-Shop: gleicher Ablauf; Überprüfen Sie das Symbol auf den Checkout- und Kontoseiten, nicht nur auf der Startseite. Caching-Plugins verzögern manchmal CSS, blockieren aber selten Symbol-Tags.

Headless WordPress: Site Icon-Tags erscheinen nur auf PHP-gerenderten Seiten. Ihr Next.js-Frontend muss in dieser Architektur seine eigenen <link>-Tags deklarieren.

Staging → Produktion: Medien-ID erneut hochladen oder migrieren. Codieren Sie absolute Symbol-URLs nur dann hart, wenn Sie sich mit der CDN-Cache-Ungültigmachung auskennen.

Beliebte SEO-Plugins können auch eine favicon-Einstellung verfügbar machen. Vermeiden Sie es, sowohl das SEO-Plugin als auch Site Icon unterschiedlich zu konfigurieren – wählen Sie eine Quelle der Wahrheit.

Caching-Plugins (WP Rocket, W3 Total Cache) sollten keine Symboldateien blockieren, aber sie können HTML ohne neue Tags bis zur Löschung zwischenspeichern.

Favicon-Plugins machten vor WordPress 4.3 Sinn. Im Jahr 2026 sind sie überflüssig, es sei denn, Sie benötigen animierte oder geplante Symbolwechsel.

Welchen Dateityp soll ich hochladen? PNG ist am sichersten. WordPress akzeptiert JPG, aber Sie verlieren die Transparenz.

Mindestgröße? 512×512 offiziell; Größere Quellen können gut herunterskaliert werden.

Erstellt WordPress favicon.ico? Es gibt PNG-Größen und Meta-Tags aus. Browser profitieren immer noch davon, über Hosting oder ein untergeordnetes Thema ein echtes .ico im Webstamm zu platzieren.

Multisite: Jede Site hat ihre eigene Site Icon in ihrer eigenen Customizer. Netzwerkadministratoren legen pro Site fest, es sei denn, ein Theme filtert URLs global.

Browser speichern favicons getrennt von HTML. Nach der Veröffentlichung in WordPress eine Hard-Reload durchführen oder in einem privaten Fenster testen.

Hängen Sie ?ver=2 nur dann an Symbol-URLs an, wenn Sie Tags manuell rollen. Site Icon-URLs enthalten Abfrageargumente, die sich ändern, wenn Sie sie erneut hochladen.

Löschen Sie den WordPress-Objektcache und alle CDNs (Cloudflare, Jetpack Boost), wenn HTML noch auf eine alte Anhang-URL verweist.

Wenn Sie Domänen migriert haben, durchsuchen Sie die Datenbank nach alten Symbol-URLs in serialisierten Optionen – einige Importeure vermissen siteicon_id.

Verschwommenes Symbol nach dem Hochladen: Das Quellbild war kleiner als 512 × 512 oder nicht quadratisch. Von einem größeren Master regenerieren.

Kein Symbol in den Google-Ergebnissen: Google verwendet seinen eigenen Cache; Fordern Sie eine Neuindizierung in der Search Console nach dem Update von Site Icon an.

Symbol auf dem Desktop, aber nicht auf dem iPhone: iOS benötigt Apple-Touch-Symbol; Bestätigen Sie, dass Site Icon veröffentlicht und nicht nur als Entwurf in Customizer gespeichert wird.

Weißes Kästchen um das Logo: JPG mit weißem Hintergrund anstelle des transparenten PNG hochgeladen.

Verwaltete WordPress-Hosts (WP Engine, Kinsta, SiteGround) speichern HTML am Edge zwischen. Löschen Sie nach der Änderung von Site Icon alle Caches aus dem Host-Dashboard.

Cloudflare Orange-Cloud-Proxys können HTML zwischenspeichern, ohne /wp-content/uploads/-Symbole zwischenzuspeichern – normalerweise in Ordnung, aber löschen, wenn sich die Symbolanhang-URLs ändern.

Mehrsprachige Plugins (WPML, Polylang) duplizieren Site Icon standardmäßig nicht pro Sprache. Ein Symbol bedient alle Gebietsschemas, es sei denn, Sie filtern URLs.

Bedrock- oder Headless-Setups können Uploads verschieben. Bestätigen Sie Medien-URLs im Front-End-Punkt HTML, wo Ihr CDN sie erwartet.

Wenn Sie einen statischen Export (Simply Static, WP2Static) bereitstellen, generieren Sie den Export nach Symboländerungen neu, damit HTML offline neue Anhangs-IDs erhält.

Nur Benutzer mit Anpassungsfunktion (normalerweise Administratoren und Editoren bei Standardinstallationen) können Site Icon ändern. Autoren können die Marke nicht ohne erhöhte Rechte austauschen.

Auf Multisites können Super Admins netzwerkweite Themen hochladen, Site Icon bleibt jedoch pro Site bestehen, es sei denn, benutzerdefinierter Code teilt eine Anhang-URL.

Überwachen Sie Admin-Themen von Drittanbietern, die „Darstellung“ → „Anpassen“ verbergen. Möglicherweise müssen Sie Customizer erneut aktivieren oder den Deep-Link Customizer ?autofocus[section]=title_tagline verwenden.

Wenn Sie einem Kunden eine Website übergeben, dokumentieren Sie, dass favicon-Änderungen live in Customize und nicht nur in der Medienbibliothek vorgenommen werden – das Hochladen von PNG dorthin ohne Zuweisung von Site Icon bringt nichts.

Der WooCommerce-Checkout verwendet denselben Themenkopf wie der Rest des Shops. Site Icon erscheint automatisch auf den Warenkorb- und Dankesseiten.

Mitgliedschafts-Plugins, die Front-End-Vorlagen ersetzen, sollten weiterhin wp_head() aufrufen, damit Site Icon-Meta-Ausgaben erfolgen.

White-Label-Kundenportale entfernen manchmal Branding-Hooks – stellen Sie sicher, dass die Anpassungsfunktion für Abonnentenrollen nicht deaktiviert ist, wenn Kunden ihr eigenes Symbol hochladen.

E-Mail-Vorlagen verwenden nicht Site Icon. Das WooCommerce-E-Mail-Logo ist eine separate Einstellung unter „Darstellung“ → „Anpassen“ → „WooCommerce“.

Wenn Sie favicon.ico zuvor per FTP in das Webstammverzeichnis hochgeladen haben, wird es von Site Icon nicht gelöscht. Browser bevorzugen möglicherweise unvorhersehbar eine Quelle gegenüber der anderen.

Wählen Sie einen Ansatz: Verlassen Sie sich entweder auf die Ausgänge Site Icon PNG oder behalten Sie einen handgefertigten ICO mit passendem Design bei. Entfernen Sie Duplikate nach der Qualitätssicherung.

Klassische Themes mit fest codiertem Link rel=icon in header.php können den Kern Site Icon bekämpfen. Entfernen Sie manuelle Tags, wenn Sie Site Icon aktivieren.

Leeren Sie nach der Migration die Caches und testen Sie im privaten Browser, um zu sehen, welches Symbol gewinnt.

Dokumentieren Sie den gewählten Ansatz in Ihrem Runbook, damit der nächste Entwickler kein zweites widersprüchliches favicon-Plugin hinzufügt.