Astro Favicon Not Showing? Here's the Fix
Astro copies public/ to the output untouched but never injects icon tags for you. A blank tab means the link isn't in the layout your pages use, or a page rendered its own html element and skipped the layout.
public/ keeps names, but nothing links for you
Files in public/ are copied to the output root verbatim, so /favicon.svg or /favicon.ico is a real URL. But Astro doesn't scan public/ and inject tags. Whatever you want in the head has to be written into a layout component your pages wrap themselves in.
The catch is pages that skip the layout. A custom 404 or a one-off landing page that writes its own html element has no icon tags unless you add them there too.
Find the gap
- 1
Open /favicon.ico (or /favicon.svg) directly
A 404 means the file isn't in public/. If it loads, the file is fine and the missing link tag is the problem.
- 2
Check the layout renders the link
View source on a normal page. No rel=icon tag means your Layout.astro doesn't include it. Add the link tags to the layout's head.
- 3
Check pages that skip the layout
Custom 404s and standalone pages that write their own html won't inherit the layout's head. Add the icon tags there too, or wrap them in the layout.
Astro favicon not showing: FAQ
Why is my Astro favicon not showing?
Astro injects no icon tags, so either your layout doesn't render the link or the page in question skips the layout. Confirm the file loads at its URL, then check the layout's head actually contains the rel=icon tags.
Do I have to add the tags to every page?
Only to the layout your pages wrap. The catch is pages that don't: a custom 404 or a landing page writing its own html element needs the tags added directly.
My site is under a sub-path and the icons 404.
Set base in astro.config.mjs, but Astro doesn't rewrite hardcoded paths in your own markup. Prefix the hrefs with import.meta.env.BASE_URL and check the built HTML before deploying.