HTML-Favicon

Die Head-Sitzung hat eine Starter-Metadatenbox mit charset, viewport, title und einem Stylesheet-Link gebaut. Ein Favicon ist ein weiterer praktischer head-Link: das winzige Symbol, das im Browser-Tab neben dem Seitentitel erscheint. Es hilft Menschen, deine Site zwischen vielen Tabs, Lesezeichen und manchen Verlaufslisten wiederzuerkennen. Du zeichnest es nicht mit CSS-Text — du zeigst dem Browser auf eine kleine Bilddatei.

Was ein Favicon ist

Ein Favicon ist eine Site-Icon-Ressource. Browser laden sie, weil dein HTML (oder eine Standardannahme wie /favicon.ico) sagt, wo sie zu suchen ist. Moderne Seiten deklarieren sie meist ausdrücklich mit einem link-Element, damit Pfad und Dateityp klar sind. Das Symbol sollte einfach und quadratisch genug bleiben, um bei sehr kleinen Größen lesbar zu sein.

Direkte Antwort

Im Dokument-head fügst du ein link mit rel="icon" und einem href hinzu, der auf deine Icon-Datei zeigt. Übliche Wahlmöglichkeiten sind favicon.ico, ein PNG wie images/favicon.png oder ein SVG-Icon. Der Pfad muss sich wie andere relative URLs auflösen (siehe Dateipfade). Nach dem Austauschen der Datei rechne mit Browser-Caching — ein Hard-Refresh oder ein privates Fenster zeigt das neue Icon oft schneller als ein normales Neuladen.

Klassischer .ico-Link

Viele Tutorials beginnen noch mit favicon.ico im selben Ordner wie die HTML-Datei. Das optionale type-Attribut kann Browsern helfen, die Ressource zu verstehen.

Die klassische Probe lesen

• Das link liegt im head, neben title und anderen Metadaten
• rel="icon" kennzeichnet die Ressource als Favicon
• href="favicon.ico" setzt voraus, dass die Icon-Datei neben dieser HTML-Seite liegt
• type="image/x-icon" ist ein üblicher MIME-Hinweis für .ico-Dateien
• Ohne korrekten Pfad behält der Tab oft ein Standard- oder leeres Icon

PNG- und SVG-Varianten

PNG-Favicons lassen sich leicht aus Design-Tools exportieren. SVG-Favicons bleiben bei unterschiedlichen Skalen scharf, wenn der Browser sie unterstützt. Du kannst das Icon in einem images-Ordner halten und href dorthin zeigen lassen.

Ein Starter-Format wählen

• .ico — traditionell, von älterem Tooling weit erkannt
• .png — einfach für Einsteiger, die ohnehin PNG-Assets exportieren
• .svg — knackige Vektor-Option, wenn die Browser deiner Zielgruppe sie unterstützen
  Du brauchst am ersten Tag nicht jedes Format. Liefere ein klares Icon mit korrektem Link, und erweitere später um apple-touch- oder Mehrgrößen-Pakete, wenn ein Projekt sie verlangt.

Pfade zählen so sehr wie das Markup

Wenn href auf eine fehlende Datei zeigt, liefert die Favicon-Anfrage 404 und das Tab-Icon scheitert still. Prüfe Ordnernamen, Schreibweise und ob die HTML-Datei ohne das Icon verschoben wurde. Relative Pfade sind relativ zur URL des HTML-Dokuments — nicht zu deinem Gefühl, wo die Datei „sein sollte“.

Caching kann Updates verstecken

Browser cachen Favicons oft aggressiv. Du änderst favicon.png, lädst neu und siehst immer noch gestern Marke. Das heißt nicht immer, dass das HTML falsch ist. Probiere einen Hard-Refresh, ein privates/Inkognito-Fenster oder benenne die Datei vorübergehend um und aktualisiere href, damit der Browser eine frische URL holt. Lehre diese Gewohnheit früh, damit Lernende funktionierendes Markup nicht in Panik löschen.

Icons klein und klar halten

Ein riesiges Foto, in einen Tab gepresst, wird zu einem unlesbaren Schlierenbild. Bevorzuge ein einfaches Zeichen, hohen Kontrast und eine quadratische Fläche. Das Favicon ist ein Wiedererkennungshelfer, kein zweites Hero-Bild. Spare detailliertes Branding für den Seitenkörper auf.

Wohin der Link gehört

Lege Favicon-link-Elemente in den head. Sie in den body zu setzen ist der falsche Ort für dokumentweite Icons. Du weißt bereits: head ist für Metadaten und Ressourcenlinks; Favicons folgen dieser Regel.

Übung im Editor

1. Lege ein kleines quadratisches Icon neben deine HTML-Datei oder in einen images-Ordner.
2. Füge <link rel="icon" href="..."> im head mit passendem Pfad ein.
3. Öffne die Seite und schaue auf den Browser-Tab neben dem Titeltext.
4. Brich den Pfad absichtlich, lade neu und beachte, dass das Icon verschwindet oder zurückfällt — dann repariere ihn.
5. Ersetze die Icon-Datei und öffne bei klebendem Altbestand ein privates Fenster oder hard-refreshe, um die neue Grafik zu bestätigen.

Leichte Fehler

• Favicon-link in den body statt in den head setzen
• Falsches href, sodass das Icon 404 liefert, während das Seiten-HTML noch gut aussieht
• Sofortiges visuelles Update erwarten, während ein altes Favicon gecacht ist
• Ein riesiges Foto statt eines kleinen, einfachen quadratischen Zeichens verwenden
• Vergessen, die Icon-Datei hochzuladen, wenn du nur das HTML deployest
• rel="stylesheet" mit rel="icon" verwechseln und sich wundern, warum CSS oder das Tab-Icon fehlverhalten

Zusammenfassung

• Favicons werden im head mit rel="icon" verlinkt
• Zeige href auf eine echte .ico-, .png- oder .svg-Datei
• Korrekte Pfade und ruhige Cache-Checks lösen die meisten „fehlendes Icon“-Meldungen
• Halte Icons klein und bei Tab-Größe erkennbar
• Ein funktionierender Link schlägt einen Haufen ungenutzter Icon-Formate