Ein HTML Favicon (kurz für “favorite icon”) ist ein kleines Symbol, das in der Registerkarte eines Browsers neben dem Seitentitel angezeigt wird. Es wird auch in Lesezeichenlisten, Browser-Tab-Leisten und anderen Bereichen verwendet. Das Favicon trägt dazu bei, eine Webseite visuell zu kennzeichnen und das Wiedererkennen der Seite zu erleichtern.
1. Was ist ein Favicon?
Ein Favicon ist ein kleines Symbol, das oft 16×16 oder 32×32 Pixel groß ist und eine Datei mit der Endung .ico, .png, .gif oder .svg verwendet. Viele Webseiten nutzen das Favicon, um ihre Marke oder ihr Logo in der Browser-Registerkarte darzustellen.
2. Hinzufügen eines Favicons in HTML
Um ein Favicon zu einer HTML-Seite hinzuzufügen, verwenden Sie das <link>-Tag im <head>-Bereich des HTML-Dokuments.
Grundlegende Syntax
Die einfachste Möglichkeit, ein Favicon hinzuzufügen, ist die Verwendung der folgenden Codezeile:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>Erklärung:
rel="icon": Gibt an, dass es sich um ein Favicon handelt.href="favicon.ico": Der Pfad zur Favicon-Datei.type="image/x-icon": Der MIME-Typ des Favicons (für.ico-Dateien).
3. Unterschiedliche Favicon-Formate und -Größen
Favicons können in verschiedenen Bildformaten und Größen vorliegen. Es ist eine gute Praxis, Favicons in mehreren Größen bereitzustellen, um sicherzustellen, dass sie auf verschiedenen Geräten und Plattformen korrekt angezeigt werden.
3.1. ICO-Format
Das .ico-Format ist das am häufigsten verwendete Favicon-Format und wird von fast allen Browsern unterstützt. Ein Vorteil von .ico-Dateien ist, dass sie mehrere Auflösungen (z.B. 16×16, 32×32) in einer einzigen Datei enthalten können.
<link rel="icon" href="favicon.ico" type="image/x-icon">3.2. PNG-Format
Das PNG-Format wird oft für moderne, hochauflösende Favicons verwendet. Es ist jedoch wichtig, PNG-Bilder in verschiedenen Größen anzubieten, da PNGs keine multiplen Auflösungen wie .ico-Dateien unterstützen.
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">sizes="32x32": Gibt die Größe des Favicons an.
3.3. SVG-Format
SVG-Favicons sind vektorbasiert und skalieren gut auf jeder Auflösung. Sie sind besonders nützlich für hochauflösende Bildschirme, aber nicht alle Browser unterstützen SVG als Favicon.
<link rel="icon" href="favicon.svg" type="image/svg+xml">3.4. Favicon für Apple-Geräte
Apple-Geräte (iPhones, iPads) verwenden spezielle, größere Icons, die apple-touch-icon genannt werden. Diese Icons erscheinen, wenn ein Benutzer Ihre Webseite auf seinem Startbildschirm speichert.
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">4. Mehrere Favicons für unterschiedliche Geräte
Es ist ratsam, mehrere Favicon-Formate und -Größen für verschiedene Geräte und Plattformen bereitzustellen. Hier ist ein Beispiel für eine vollständige Favicon-Integration:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-96x96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
</head>5. Testing und Browser-Kompatibilität
Favicons sollten in den gängigen Browsern getestet werden, um sicherzustellen, dass sie korrekt angezeigt werden. Dazu gehören:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
Die Unterstützung für die verschiedenen Favicon-Formate ist in den meisten modernen Browsern gegeben. Besonders ältere Browser können jedoch Probleme mit Formaten wie PNG oder SVG haben.
6. Best Practices für Favicons
- Optimieren Sie die Dateigröße: Favicons sollten klein und gut komprimiert sein, um die Ladezeit der Webseite nicht zu beeinträchtigen.
- Verwenden Sie mehrere Größen: Bereiten Sie Favicons in verschiedenen Größen vor, um sicherzustellen, dass sie auf allen Geräten gut aussehen.
- Berücksichtigen Sie Retina-Displays: Verwenden Sie hochauflösende Versionen von Favicons (z.B. 180×180 für Apple-Touch-Icons) für Retina-Displays und moderne Geräte.
Häufig gestellte Fragen
Warum wird mein Favicon nicht angezeigt?
Dein Favicon wird nicht angezeigt? Überprüfe unbedingt den Dateipfad im HTML-Code. Ein kleiner Fehler kann schon reichen, damit dein Browser die Datei nicht findet.
Welche Favicon-Größe sollte ich verwenden?
Die Standardgröße für Favicons ist 16×16 Pixel, da dies die häufigste Größe in Browser-Registerkarten ist. Es wird jedoch empfohlen, mehrere Größen (z.B. 32×32, 48×48, 96×96) bereitzustellen, um eine bessere Anzeige auf unterschiedlichen Geräten und Plattformen zu gewährleisten.
Was ist der Unterschied zwischen icon und apple-touch-icon?
icon wird verwendet, um das Favicon in der Browser-Registerkarte und in Lesezeichen anzuzeigen. apple-touch-icon wird speziell für Apple-Geräte verwendet, wenn ein Benutzer Ihre Webseite auf seinem Home-Bildschirm speichert. Es sollte eine größere Größe (z.B. 180×180) haben, um auf Retina-Displays gut auszusehen.
Kann ich ein animiertes Favicon verwenden?
Ja, es ist technisch möglich, ein animiertes GIF als Favicon zu verwenden. Allerdings wird dies nicht von allen Browsern unterstützt und kann die Benutzererfahrung beeinträchtigen, da Animationen in der Tab-Leiste des Browsers ablenkend wirken können.
Muss ich ein .ico-Format verwenden?
Nein, Sie müssen nicht zwingend das .ico-Format verwenden, aber es wird empfohlen, da es von allen Browsern unterstützt wird. Für modernere Browser können Sie zusätzlich PNG, SVG oder andere Bildformate bereitstellen.