Where do I put the favicon in an Astro project?

In the public folder. Astro copies public/ to the build root verbatim, so public/favicon.ico becomes /favicon.ico. Then add the link tags to your shared layout's , such as src/layouts/Layout.astro.

Does Astro need a favicon.ico?

Astro starters ship a favicon.svg, not an .ico. An SVG covers modern browsers, but adding favicon.ico is still wise as a fallback for older clients and tools that auto-request /favicon.ico. Provide both.

How do I replace Astro's default favicon?

Delete the starter public/favicon.svg, drop your own icons into public/, and update the link tags in your layout's head to point at them. The default only applies until you change the file and markup.

Why is my Astro favicon not showing on every page?

The link tags are probably in one page rather than the shared layout. Move them into the of the layout component (src/layouts/Layout.astro) that all pages render through so every route gets them.

All platforms

Favicon for Astro

How to add a favicon in Astro

To add a favicon in Astro, put your icon files in the public folder (Astro serves it at the site root) and add <link> tags to the <head> of your layout component, typically src/layouts/Layout.astro. New Astro projects ship a default public/favicon.svg you should replace with your own icon.

What you need

favicon.ico plus an SVG and PNG favicons (32x32), a 180x180 apple-touch-icon, and 192/512 PWA icons.
The public folder, which Astro copies to the build root unchanged.
A layout component (e.g. src/layouts/Layout.astro) whose <head> all pages share.

Step-by-step: add a favicon in Astro

Generate your icon set. Run your logo through Logo2Favicon to get favicon.ico, the PNG sizes, an SVG, the Apple touch icon, the PWA icons, and a manifest - in-browser, nothing uploaded.
Replace the default in public/. Delete the starter public/favicon.svg and drop your generated icons (favicon.ico, favicon.svg, favicon-32x32.png, apple-touch-icon.png, site.webmanifest) into public/.
Add link tags to your layout head. Open the layout component used across pages (commonly src/layouts/Layout.astro) and add the icon, apple-touch-icon, and manifest link tags inside its <head> using root-absolute paths.
Build and verify. Run astro build (or astro dev) and confirm the tab icon and that /favicon.svg, /favicon.ico, and /site.webmanifest each return 200.

Add inside the <head> of src/layouts/Layout.astro:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Common mistakes to avoid

Leaving the starter public/favicon.svg in place, so Astro's default icon still loads alongside or instead of yours.
Putting icons in src/ and importing them instead of public/ - imported assets get hashed URLs, breaking /favicon.ico.
Adding the link tags to a single .astro page instead of the shared layout, so only that one page gets the favicon.
Forgetting the manifest, so Android home-screen installs fall back to a generic glyph.

Free forever, no sign-up

Generate a complete icon set for Astro

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Astro. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I put the favicon in an Astro project?: In the public folder. Astro copies public/ to the build root verbatim, so public/favicon.ico becomes /favicon.ico. Then add the link tags to your shared layout's <head>, such as src/layouts/Layout.astro.
Does Astro need a favicon.ico?: Astro starters ship a favicon.svg, not an .ico. An SVG covers modern browsers, but adding favicon.ico is still wise as a fallback for older clients and tools that auto-request /favicon.ico. Provide both.
How do I replace Astro's default favicon?: Delete the starter public/favicon.svg, drop your own icons into public/, and update the link tags in your layout's head to point at them. The default only applies until you change the file and markup.
Why is my Astro favicon not showing on every page?: The link tags are probably in one page rather than the shared layout. Move them into the <head> of the layout component (src/layouts/Layout.astro) that all pages render through so every route gets them.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.