Was ist ein Favicon?
Ein favicon ist ein kleines Symbol, das in Browser-Tabs, Lesezeichen und Suchergebnissen neben dem Seitentitel angezeigt wird. Es hilft dabei, eine Website visuell wiederzuerkennen und steigert so die Benutzerfreundlichkeit und das Markenbewusstsein. Besonders im E-Commerce kann ein klar sichtbares favicon das Vertrauen der Nutzer stärken.
Wie wird ein Favicon eingebunden?
Um ein favicon auf deiner Website darzustellen, musst du es im <head>-Bereich des HTML-Dokuments verlinken. Das funktioniert über sogenannte link-Tags. Hier ein Beispiel für eine gängige Integration:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
Diese Varianten decken die gängigen Browser ab, inklusive Chrome, Firefox, Safari und mobile Endgeräte. Für eine vollständige Browser-Kompatibilität ist es wichtig, alle relevanten Varianten zu berücksichtigen.
Welche Formate und Größen sind für Favicons geeignet?
Favicons gibt es in unterschiedlichen Formaten und Größen. Gängige Formate sind:
- PNG (meist für moderne Browser)
- ICO (kompatibel mit älteren Browsern)
- SVG (für skalierbare und moderne Webprojekte)
Empfohlene Größen sind 16×16, 32×32 und 48×48 Pixel. Je nach Gerät oder Plattform kann aber auch eine größere Auflösung sinnvoll sein. Tools wie der Real Favicon Generator helfen dir dabei, automatisch alle benötigten Varianten zu erstellen.
Was passiert, wenn kein Favicon gefunden wird?
Wird ein favicon nicht korrekt eingebunden, zeigen manche Browser ein Standard-Dokumentensymbol oder gar kein Symbol an. Mögliche Gründe für fehlende favicons sind:
- Fehlerhafter Pfad zur Datei
- Browser-Cache blockiert die Aktualisierung
- Das
link-Tag befindet sich nicht im<head>-Bereich - Inkompatibles Format oder falsche Dateigröße
Google zeigt das favicon einer Website auch in den mobilen Suchergebnissen an – vorausgesetzt, die Implementierung entspricht den Richtlinien. Wichtig: Stelle sicher, dass das favicon auf allen Unterseiten konsistent eingebunden ist.
Best Practices für ein Favicon
Damit dein favicon zuverlässig angezeigt wird und positiv zur User Experience beiträgt, beachte folgende Tipps:
- Speichere das favicon in verschiedenen Formaten und Größen
- Verlinke es in allen HTML-Dokumenten im
<head> - Nutze eine klare, gut erkennbare Grafik (Logo oder Icon)
- Stelle sicher, dass die Datei über HTTPS ausgeliefert wird
- Aktualisiere das favicon regelmäßig im Zusammenhang mit einem Redesign oder Rebranding
Fazit
Ein favicon ist mehr als nur ein kleines Bild – es ist ein wichtiges Element für Wiedererkennung, Usability und Professionalität deiner Website. Besonders im Online-Handel trägt ein gut sichtbares favicon zur Vertrauensbildung bei und stärkt deine Marke in der digitalen Umgebung. Dank Tools und Generatoren ist die Implementierung einfach und schnell umzusetzen.