Wie man ein Website-Icon in HTML hinzufügt

Lernen Sie, wie man ein Website-Icon (Favicon) in HTML hinzufügt.

Wie man ein Website-Icon in HTML hinzufügt

Das Website-Icon (favicon) ist ein kleines Bild, das neben dem Seitentitel im Browser-Tab angezeigt wird.

Sie können jedes Bild Ihrer Wahl als Website-Icon verwenden. Sie können auch auf Websites wie https://favicon.cc Ihr eigenes Website-Icon erstellen.

Tipp:Ein Website-Icon ist ein kleines Bild, daher sollte es ein einfaches Bild mit hohem Kontrast sein.

Das Website-Icon wird links vom Seitentitel im Browser-Tab angezeigt, wie im Folgenden gezeigt:

Beispiel für ein Website-Icon

Um das Website-Icon zu Ihrem Website hinzuzufügen, speichern Sie Ihr Website-Icon-Bild im Wurzelverzeichnis des Web-Servers oder erstellen Sie im Wurzelverzeichnis einen Ordner namens "images" und speichern Sie Ihr Website-Icon-Bild in diesem Ordner. Der gebräuchliche Name für das Website-Icon-Bild ist "favicon.ico".

Nächste, in der Datei "index.html" <title> hinter einem Element hinzufügen <link> Elemente, wie im Folgenden gezeigt:

<!DOCTYPE html>
<html>
<head>
  <title>Meine Seitentitel</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Das ist ein Überschrift</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>

Probieren Sie es selbst aus

Jetzt speichern Sie die Datei "index.html" und laden Sie sie im Browser neu. Ihr Browser-Tab sollte jetzt links vom Seitentitel Ihren Website-Icon anzeigen.