Ein Favicon (kurz für „favorite icon“) ist das kleine Icon, das in Browser-Tabs, Lesezeichen, mobilen Home-Bildschirmen und Browser-Geschichte neben dem Namen Ihrer Website erscheint. Es ist eines der einfachsten Branding-Elemente – aber viele Websites verwenden immer noch das Standard-WordPress-Logo oder kein Favicon überhaupt. Mit dem mobilen ersten Surfen, PWA-Unterstützung und Favicon-Größen von 16×16px bis 512×512px, mit einem scharfen, benutzerdefinierten Favicon ist für Professionalität, Markenerkennung und User Trust unerlässlich.
Bei Cope Business stellen wir immer sicher, dass Kunden während unserer technische SEO Audits — es ist ein winziges detail, das einen großen unterschied in wahrgenommener qualität macht.
Dieser Anfängerfreundliche Leitfaden zeigt Ihnen drei einfache Möglichkeiten, ein Favicon in WordPress hinzuzufügen (oder zu ändern) – alles ohne Codierung.
Warum einen benutzerdefinierten Favicon hinzufügen?
- Markenerkennung — Zeigt sofort Ihr Logo in jedem Tab/Buchzeichen
- Professioneller Look — Entfernt das Standard-WordPress “W”-Symbol
- Mobile und PWA — Erscheint auf Heimbildschirmen und App-Symbolen
- Vertrauen & Polnisch — Kleine Details signalisieren die Qualität
- SEO UND UX — Konsistentes Branding verbessert die Rückhaltesignale des Benutzers
Empfohlene Favicon Größen & Formate
- Standard — 32×32px (ICO oder PNG)
- Hochauflösung — 180×180px (Apple Touch Icon), 192×192px (Android), 512×512px (manifest)
- Bestes Format — .ico (weit unterstützt), .png (transparent), .svg (vektor – moderne browser)
Erstellen Sie eine 512×512 PNG — WordPress wird alle Größen automatisch generieren.
Methode 1: Mit dem WordPress Customizer (Built-in – einfachste)
Arbeiten an den meisten modernen Themen (Astra, GeneratePress, Kadence, Blocksy, etc.).
Schritte
- Gehen Sie Erscheinung > Anpassen.
- Sieh nach Site Identity (in der nähe der spitze).
- Scroll to Site Icon (oder “Favicon / Site Icon”).
- Klicken Sie auf Bild auswählen → Hochladen Sie Ihre 512×512 PNG (oder jedes quadratische Bild ≥ 512px).
- WordPress generiert automatisch alle erforderlichen Größen (16×16, 32×32, 180×180, etc.).
- Klicken Sie auf Veröffentlichen.
Fertig! Löschen Sie Ihren Browser-Cache (Ctrl + F5), um das neue favicon in Tabs zu sehen.
Pros: Native, keine Plugins, automatische Größe Generation.
Negativ: Einige ältere Themen unterstützen Site Icon nicht (verwenden Sie Methode 2 oder 3).
Methode 2: Verwendung eines Plugins (Best for Full Control & Older Themes)
Plugins geben Ihnen mehr Optionen, Favicon-Vorschau und Kompatibilität.
Empfohlenes Plugin: Favicon von RealFaviconGenerator (kostenlos)
- Installieren Favicon von RealFaviconGenerator von Plugins > Neues hinzufügen.
- Gehen Sie Erscheinung > Favicon.
- Laden Sie Ihr Masterbild hoch (empfohlen: 260×260px Minimum, Quadrat PNG).
- Klicken Sie auf Favicon generieren → Plugin erstellt alle Formate (ICO, PNG, Apple Touch, Android, Manifest).
- Klicken Sie auf Installieren Sie favicon → Alle Dateien werden automatisch hinzugefügt.
- Fertig — arbeitet an allen Browsern/Geräten.
Alternative Plugin: Alles in einem Favicon (kostenlos) — einfach hochladen, unterstützt mehrere formate.
Pros: Erzeugt perfekte Multi-Gerät Favicons, einfache Vorschau.
Negativ: Füget ein kleines Plugin hinzu.
Methode 3: Manuelle Upload (für erweiterte Benutzer oder Vollsteuerung)
Kein Plugin erforderlich — funktioniert auf jedem Thema.
Schritte
- Dateien vorbereiten:
- Erstellen Sie favicon.ico (32×32 oder Multi-Size) mit favicon.io oder RealFaviconGenerator.net
- Optional: apple-touch-icon.png (180×180), android-chrom-192×192.png, etc.
- Laden Sie Dateien über FTP oder Hosting-Dateimanager zu Ihrem Thema root:
- /wp-content/themes/yourtheme/favicon.ico
- Oder besser: /wp-content/uploads/01/favicon.ico
- Zu Header hinzufügen (über Kinderthema oder WPCode):
PHPfunction cope_add_favicon() { echo '<link rel="icon" type="image/x-icon" href="' . get_site_url() . '/favicon.ico">'; echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_site_url() . '/apple-touch-icon.png">'; } add_action('wp_head', 'cope_add_favicon');- Löschen Sie Browser-Cache und Test.
Pros: Kein Plugin, volle Kontrolle.
Negativ: Manuelle Dateiverwaltung, keine Autogeneration.
Best Practices für Favicons
- Verwendung 512×512 PNG als Master-Bild — WordPress/Plugins erzeugen kleinere Größen
- Vorraussetzung .ico für maximale kompatibilität (ältere browser)
- Hinzufügen apfel-touch-ikon und manifest.json für PWA/home-Bildschirmunterstützung
- Testen Sie überall: Chrome, Firefox, Safari, Edge, mobile Home-Bildschirme
- Performance — Dateigrößen klein halten (<100KB)
- SEO — Consistent branding verbessert Vertrauenssignale
Letzte Gedanken
Hinzufügen eines benutzerdefinierten Favicon in WordPress ist ein schnelles Branding-Upgrade, das Ihre Website poliert und professionelle aussehen lässt. Verwenden Sie die Site Identity option im customizer für die einfachste methode, oder Favicon von RealFaviconGenerator für perfekte multi-device-unterstützung – beide unter 5 minuten.
Ein tolles Favicon ist ein kleines Detail, das großes Vertrauen baut.
Brauchen Sie Hilfe beim Hinzufügen eines Favicons, der Optimierung von Bildern oder der Verbesserung der gesamten Branding & Performance Ihrer Website? Kontakt Cope Business für eine kostenlose technische SEO Beratung – wir überprüfen Ihre Website und implementieren einen professionellen, konsequenten Blick auf jedes Gerät.
