---
title: Astro Favicon Not Showing? Here's the Fix
description: Astro copies public/ verbatim but injects no icon tags. A missing favicon means your layout doesn't render the link, or a page skips the layout entirely.
canonical: https://favicontools.com/fix/astro-favicon-not-showing
---

# 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.

> **An SVG favicon is not enough on its own:** SVG icons aren't honoured everywhere, and no home-screen surface uses one. If only favicon.svg is linked, some browsers show nothing. Keep PNGs and an .ico alongside it, all linked from the layout.

## 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.