Favicon in HTML festlegen
Das Favicon ist das kleine Symbol, das im Browser-Tab oder in Lesezeichen angezeigt wird. Auch wenn es klein ist, ist es ein wichtiger Bestandteil des Markenauftritts einer Website.
Was ist ein Favicon?
Ein Favicon ist ein kleines Bild, das eine Website im Browser-Tab, im Browserverlauf oder sogar auf Mobilgeräten symbolisiert. Es ist oft eine vereinfachte Version eines Logos.
Ein einfaches Favicon hinzufügen
Die einfachste Methode ist es, ein <link>-Tag im <head>-Bereich der Seite zu platzieren, das auf eine favicon.ico-Datei verweist:
html
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>Wo sollte sich die Favicon-Datei befinden?
Die meisten Browser suchen automatisch unter /favicon.ico im Root-Verzeichnis der Website. Am besten platzierst du die Datei dort, aber du kannst auch einen anderen Pfad angeben, solange du ihn im <link>-Tag definierst.
Favicon-Formate
.ico ist das gängigste Format, aber du kannst auch PNG, GIF, SVG oder andere Bildformate verwenden. Wichtig ist, dass die Datei klein ist – typischerweise 16×16 oder 32×32 Pixel.
Alternative Favicon-Formate angeben
Wenn du kein .ico-Format verwendest, solltest du den Dateityp mit dem type-Attribut angeben. Zum Beispiel:
html
<link rel="icon" type="image/png" href="/favicon.png">Nützliche Tipps
Vergiss nicht, den Browser-Cache zu leeren, wenn du dein Favicon aktualisierst. Erstelle auch mehrere Größen für verschiedene Geräte – z. B. 48×48 oder 180×180 Pixel für iOS.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.