Tab-Symbol in HTML einfügen
-
Verwenden Sie
<link rel="icon">und ein PNG-Bild, um ein Favicon für die Website in HTML hinzuzufügen -
Verwenden Sie
<link rel="icon">und ein ICO-Bild, um ein Favicon für die Website in HTML hinzuzufügen
Das Tab-Symbol ist im Grunde ein winziges Symbol, das wir im Browser-Tab sehen. Es sieht im Allgemeinen wie ein sehr kleines Bild mit der minimalen Größe in Pixeln aus. Es wird auch als Favicon bezeichnet. In diesem Artikel werden Methoden zum Hinzufügen eines Browser-Tab-Symbols für eine Website in HTML vorgestellt.
Verwenden Sie <link rel="icon"> und ein PNG-Bild, um ein Favicon für die Website in HTML hinzuzufügen
Wir können das <link>-Tag und das rel="icon"-Attribut verwenden, um ein Browser-Favicon in HTML hinzuzufügen. Das Tag <link> im Code verbindet das aktuelle Dokument mit der externen Ressource. Es ist das Tag, das normalerweise verwendet wird, um auf externe Stylesheets zu verlinken. Es wird auch als leeres Element bezeichnet, da es nur Attribute enthält. Das Attribut rel wird auch verwendet, um die Beziehung zwischen einer aktuellen und einer verknüpften Ressource zu definieren. Im Attribut href können wir das Ziel des Bild-Links festlegen, der als Favicon verwendet werden soll. Im Attribut href sollte ein Bild mit der Erweiterung .png verwendet werden.
Zunächst benötigen Sie das PNG-Bild, das Sie als Favicon auf Ihrem Gerät verwenden möchten. Es muss aus winzigen Pixeln bestehen. Die gängigste Größe zum Erstellen eines Favicons ist 16x16 Pixel. Trotzdem können sie auch in etwas größeren Dimensionen erscheinen (32x32). Öffnen Sie nun im HTML-Tag <head> das Tag <link> und verwenden Sie das darin enthaltene Attribut rel. Setzen Sie das Attribut rel auf icon. Schreiben Sie danach das Attribut href und geben Sie in den Anführungszeichen die PNG-Bilddatei an, die Sie als Favicon verwenden möchten. Schließen Sie danach alle zuvor geöffneten Tags.
Als Favicon haben wir hier das Bild favicon.png verwendet. Das Image befindet sich im lokalen System. Auf diese Weise können wir einer Webseite in HTML ein Favicon hinzufügen.
Beispielcode:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Verwenden Sie <link rel="icon"> und ein ICO-Bild, um ein Favicon für die Website in HTML hinzuzufügen
Wir können das ICO-Image verwenden, um das Favicon aus Gründen der Abwärtskompatibilität in einer Website in HTML hinzuzufügen. Fast alle modernen Browser unterstützen die Verwendung des PNG-Bildes als Favicon. Für Browser wie IE10 und seine Vorgängerversionen können wir ICO-Bilder verwenden. ICO-Bilder haben .ico als Erweiterung. Wir können Tools wie ConvertICO verwenden, um die PNG-Bilder in ICO zu konvertieren.
Durchsuchen Sie beispielsweise die ConvertICO-Website und laden Sie die Datei favicon.png hoch. Die Website konvertiert das Bild in das ICO-Format und lässt es uns herunterladen. Verwenden Sie dann den Bildpfad im Attribut href im Tag <link> wie in der ersten Methode. Dann können wir das Favicon auf der Webseite sehen.
Beispielcode:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn