Ein Favicon ist das kleine Symbol, das in Browser-Tabs, Lesezeichen und Suchergebnissen neben dem Titel einer Website erscheint. Es verbessert die Markenwahrnehmung und erleichtert die Wiedererkennung einer Website.
Doch viele Website-Betreiber stoßen bei der Implementierung auf Probleme – insbesondere in WordPress.
Inhaltsverzeichnis
Welche Größen brauche ich für Favicons und Smartphone-Icons?
Damit das Favicon Icon überall korrekt dargestellt wird, sollten Sie mehrere Größen bereitstellen. Hier sind die wichtigsten:
Standard-Favicon für Browser
- 32×32 px → Am häufigsten verwendete Größe für Browser-Tabs.
- 16×16 px → Wird von älteren Browsern und als Minimalgröße genutzt.
Icons für mobile Geräte und Apps
- 180×180 px → iPhone & iPad Retina-Displays (Apple Touch Icon).
- 192×192 px → Android Chrome Homescreen-Symbol.
- 512×512 px → Empfohlen für Google Web Apps und Android.
Weitere Formate
- SVG → Vektorbasiertes Favicon, flexibel für skalierbare Darstellungen (wird von modernen Browsern unterstützt).
- ICO → Klassisches Favicon-Format für ältere Browser-Kompatibilität.
Wie setzt man ein Favicon in WordPress richtig ein?
WordPress macht es relativ einfach, ein Favicon (auch „Website-Icon“ genannt) hochzuladen:
- Gehen Sie zu
Design > Customizer > Website-Informationen(je nach Theme kann dies leicht variieren). - Laden Sie eine Bilddatei hoch (mindestens 512×512 px).
- Speichern Sie die Änderungen – WordPress erstellt automatisch verschiedene Versionen des Icons.
Alternativ können Sie auch in manchen Themes das Favicon Icon hinterlegen.
Online-Favicon-Generatoren und Converter
Falls Sie keine Grafikprogramm nutzen möchten, können Sie Online-Tools verwenden, um ein Favicon zu erstellen oder ein Bild in das richtige Format zu konvertieren. Hier sind einige empfehlenswerte Websites:
- X-Icon Editor – Ein Online-Editor speziell für .ICO-Dateien.
- Favicon.cc – Erstellt Favicons pixelgenau im Browser.
- Convertio.co – Ermöglicht das Konvertieren von Bildern in verschiedene Icon-Formate.
- Iconifier.net – Generiert Favicons in verschiedenen Größen und Formaten aus einer einzigen Bilddatei.
Grafiksoftware zur Erstellung von Favicons
Wenn Sie ihr Favicon lieber selbst gestalten möchten, sind hier einige Programme, die Sie nutzen können:
- Adobe Photoshop – Unterstützt mehrere Formate, mit Plugins für ICO.
- GIMP – Kostenloses Open-Source-Tool mit ICO-Support.
- Canva – Ein benutzerfreundliches Online-Design-Tool, das eine einfache Erstellung von Favicons ermöglicht.
Korrekte Einbindung im HTML-Quellcode
Falls WordPress oder ein anderes CMS das Favicon nicht automatisch richtig setzt, können Sie es manuell in den <head>-Bereich der Website einfügen:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Häufige Probleme mit WordPress, Google und Co.
1. Das Favicon wird nicht aktualisiert
- Der Browser speichert Favicons oft im Cache. Lösung: Löschen Sie den Cache oder laden Sie das Favicon mit einer neuen Dateibezeichnung hoch (z. B.
favicon-v2.png). - WordPress setzt oft eigene Cache-Mechanismen ein – ein Cache-Plugin wie WP Rocket oder W3 Total Cache kann helfen.
- Manche Themes haben eine weitere Möglichkeit ein Favicon zu hinterlegen – bitte kontrollieren Sie ob hier nicht die Icons sich gegenseitig überschreiben.
2. Favicon wird in Google nicht angezeigt
- Google braucht Zeit, um das neue Icon in den Suchergebnissen anzuzeigen.
- Stellen Sie sicher, dass das Favicon unter
/favicon.icooder im<head>-Bereich derheader.phpkorrekt eingebunden ist.
3. iOS zeigt das falsche Icon
- Apple Touch Icons müssen explizit definiert werden, sonst wird eine unschöne, automatische Skalierung verwendet.
- Verwenden Sie folgenden Code im
<head>-Bereich:<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
4. Android-Icons werden nicht korrekt erkannt
- Android bevorzugt 192×192 px-Icons. Verwenden Sie diesen Code:
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
Ein gut optimiertes Favicon sorgt für eine professionelle Website-Wahrnehmung und verbessert das Branding. In WordPress ist die Einrichtung einfach, aber es lohnt sich, ein wenig Zeit in die Optimierung für verschiedene Plattformen zu investieren.
Sie brauchen Unterstützung bei der Umsetzung? Kontaktieren Sie mich und wir finden gemeinsam eine Lösung.