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.