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 spezialisiert auf SEO, Google Ads und Online-Marketing – unsere Bibliothek ergänzt dies mit praxisnahen Einblicken und fundiertem Wissen.
# News aus der KI- SEO- und Techwelt:
OpenAI will Google Chrome kaufen: Bahnt sich ein Mega-Deal an?
Im Rahmen des Antitrust-Verfahrens in den USA könnte Google gezwungen sein zumindest Anteile an seinem Webbrowser Google Chrome zu verkaufen. OpenAI ...
Quanten-Computing: Wie Banken sich jetzt auf den "Q-Day" vorbereiten
Top-Banken wie JPMorgan und HSBC investieren Milliarden in Quanten-Resistenz und das aus gutem Grund. Der "Q-Day" wird die Finanzwelt revolutionieren....
Google führt KI-Overview in Deutschland ein und setzt auf strikte Guidelines (E-E-A-T)
Google hat am 26. März 2025 seine KI-Übersichten in den Suchergebnissen auch für Deutschland eingeführt. Es ist klar: KI-generierte Antworten belo...
Pixel März Update: Gemini Live & neue Fitbit- & Kamera-Features
Pixel-Nutzer aufgepasst! Der März Drop bringt aufregende Updates für Gemini Live, neue Gesundheit- und Kamera-Features. Erfahren alles über die neu...
- 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
