Favicon: Bedeutung, Umsetzung und Best Practices
Ein Favicon ist ein kleines Website-Symbol, das im Browser-Tab, in Lesezeichen, bei mobilen Shortcuts oder auch in Suchergebnissen angezeigt wird. Der Begriff steht für "Favorite Icon" und dient zur Wiedererkennung und Markenbildung im digitalen Raum. Das Favicon gehört zu den wichtigen visuellen Elementen einer Website und sollte deshalb nicht unterschätzt werden - weder optisch noch technisch.
Was ist ein Favicon?
Ein Favicon ist typischerweise eine quadratische Grafik im Format 16x16 oder 32x32 Pixel. Moderne Browser unterstützen jedoch auch SVGs und größere PNG-Dateien bis 512x512 Pixel. Es ist eng mit der Domain verknüpft und wird automatisch angezeigt, wenn die Seite geladen oder gespeichert wird.
Wie wird ein Favicon eingebunden?
<link rel="icon" href="/favicon.ico" type="image/x-icon">Dieser HTML-Tag gehört in den <head>-Bereich deiner Webseite. Dabei muss die Datei "favicon.ico" im Root-Verzeichnis des Webservers liegen oder der Pfad entsprechend angepasst werden.
Beispiele: Richtig vs. falsch
| Beispiel | Beschreibung | Bewertung |
|---|---|---|
| <link rel="icon" href="/favicon.ico"> | Standard-Icon im Root-Verzeichnis | Empfohlen |
| <link rel="icon" href="favicon.png"> | Moderne PNG-Version - ebenfalls gültig | Alternativ |
| <link href="favicon.ico"> | Fehlendes rel-Attribut |
Fehlerhaft |
| <link rel="icon" href="http://externe-domain.com/favicon.ico"> | Externe Quelle - kann blockiert werden | Nicht empfohlen |
Warum ist ein Favicon wichtig?
- Wiedererkennungswert: Das Favicon stärkt die visuelle Markenidentität im Browser-Tab.
- Professioneller Eindruck: Websites ohne Favicon wirken unvollständig oder technisch unaufgeräumt.
- Unterstützung bei Suchmaschinen: In mobilen Suchergebnissen (z.B. Google) wird das Favicon teilweise mit angezeigt.
- Nutzerbindung: In Lesezeichen-Listen oder auf Startbildschirmen hilft das Icon bei der Orientierung.
Best Practices zur Favicon-Erstellung
Quadratisches Format wählen
Das Favicon sollte mindestens 48x48 Pixel groß sein. Moderne Browser skalieren es automatisch herunter.
Mehrere Formate bereitstellen
Für beste Kompatibilität empfiehlt sich die Bereitstellung von .ico, .png und ggf. .svg.
Pfadstruktur beachten
Die Datei sollte entweder im Root-Verzeichnis oder über einen korrekten relativen Pfad eingebunden werden.
Performance prüfen
Ein zu großes Favicon kann unnötig Ladezeit verursachen. Idealerweise ist die Datei unter 20 KB groß.
Erweiterte Optionen: Apple Touch Icon und Manifest
Für progressive Web-Apps und mobile Geräte lohnt sich die Erweiterung um sogenannte Touch Icons. Beispiel:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Diese Elemente helfen insbesondere auf iOS-Geräten, das Favicon auch bei "Zum Startbildschirm hinzufügen" korrekt darzustellen.
Favicon bei Bing: Was ist anders?
Im Gegensatz zu Google erkennt Bing Favicons nicht automatisch in allen Fällen. Besonders in den Bing-Suchergebnissen kann es passieren, dass das Symbol nicht angezeigt wird - selbst wenn es technisch korrekt eingebunden ist.
Richtlinien für Bing
- Dateiformat: Bing bevorzugt eine
.ico-Datei mit einer Mindestgröße von 32x32 Pixel. - Pfad: Die Datei sollte unter
/favicon.icodirekt im Root-Verzeichnis der Domain liegen. - Dateigröße: Optimalerweise kleiner als 100 KB.
- HTML-Einbindung: Zusätzlich zum Standard-Link empfiehlt sich die explizite Angabe des Dateityps.
<link rel="icon" type="image/x-icon" href="/favicon.ico">Favicon bei Bing registrieren (optional)
In den Bing Webmaster Tools kann ein Favicon auch manuell über die Site-Analyse geprüft werden. Hier lässt sich kontrollieren, ob das Symbol erfolgreich geladen und indexiert wurde.
Hinweis:
Laut Microsoft muss das Favicon der Hauptdomain entsprechen. Bei Subdomains oder Sprachversionen kann es passieren, dass Bing kein Symbol anzeigt - selbst wenn es korrekt eingebunden ist.
Leadsleader ist eine spezialisierte Online-Marketing Agentur in den Bereichen SEO, SEO Beratung und Google Ads. Wir steigern die Sichtbarkeit Ihrer Website und reduzieren Ihre Google Ads Kosten. Zusätzlich bieten wir praxisnahe Live-Webinare an.
- Absprungrate
- Ankertext
- Backlinkaufbau
- Backlinks
- Breadcrumb
- Broken Links
- Cloaking
- Conversion Tracking
- Crawl Rate
- Domain-Autorität
- Duplicate Content
- Hreflang
- Impressionen
- Indexierung
- Keyword Recherche
- Keyword Stuffing
- Keyworddichte
- Keywords
- Knowledge Graph
- Link Juice
- Meta Description
- Metadaten
- Mobile-First Indexing
- No Follow Link
- Off-Page-Optimierung
- On-Page
- Organische Klicks
- Page Title
- Pagerank
- Pagespeed
