Adding a Favicon

A favicon is the small icon that appears in browser tabs, bookmarks, and home-screen shortcuts. In Astro you simply drop the files into public/ and link them in your layout's <head>, no passthrough or copy config required.

Step 1

Generate a full favicon set

Best practice

Start from a square source image (512×512 or larger, or an SVG) and run it through a generator like realfavicongenerator.net or favicon.io. It outputs every size and format you need for modern browsers, iOS, and installable web apps.

Step 2

Drop the files into public/

Place the generated files at the root of your public/ folder:

project structure

public/
└─ assets/
   └─ favicons/
      ├─ apple-touch-icon.png
      ├─ favicon-16x16.png
      ├─ favicon-32x32.png
      ├─ favicon-96x96.png
      ├─ favicon.ico
      ├─ favicon.svg
      ├─ mstile-150x150.png
      ├─ site.webmanifest
      ├─ web-app-manifest-192x192.png
      └─ web-app-manifest-512x512.png

Astro serves everything in public/ at the site root as-is, so public/assets/favicons/favicon.svg becomes /assets/favicons/favicon.svg. There is no passthrough-copy step to configure, it just works.

Step 3

Link them in your layout's <head>

Add the links inside the <head> of your shared layout so every page picks them up:

src/layouts/BaseLayout.astro

<head>
  <!-- Modern browsers: crisp, scalable SVG -->
  <link rel="icon" type="image/svg+xml" href="/assets/favicons/favicon.svg" />

  <!-- Fallback for older browsers -->
  <link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" sizes="any" />

  <!-- iOS home-screen icon -->
  <link rel="apple-touch-icon" href="/assets/favicons/apple-touch-icon.png" />

  <!-- PWA / Android install metadata -->
  <link rel="manifest" href="/assets/favicons/site.webmanifest" />
</head>

Not showing up?

Favicons are aggressively cached. After changing one, do a hard refresh (Ctrl/Cmd + Shift + R), open the page in a private window, or append a cache-buster like /assets/favicons/favicon.svg?v=2. Also confirm the file really exists in public/ and that the path starts with a leading /.