ANSWER

Quick answer

Astro copies public assets into the build output without processing them. The official project structure uses public/favicon.svg as a representative root asset.

Last verified
July 31, 2026
Evidence
Primary documentation plus a route-specific implementation example
Primary sources
2
01

Use public for icon files

Astro copies public assets into the build output without processing them. The official project structure uses public/favicon.svg as a representative root asset.

Put the ICO, SVG, PNG, Apple touch icon, manifest, and PWA images in public when their names and URLs must remain predictable.

Connected next stepHow to Add a Favicon in Nuxt: Public Files and Head Tags for the closest prerequisite or comparison.

02

Add metadata to the shared layout

Place the favicon link elements in the head of the Astro layout used by every indexable page. Use root-relative paths for a root deployment and account for Astro’s base configuration when publishing below a subpath.

Do not rely on a component that appears only on selected routes; favicon discovery should be consistent across the site.

Connected next stepHow to Add a Favicon in Vue and Vite for the next connected implementation decision.

03

Verify the built site

Run the production build, inspect dist, and confirm that every declared file exists at the expected case-sensitive path. After deployment, check responses and the rendered head with the Favicon.now checker.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

BUILD

Production file tree and code: Astro public files and shared layout

Astro copies public files unchanged, while the shared layout exposes them on every rendered page. Apply Astro's configured base when the site is published beneath a path prefix.

FILE TREE
public/
├── favicon.svg
├── favicon.ico
├── apple-touch-icon.png
└── site.webmanifest
src/layouts/BaseLayout.astro
ASTRO
<head>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>
DOWNLOADABLE EVIDENCE

Review the headings, sources, implementation artifact, and update record for this guide as structured JSON.

Download guide evidence ↓
Primary references
Evidence scope
Guide
How to Add a Favicon in Astro: Public Files and Layouts
Coverage
Client behavior can change by browser, operating system, platform version, cache state and deployment configuration. Unperformed manual observations are not claimed.
Q&A

Questions, answered

Should favicon.svg go in src/assets?+

Use public when you want an unchanged, stable root URL. Imported src assets are processed and can receive generated URLs.

Where should the link tags live?+

In the shared Astro layout head so every page emits the same site-level icon metadata.