Astro-Favicon wird nicht angezeigt? So behebst du es
Astro kopiert public/ unverändert in den Output, fügt aber nie Icon-Tags für dich ein. Ein leerer Tab bedeutet, dass der Link nicht im Layout deiner Seiten steht oder eine Seite ihr eigenes html-Element gerendert und das Layout übersprungen hat.
public/ behält Namen, aber nichts verlinkt für dich
Dateien in public/ werden unverändert in den Ausgabestamm kopiert, /favicon.svg oder /favicon.ico ist also eine echte URL. Aber Astro durchsucht public/ nicht und fügt keine Tags ein. Was auch immer du im Head willst, muss in eine Layout-Komponente geschrieben werden, in die sich deine Seiten selbst einwickeln.
Der Haken sind Seiten, die das Layout überspringen. Eine eigene 404-Seite oder eine einmalige Landingpage, die ihr eigenes html-Element schreibt, hat keine Icon-Tags, sofern du sie nicht auch dort ergänzt.
Finde die Lücke
- 1
Rufe /favicon.ico (oder /favicon.svg) direkt auf
Ein 404 bedeutet, dass die Datei nicht in public/ liegt. Lädt sie, ist die Datei in Ordnung und das fehlende Link-Tag ist das Problem.
- 2
Prüfe, ob das Layout den Link rendert
Öffne den Quelltext einer normalen Seite. Kein rel=icon-Tag bedeutet, dass deine Layout.astro es nicht enthält. Füge die Link-Tags dem Head des Layouts hinzu.
- 3
Prüfe Seiten, die das Layout überspringen
Eigene 404-Seiten und eigenständige Seiten, die ihr eigenes html schreiben, erben den Head des Layouts nicht. Füge die Icon-Tags auch dort hinzu oder wickle sie ins Layout ein.
Astro-Favicon wird nicht angezeigt: FAQ
Warum wird mein Astro-Favicon nicht angezeigt?
Astro fügt keine Icon-Tags ein, entweder rendert dein Layout den Link also nicht oder die betreffende Seite überspringt das Layout. Prüfe, ob die Datei unter ihrer URL lädt, und dann, ob der Head des Layouts die rel=icon-Tags tatsächlich enthält.
Muss ich die Tags jeder Seite hinzufügen?
Nur dem Layout, in das sich deine Seiten einwickeln. Der Haken sind Seiten, die das nicht tun: Eine eigene 404-Seite oder eine Landingpage, die ihr eigenes html-Element schreibt, braucht die Tags direkt.
Meine Website liegt unter einem Unterpfad und die Icons liefern einen 404.
Setze base in astro.config.mjs, aber Astro schreibt fest verdrahtete Pfade in deinem eigenen Markup nicht um. Stelle den hrefs import.meta.env.BASE_URL voran und prüfe das gebaute HTML vor dem Deploy.