How to add a favicon in Astro

New Astro projects ship public/favicon.svg and a link to it in the layout. Replace the file and add the remaining tags to your shared layout.

Steps

Copy every file from the package into public/, overwriting favicon.svg.
Open your base layout (often src/layouts/Layout.astro) and find the existing <link rel="icon">.
Replace it with the tags below so every page using the layout gets them.

File to use: the whole package. Make it with the favicon generator (free, no signup).

Code

src/layouts/Layout.astro, inside <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Good to know

Files in public/ are served as-is from the site root, so /favicon.ico resolves correctly on every page.
If pages don’t share one layout, add the tags to each layout file.

Check it worked

Run the favicon checker on your live URL to confirm every icon loads and Google has a usable size. If the old icon keeps showing, see favicon not showing. The full tag-by-tag explanation is in how to add a favicon.

Other platforms: WordPress · Next.js · Shopify · Squarespace · Wix · React · Webflow · Django

Questions people ask

Where is the favicon in Astro?

In public/favicon.svg, linked from the head of your layout component. Replace the file to change the icon.

Does Astro need a favicon.ico?

It works without one, but add favicon.ico from the package so older browsers and bots requesting /favicon.ico get an icon instead of a 404.