---
title: Astro Favicon Generator
description: Astro fingerprints anything imported from src but copies public/ untouched. Where icon files belong and how to add the link tags to a layout component.
canonical: https://favicontools.com/platforms/astro-favicon
---
# 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.svg # ships with the starter
favicon.ico <- add
favicon-32x32.png <- add
apple-touch-icon.png <- add
icon-512.png <- add
manifest.webmanifest <- add
src/
layouts/
Layout.astro # owns the head
pages/
index.astro
astro.config.mjs
```
## src/layouts/Layout.astro
```astro
---
const { title } = Astro.props;
---
{title}
```
## 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 |
> **An SVG favicon is not enough on its own:** SVG icons are not honoured everywhere, and no home-screen surface uses one. Keep the SVG for the browsers that do support it, and keep PNGs and an .ico alongside for everything else.
## 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.