Inhaltsverzeichnis
Ein Favicon ist eine kleine Grafik bzw. Icon, das in der Browser Registerkarte angezeigt wird.
Es ist ein wichtiger Bestandteil jeder Internetseite, da es den Charakter einer Internetseite widerspiegelt.
In diesem Artikel werde ich dir zeigen, wie man ein Favicon mit HTML einbinden kann.
1. Erstelle ein Favicon
Das erste, was du tun musst, ist ein Favicon zu erstellen. Du kannst das Favicon selbst entwerfen oder auch einen Grafiker beauftragen.
Stelle sicher, dass das Favicon eine Größe von 16 x 16 Pixel hat. Diese Größe ist für viele Browsertypen geeignet.
2. Speichere das Favicon
Sobald du das Favicon erstellt hast, musst du es noch per FTP auf deinen Webserver laden. Speichere es in einem Verzeichnis auf deinem Server.
Es wird empfohlen, das Favicon im Hauptverzeichnis der Website zu speichern.
3. Fügende den Code ein
Um das Favicon auf deiner Internetseite anzeigen zu lassen, musst du den Code in den Head-Bereich auf jeder deiner HTML Dateien einfügen.
Verwende dazu folgenden HTML Code Schnipsel:
<head>
<link rel=”shortcut icon” type=”image/png” href=”pfad/zum/favicon.ico”>
<title>Titel der Webseite</title>
</head>
In diesem Code-Snippet wird das Favicon als ICO-Datei angegeben, aber du kannst auch andere Dateiformate wie PNG, GIF oder JPEG einsetzen. Ersetze den “pfad/zum/favicon.ico” durch den tatsächlichen Pfad zu deinem Favicon auf dem Webspace.
4. Die Datei speichern
Sobald du den Code in deine HTML-Datei eingefügt hast, speichere die Datei und laden Sie sie auf Ihren Server hoch.
Beispiel:
Hier ist ein Beispiel für den HTML Code zum Einbinden eines Favicon:
<!DOCTYPE html>
<html>
<head>
<link rel=”shortcut icon” type=”image/png” href=”favicon.png”>
<title>Titel der Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Seite</h1>
<p>Hier kommt der Inhalt der Webseite rein</p>
</body>
</html>
In diesem Beispiel wird das Favicon “favicon.png” im selben Verzeichnis wie die HTML-Datei gespeichert.
Beachte, dass der Code innerhalb des Head-Tags der HTML-Datei platziert wird.
Mein Fazit
Zusammenfassend lässt sich sagen, dass das Einbinden eines Favicon in eine Internetseite einfach ist. Folge einfach den oben genannten Schritten und du kannst ein Favicon hinzufügen.
Datum: 28. Mai 2023 / Zuletzt aktualisiert: 22. Januar 2024 von Chris Kellner
