HTML - Favicons hinzufügen: Ein Anfängerleitfaden
Was ist ein HTML Favicon?
Lassen Sie uns unsere Reise in die Welt der Favicons mit einer einfachen Frage beginnen: Haben Sie jemals die kleinen Symbole bemerkt, die neben der Titelzeile einer Website in Ihrer Browserleiste stehen? Das, meine lieben Schüler, ist, was wir ein Favicon nennen!
Ein Favicon, kurz für "favorite icon", ist ein kleines Bild, das eine Website darstellt. Es ist wie ein Miniaturlogo, das an verschiedenen Stellen erscheint:
- In der Adressleiste des Browsers
- Neben derSeitentitel auf Registerkarten
- In Lesezeichenlisten
- Auf Startbildschirmen von Smartphones, wenn Sie eine Webseite speichern
Favicons sind vielleicht klein, aber sie spielen eine große Rolle bei der Markenbildung und dem Benutzererlebnis. Sie helfen Benutzern, Ihre Website schnell unter ihren vielen geöffneten Registerkarten oder Lesezeichen zu identifizieren.
Syntax zum Hinzufügen eines Favicon
Nun, da wir wissen, was ein Favicon ist, lernen wir, wie man eines zu unseren Webseiten hinzufügt. Die Syntax ist quite einfach:
<link rel="icon" href="path/to/your/favicon.ico" type="image/x-icon">Lassen Sie uns das aufschlüsseln:
-
<link>: Dieses HTML-Tag wird verwendet, um eine Verbindung zwischen einem Dokument und einer externen Ressource zu definieren. -
rel="icon": Dieses Attribut gibt die Beziehung zwischen dem aktuellen Dokument und der verlinkten Ressource an. In diesem Fall ist es ein Icon. -
href="path/to/your/favicon.ico": Hier geben Sie den Pfad zu Ihrer Favicon-Datei an. -
type="image/x-icon": Dieses Attribut gibt den MIME-Typ der verlinkten Datei an.
Schritte zum Hinzufügen eines Favicon zur Webseite
Das Hinzufügen eines Favicon zu Ihrer Webseite ist so einfach wie ein Pie! Befolgen Sie einfach diese Schritte:
- Erstellen oder beschaffen Sie Ihr Favicon-Bild.
- Speichern Sie das Favicon im Stammverzeichnis Ihrer Website oder in einem Bilderordner.
- Fügen Sie den Favicon-Link in den
<head>-Bereich Ihres HTML-Dokuments ein.
Hier ist ein vollständiges Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine großartige Website</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Willkommen auf meiner großartigen Website!</h1>
</body>
</html>In diesem Beispiel haben wir unsere favicon.ico-Datei im selben Verzeichnis wie unsere HTML-Datei gespeichert. Wenn Sie es in einen Bilderordner gelegt haben, verwenden Sie stattdessen href="images/favicon.ico".
Liste der Favicon-Abmessungen
Favicons gibt es in verschiedenen Größen, um verschiedenen Geräten und Anwendungsfällen gerecht zu werden. Hier ist eine Tabelle der häufigen Favicon-Abmessungen:
| Abmessung | Verwendung |
|---|---|
| 16x16 px | Standard-Favicon, angezeigt in Browser-Registerkarten |
| 32x32 px | Windows-Taskleiste |
| 48x48 px | Windows-Desktop-Verknüpfung |
| 64x64 px | Windows-Startmenü |
| 152x152 px | Apple Touch Icon (für iOS-Geräte) |
| 192x192 px | Android-Startbildschirm-Symbol |
Pro-Tipp: Um sicherzustellen, dass Ihr Favicon auf allen Geräten scharf aussieht, erstellen Sie ein einzelnes hochauflösendes Bild (wie 256x256 px) und skalieren Sie es dann auf diese verschiedenen Größen herunter.
Browser-Unterstützung für verschiedene Favicon-Dateiformate
Nicht alle Browser sind gleich, insbesondere wenn es um Favicon-Unterstützung geht. Hier ist eine Tabelle, die zeigt, welche Dateiformate von den wichtigsten Browsern unterstützt werden:
| Dateiformat | Chrome | Firefox | Safari | Edge | Internet Explorer |
|---|---|---|---|---|---|
| ICO | ✓ | ✓ | ✓ | ✓ | ✓ |
| PNG | ✓ | ✓ | ✓ | ✓ | ✗ |
| GIF | ✓ | ✓ | ✓ | ✓ | ✗ |
| JPEG | ✓ | ✓ | ✓ | ✓ | ✗ |
| SVG | ✓ | ✓ | ✗ | ✓ | ✗ |
Wie Sie sehen können, ist das ICO-Format am breitesten unterstützt. Allerdings unterstützen moderne Browser auch gängigere Bildformate wie PNG, die einfacher zu handhaben sind.
Um maximale Kompatibilität zu gewährleisten, können Sie mehrere Formate bereitstellen:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">Auf diese Weise verwenden Browser, die PNG unterstützen, diese, während ältere Browser auf das ICO-Format zurückgreifen.
Schlussfolgerung
Und da haben Sie es, meine aufstrebenden Webentwickler! Sie wissen nun, wie man ein Favicon zu seinen Webseiten hinzufügt. Es ist ein kleines Detail, aber es kann einen großen Unterschied machen, wie professionell und poliert Ihre Website aussieht.
Erinnern Sie sich daran, dass in der Webentwicklung, wie im Leben, oft die kleinen Dinge zählen. Ein gut gewähltes Favicon kann die Kirsche auf dem Sahneberg Ihrer wunderschön gestalteten Website sein!
Weiters üben, weiter lernen und vor allem Spaß dabei haben! Wer weiß, vielleicht wird das nächste Favicon, das Sie erstellen, für eine Website sein, die die Welt verändert. Viel Spaß beim Coden!
Credits: Image by storyset