WordPress Favicon ändern 2026: 3 Methoden in 2 Minuten

Was ist ein Favicon

Ursprünglich (1999) war das Favicon ein 16×16 px großes .ico-File. 2026 ist es ein 512×512 px PNG, das der Browser automatisch auf die passende Größe skaliert. WordPress nennt es offiziell „Site Icon“ und generiert daraus alle benötigten Varianten: Browser-Tab (16×16, 32×32), Apple Touch Icon (180×180), PWA-Icon (192×192, 512×512).

Richtige Größe und Format 2026

Optimal ist ein 512×512 px PNG mit transparentem Hintergrund. WordPress generiert automatisch alle benötigten Größen. Mindestgröße: 512×512 px. Format: PNG (transparent) oder JPG (mit Hintergrund). SVG wird 2026 zunehmend unterstützt, aber nicht von allen Browsern als Favicon akzeptiert.

Anforderungen 2026:

1. Mindestgröße: 512×512 px (WordPress fordert exakt diese Größe an)
2. Format: PNG bevorzugt (Transparenz), JPG für komplexe Logos mit Hintergrund
3. Dateigröße: unter 100 KB
4. Aspect Ratio: 1:1 quadratisch
5. Lesbarkeit bei 16×16: Logo muss auch in winziger Größe erkennbar sein

Methode 1: Customizer (Standard-WordPress)

Die einfachste Methode 2026 ist der WordPress Customizer. Funktioniert mit jedem Theme. Setup unter zwei Minuten.

1. WP-Admin → Design → Customize
2. Bereich „Website-Informationen“ oder „Site Identity“
3. „Website-Icon“ hinzufügen — Datei hochladen (512×512 PNG)
4. Vorschau prüfen: Browser-Tab + Bookmark + Mobile-Icon
5. „Veröffentlichen“ klicken
6. Browser-Cache leeren (Strg+F5), Tab neu öffnen — Favicon erscheint

WordPress speichert das hochgeladene Bild als Attachment und liefert per wp_get_attachment_image() die korrekten Varianten an Browser aus. Im Frontend stehen automatisch die Tags <link rel="icon">, <link rel="apple-touch-icon"> im HEAD-Bereich.

Methode 2: Astra-Theme-Settings

Astra bringt eine Komfort-Funktion zur Logo-Konfiguration mit. Im Customizer unter Customize → Logo & Site Identity stehen sowohl Site-Logo als auch Site-Icon (Favicon) zur Verfügung — beide separat hochladbar.

Vorteile gegenüber Standard-Customizer:

1. Site-Logo und Favicon getrennt verwaltbar
2. Logo automatisch retina-fähig
3. Dark-Mode-Variante optional
4. Header-Logo und Mobile-Header-Logo separat

nutzt diese Funktion auf jeder Astra-Site. Setup-Zeit für komplettes Logo-Plus-Favicon-Branding: 5 Minuten inklusive Retina-Variante.

Methode 3: Code-Snippet oder Favicon-Plugin

Wer mehrere Favicon-Größen oder spezielle Browser-Konfigurationen will (z. B. iOS-spezifische Apple Touch Icons), nutzt entweder Code im Child Theme oder das Plugin „RealFaviconGenerator for WordPress“.

Code-Variante im Child Theme:

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

Vorher das Favicon-Set lokal generieren (siehe Abschnitt 6) und die Dateien per FTP in das Child-Theme-Verzeichnis /favicons/ hochladen.

Favicon-Generatoren 2026

Statt manuell 8+ Favicon-Größen zu erstellen, nutzt man 2026 Online-Generatoren. Die besten Tools 2026: realfavicongenerator.net (Standard, kostenlos), favicon.io (einfach, kostenlos), Favicomatic (für Profis mit allen Größen).

Ablauf realfavicongenerator.net:

1. Auf realfavicongenerator.net 512×512 PNG hochladen
2. Vorschau für iOS, Android, Windows, MacOS prüfen
3. Hintergrund-Farbe für Kachel setzen (z. B. Brand-Blau #3a70ed)
4. Download des kompletten Favicon-Sets als ZIP
5. HTML-Code-Snippet kopieren
6. Dateien per FTP ins WordPress-Root-Verzeichnis hochladen
7. Code-Snippet ins Child-Theme einbinden (siehe Abschnitt 5)

Apple Touch Icon und Android

iOS- und Android-Geräte nutzen größere Icon-Varianten, wenn Nutzer eine Site zum Home-Screen hinzufügen. Diese sollten separat optimiert werden — Apple Touch Icon 180×180 px ohne abgerundete Ecken (iOS rundet automatisch), Android Manifest-Icon 192×192 px.

Standard-WordPress generiert die Apple-Touch-Variante automatisch aus dem hochgeladenen 512×512-Bild. Wer feinere Kontrolle will (separates Icon für iOS-Home-Screen mit Padding), nutzt Methode 3 mit explizitem apple-touch-icon-Tag.

PWA und Manifest-Icons

Progressive Web Apps (PWA) brauchen eine site.webmanifest-Datei mit Icon-Definitionen. Plugins wie „Super PWA“ oder „PWA for WP“ generieren das automatisch. Für 2026-KMU-Sites meist nicht zwingend, aber ein Pluspunkt für die User Experience.

PWA-Icon-Größen 2026:

1. 192×192 px (Android Standard)
2. 512×512 px (Splash-Screen)
3. 180×180 px (iOS Apple Touch)
4. 96×96 px (Browser-Tab HD)
5. 32×32 px (Browser-Tab Standard)

Häufige Fehler und Fixes

Live-Test des Favicons

Nach Upload prüfen: Browser-Tab, Bookmark-Vorschau, Mobile-Home-Screen, Google SERP. Tools: realfavicongenerator.net/favicon_checker testet automatisch alle Größen und Browser.

Manuelle Tests 2026:

1. Tab in Chrome, Firefox, Safari öffnen → Favicon sichtbar?
2. Bookmark setzen → Icon korrekt?
3. Auf iPhone „Zum Home-Bildschirm“ → Apple Touch Icon korrekt?
4. Auf Android „Verknüpfung auf Startbildschirm“ → Manifest-Icon korrekt?
5. Google Search Console → URL prüfen → Favicon-Erkennung?

Favicon und Brand-Konsistenz

Das Favicon ist Teil der Corporate Identity. Es sollte mit Logo, Social-Media-Profilbild und App-Icon konsistent sein. Wer ein Favicon nur „nebenbei“ erstellt, riskiert Brand-Bruch.

Brand-Konsistenz-Checkliste 2026:

1. Favicon-Farben identisch zu Logo-Farben
2. Stilistisch konsistent (kein 3D-Logo + flaches Favicon)
3. Lesbar bei 16×16 px (Wort-Marken oft nicht — Initial nutzen)
4. Identisch zu Social-Media-Profilbildern (Facebook, LinkedIn, Twitter/X)
5. Identisch zu Mobile-App-Icon (falls vorhanden)

generiert in jedem STARTER-Paket ab 759 € das Favicon aus dem Kunden-Logo plus passende Social-Media-Profilbilder in 4 verschiedenen Größen.

Animated Favicon — Trend oder Spielerei?

Animierte GIF-Favicons sind seit 2010 technisch möglich, 2026 aber selten sinnvoll. Browser-Performance leidet, viele Browser zeigen nur das erste Frame, und das Branding wird unprofessionell. Empfehlung: statisches Favicon.

Ausnahme: SaaS-Sites mit Notification-Counter (z. B. „3 neue Nachrichten“ im Tab-Icon). Hier macht ein dynamisches Favicon Sinn — per JavaScript wird das Favicon zur Laufzeit aktualisiert. Beispiel: Gmail zeigt im Tab die Anzahl ungelesener Mails.

Favicon und Browser-Search

Google zeigt Favicons seit 2021 in Desktop-SERPs neben dem Suchergebnis. Korrektes Favicon-Setup erhöht die Click-Through-Rate (CTR) um 1–3 Prozent. Voraussetzung: Favicon mindestens 8×8 px, korrekter HTML-Tag, von Google crawlbar.

Google-Anforderungen 2026 an Favicons in SERP:

1. Mindestgröße: 8×8 px (für SERP-Display), 48×48 px für hohe DPI
2. Quadratisch, einfarbiger Hintergrund
3. Direkt erreichbar via crawlbarer URL
4. Korrekter HTML-Tag im <head>
5. Keine Markenrechtsverletzung (kein bekanntes Logo missbrauchen)

Favicon-Erstellung mit Adobe Illustrator und Figma

Für professionelle Favicons starten Designer 2026 in Adobe Illustrator oder Figma mit einem 512×512-Artboard. Vektor-basiert ermöglicht skalierungssicheres Design. Export als PNG mit Alpha-Kanal, dann via realfavicongenerator.net zu Multi-Size-Set.

Design-Schritte in Figma 2026:

1. Neues 512×512-Frame anlegen
2. Logo oder Logo-Initial einbauen (mind. 70 Prozent des Frames füllen)
3. Auf Lesbarkeit bei 16×16 prüfen (Frame mit 32× verkleinern)
4. Brand-Farben aus dem Style-Guide
5. Export als PNG mit transparentem Hintergrund
6. Test in realfavicongenerator.net Vorschau

Favicon und Dark Mode

Browser-Tabs werden 2026 oft im Dark-Mode-Modus angezeigt. Wenn das Favicon einfarbig dunkel ist, verschwindet es auf dunklem Tab-Hintergrund. Lösung: zwei Favicon-Varianten — eine für Light-Mode, eine für Dark-Mode — und per CSS-Media-Query schalten.

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Funktioniert 2026 in Chrome, Firefox, Safari.

Favicon und Markenrecht

Das Favicon ist Teil der Markenidentität und unterliegt Markenrecht. Wer ein eingetragenes Logo nutzt, sollte das auch im Favicon konsistent verwenden. Vorsicht bei der Übernahme fremder Logos (auch nicht von Partner-Unternehmen) ohne schriftliche Erlaubnis.

2026 sind Markenrechts-Verletzungen via Favicon zwar selten, aber durchsuchbar — Google Reverse Image Search findet Favicons in Sekunden. Bei Markenanmeldungen wird zunehmend auch das Web-Favicon geprüft.

Multisite-Favicons: pro Sub-Site individuell

WordPress Multisites können pro Sub-Site ein eigenes Favicon haben — Customizer-Einstellungen sind site-spezifisch. Beim Network-Admin lassen sich Standard-Favicons als Fallback definieren.739 €.

Favicon und SEO-Effekt 2026

Das Favicon ist 2026 ein direkter SEO-Faktor — Google zeigt es seit 2021 in Desktop-SERPs neben jedem Suchergebnis. Korrektes Favicon erhöht die Click-Through-Rate (CTR) um 1–3 Prozent. Bei einer Site mit 10.000 monatlichen Impressions sind das 100–300 zusätzliche Klicks pro Monat — allein durch das richtige Favicon.

Favicon und Browser-Engines 2026

Chrome, Firefox, Safari und Edge handhaben Favicons unterschiedlich. Chrome verwendet seit 2021 die größte verfügbare Variante und skaliert. Firefox bevorzugt 16×16 oder 32×32 und greift auf das spezifischste link rel=“icon“-Tag zurück. Safari (macOS und iOS) nutzt das Apple Touch Icon mit 180×180 für Home-Screen, das Standard-Favicon nur für Tabs. Edge folgt seit dem Chromium-Wechsel weitgehend Chrome. Wer all diese Cases abdecken will, liefert mehrere Tag-Varianten im HEAD: icon in PNG 32×32 und 192×192, apple-touch-icon in 180×180, optional mask-icon für Safari Pinned Tabs.

Bei mehrsprachigen Sites mit WPML oder Polylang kann jeder Sub-Site ein eigenes Favicon zugewiesen werden — sinnvoll, wenn die deutsche und englische Version unter unterschiedlichen Domains laufen (deutsche-domain.de und english-domain.com). Im WPML Multi-Domain-Setup wird das Favicon pro Domain separat im Customizer der jeweiligen Sub-Site gepflegt. Diese Detail-Konfiguration kostet zehn Minuten extra, schafft aber konsistentes Branding über alle Sprachen.

Häufige Fragen 2026

Kostenloses Angebot
☎ Jetzt anrufen