Add a Custom Favicon to Your Astro Project

1. Generate your favicons

• Visit https://favicon.io
• Generate your favicon set (PNG + ICO + manifest)

2. Add files to your Astro project

Place all generated favicon files in your project’s public/ directory.

3. Update your BaseHead.astro

In src/components/BaseHead.astro, add:

<link rel="apple-touch-icon" sizes="180x180" href={asset('apple-touch-icon.png')} />
<link rel="icon" type="image/png" sizes="32x32" href={asset('favicon-32x32.png')} />
<link rel="icon" type="image/png" sizes="16x16" href={asset('favicon-16x16.png')} />
<link rel="icon" type="image/x-icon" href={asset('favicon.ico')} />
<link rel="manifest" href={asset('site.webmanifest')} />
<link rel="sitemap" href={asset('sitemap-index.xml')} />

As part of Global Metadata.

4. Start your Astro dev server

npm run dev

Your site will now display the new favicon.