HTML Favicon
Ein Favicon ist ein kleines Bild, das neben dem Seitentitel im Browser-Tab angezeigt wird.
So fügen Sie ein Favicon in HTML hinzu
Sie können jedes beliebige Bild als Favicon verwenden. Sie können auch Ihr eigenes Favicon auf Websites wie erstellen https://favicon.cc.
Tipp: Ein Favicon ist ein kleines Bild, daher sollte es ein einfaches Bild mit hohem Kontrast sein.
Ein Favicon-Bild wird links neben dem Seitentitel im Browser-Tab angezeigt, etwa so:
Um Ihrer Website ein Favicon hinzuzufügen, speichern Sie Ihr Favicon-Bild entweder im Stammverzeichnis Ihres Webservers oder erstellen Sie im Stammverzeichnis einen Ordner mit dem Namen „images“ und speichern Sie Ihr Favicon-Bild in diesem Ordner. Ein gebräuchlicher Name für ein Favicon-Bild ist "favicon.ico".
Fügen Sie als Nächstes ein <link>-Element zu Ihrer „index.html“-Datei hinzu, nach dem Element <title>, etwa so:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Speichern Sie nun die Datei „index.html“ und laden Sie sie erneut in Ihren Browser. Ihr Browser-Tab sollte nun Ihr Favicon-Bild links neben dem Seitentitel anzeigen.
Unterstützung des Favicon-Dateiformats
Die folgende Tabelle zeigt die Dateiformatunterstützung für ein Favicon-Bild:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Ja | Ja | Ja | Ja | Ja |
| Chrome | Ja | Ja | Ja | Ja | Ja |
| Firefox | Ja | Ja | Ja | Ja | Ja |
| Opera | Ja | Ja | Ja | Ja | Ja |
| Safari | Ja | Ja | Ja | Ja | Ja |
Kapitelzusammenfassung
- Verwenden Sie das HTML-Element
<link>, um ein Favicon einzufügen - Beispiel:
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
HTML-Link-Tag
| Tag | Beschreibung |
|---|---|
| <link> | Definiert die Beziehung zwischen einem Dokument und einer externen Ressource |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
