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 ein beliebiges Bild als Favicon verwenden. Sie können auch Ihr eigenes Favicon auf Websites wie https://favicon.cc erstellen .
Tipp: Ein Favicon ist ein kleines Bild, daher sollte es ein einfaches Bild mit hohem Kontrast sein.
Links neben dem Seitentitel im Browser-Tab wird ein Favicon-Bild wie folgt angezeigt:
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 nach dem <title>Element hinzu, wie folgt:
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 Ihrem 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 | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Kapitelzusammenfassung
- Verwenden Sie das HTML
<link>-Element, um ein Favicon einzufügen
HTML-Link-Tag
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .