Astro Favicon Generator
Astro processes and fingerprints assets imported from src/, and copies public/ to the build output exactly as it found it. Icons need stable filenames, so they go in public/ and are linked from a layout.
public/ is the only folder that keeps filenames
Astro's starter ships public/favicon.svg and a link tag pointing at it. That pairing is the whole convention: files in public/ are copied to the output root verbatim, so /favicon.svg is a real URL, while an image imported from src/assets is optimised and renamed by the build.
There is no file-based icon convention beyond that. Astro does not scan public/ and inject tags for you, so whatever you want in the head has to be written into a layout component that your pages actually use.
Where the files go
- my-astro-site/
- public/copied verbatim to the output root
- favicon.svgships with the starter
- favicon.icoadd
- favicon-32x32.pngadd
- apple-touch-icon.pngadd
- icon-512.pngadd
- manifest.webmanifestadd
- src/
- layouts/
- Layout.astroowns the head
- pages/
- index.astro
- astro.config.mjs
src/layouts/Layout.astro
---
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>What each file is for
| File | Purpose | Consumed by |
|---|---|---|
| public/favicon.svg | Scales to any size from one file | Chrome, Firefox, Edge |
| public/favicon.ico | Fallback served at a fixed path | Older clients, crawlers, feed readers |
| public/apple-touch-icon.png | Home screen icon, 180x180, no transparency | iOS Safari |
| public/manifest.webmanifest | Install metadata and the 192/512 icon list | Android, install prompts |
Astro favicon FAQ
Can I put the icons in src/assets and import them?
You would get hashed filenames, so the tags would need to reference the imported URL and /favicon.ico would still 404 for anything requesting it by path. There is no benefit here: icons are already small and already have to be stable, which is what public/ is for.
Do I have to add the tags to every page?
Only to the layout your pages wrap themselves in. The catch is pages that skip it: a custom 404 or a one-off landing page that writes its own html element will have no icon tags unless you add them there too.
My site is deployed under a sub-path and the icons 404.
Set base in astro.config.mjs, but be aware Astro does not rewrite hardcoded paths inside your own markup. Prefix the hrefs with import.meta.env.BASE_URL so they pick the prefix up, and check the built HTML before deploying.
Astro favicon not working?
The two ways it fails on Astro, and the exact cause of each.