Definition: Was ist ein Favicon?
Ein Favicon ist ein kleines Symbol, das in Browser-Tabs, Lesezeichen und auf dem Homescreen von Smartphones erscheint.Mit nur 16 × 16 Pixeln transportiert es deine Markenidentität und sorgt für einen professionellen, vertrauenswürdigen Auftritt im Internet.
Warum ein Favicon wichtig ist
- Branding: Nutzer erkennen deine Website auf einen Blick – auch bei vielen offenen Tabs.
- Vertrauen: Websites ohne Favicon wirken unfertig oder unseriös.
- Benutzerfreundlichkeit und Barrierefreiheit: Favicons erleichtern die Orientierung, besonders bei mehreren geöffneten Seiten.
- PWA-Unterstützung: Favicons sind Pflichtbestandteil für Progressive Web Apps (PWA) auf Mobilgeräten.
Empfohlene Formate und Größen (Stand 2025)
| Größe | Einsatzbereich | Format |
|---|---|---|
| 16 × 16 px | Klassisches Browser-Tab | .ico oder .png |
| 32 × 32 px | Desktop-Lesezeichen, Retina-Displays | .png |
| 180 × 180 px | iOS Safari Homescreen-Icon („Web Clip“) | .png |
| 512 × 512 px | Android Homescreen & PWA Manifest | .png oder .webp |
| SVG | Skalierbares Favicon für moderne Browser | .svg |
So erstellst du ein Favicon
- Logo vereinfachen: Reduziere Details auf maximal 2-3 Elemente/Farben – klare Formen wirken besser.
- Im Vektor-Format exportieren: Erstelle dein Favicon zunächst als SVG (z. B. mit Illustrator oder Figma).
- Rasterformate erstellen: Exportiere zusätzlich PNG-Dateien in den benötigten Größen.
- Optional: Mit Tools wie dem „Real Favicon Generator“ kannst du automatisch alle Formate und ein .ico-Paket erstellen.
- Transparenter Hintergrund: Favicons mit transparentem Hintergrund passen sich hellen und dunklen Themes an.
Favicon in WordPress einbinden
- Standard: Gehe im Customizer auf → Website-Identität → Website-Icon → Lade ein 512 × 512 px PNG hoch.
- SEO-Optimierung: Plugins wie Rank Math fügen automatisch Manifest- und Meta-Tags hinzu.
- Für PWA: Erweitere dein Projekt um eine
manifest.jsonmit passenden Icons. - Für SVG-Favicons: Ergänze im
<head>deiner Seite:<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Best Practices für Favicons
- Klarheit statt Verspieltheit: Keine feinen Details oder kleine Schrift – sie gehen verloren.
- Starker Kontrast: Das Icon sollte in hellen und dunklen Browseroberflächen gut erkennbar sein.
- Caching beachten: Verwende lange Cache-Zeiten und versioniere bei Änderungen (z. B.
favicon.svg?v=2).
FAQ
Muss ich noch ein .ico verwenden?
Ja, für maximale Kompatibilität mit älteren Browsern. Eine moderne .ico-Datei kann alle notwendigen Größen enthalten.
Kann ich ausschließlich SVG verwenden?
Fast alle aktuellen Browser unterstützen SVG-Favicons. Für maximale Sicherheit solltest du aber zusätzlich PNG oder ICO als Fallback bereitstellen.
Wie teste ich mein Favicon richtig?
Tools wie der Real Favicon Generator Check oder der Lighthouse PWA-Audit von Google prüfen, ob dein Favicon alle Anforderungen erfüllt.
Bereit für ein pixelperfektes Icon?
X-06 Designs erstellt dein Favicon so klar, präzise und optimiert, dass es in jedem Browser glänzt!