♦ Was sind Favicons? Ein Favicon ist ein kleines Bild oder Symbol, das eine Webseite repräsentiert.
Favicon sind kleine Bildchen von 16×16 Pixel oder 32×32 Pixel.
♦ Wo tauchen Favicons auf?
→Ein Favicon erscheint an verschiedenen Stellen, z. B.:
▸ im Browser-Tab, direkt neben dem Seitentitel
▸ in der Adresszeile (je nach Browser)
▸ in der Lesezeichen- oder Favoritenliste.
▸ im Verlauf des Browsers.
▸ als App-Symbol, wenn eine Website auf dem Handy-Startbildschirm gespeichert wird.
▸ in den Google-Suchergebnissen neben dem Webseiten-Titel.
♦ Was ist zu beachten?
▸ Die Dateigröße sollte 16x16 oder 32x32 Pixel haben.
▸ Typische Dateiformate: .ico, .png oder .svg
▸ Meistens wird das Logo der Webseite verwendet oder ein Symbol, das zur Marke passt.
Füge diesen Code im <head>-Bereich Deiner HTML-Seite ein:
html
<!-- Standard Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG-Fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Für Apple-Geräte (optional) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Manifest für moderne Browser (optional) -->
<link rel="manifest" href="/site.webmanifest">
Achte darauf, dass die Dateipfade stimmen. "/
" bedeutet, dass sich die Datei direkt im Hauptordner Deiner Webseite befindet.
Das war's auch schon von mir. 😊
Verfasst am 17.April 2007, aktualisiert am 13.Juli 2025