How to Add a Favicon to an Astro Site

A favicon is the tiny picture in the browser tab, next to the page name. In Astro you add one with three files in the public folder and three lines in your layout. That’s it. It takes about ten minutes.

Good news first. The Astro starter templates already put a favicon.svg and a favicon.ico in public. If you see the Astro rocket in your tab, that’s where it comes from. You’re going to swap in your own.

Step 1: Make your SVG icon

An SVG is a picture made of shapes, not dots. It stays sharp at any size. That makes it the best kind of favicon.

Create or replace public/favicon.svg. Here is a simple one: a purple square with a white letter A.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#6d28d9" />
  <text x="16" y="23" font-size="20" font-family="Arial, sans-serif" font-weight="bold" fill="white" text-anchor="middle">A</text>
</svg>

Change the letter and the color to suit your site. If you have a logo as an SVG file, you can use that instead. Just name it favicon.svg.

Step 2: Add the two backup files

Two more files help older browsers and phones:

• favicon.ico, 32 by 32 pixels. Some older tools only look for this one.
• apple-touch-icon.png, 180 by 180 pixels. iPhones and iPads use it when someone saves your site to their home screen.

The easy way to make both is a free favicon maker, like RealFaviconGenerator. Upload your picture and download the files. Put both in public, next to favicon.svg.

Your public folder should now hold:

public/
  apple-touch-icon.png
  favicon.ico
  favicon.svg

Step 3: Add the tags to your layout

Open your layout. In the starter it’s src/layouts/Layout.astro. Find the <head> part. Delete any old <link rel="icon"> lines. Then add these three:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="icon" href="/favicon.ico" sizes="32x32" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <title>My Site</title>
</head>

Here’s what each line does:

• The first points to the .ico backup. sizes="32x32" stops some browsers from picking it over the SVG.
• The second points to your SVG. Modern browsers use this one.
• The third is for Apple phones and tablets.

The paths start with / and leave out the word public. Astro copies everything in public to the top of your site. So public/favicon.svg becomes /favicon.svg.

Step 4: Build and check

Run a build. Then look in the dist folder:

npm run build
ls dist

$ ls dist
_astro
apple-touch-icon.png
favicon.ico
favicon.svg
index.html

All three files made it. Now run npm run dev and open localhost:4321. Your icon is in the tab.

We ran this on a fresh Astro 7.4 project. The build put all three files in dist. The page had all three tags in its head.

Building with Claude? Paste this guide into Claude Code and ask it to do it for you.

Make it better

• Test it on a dark tab. Some people use dark browser tabs. Pick colors that show up on both light and dark.
• Keep it simple. A favicon shows at 16 pixels wide. One bold letter reads better than a full logo.

Where to go next

• How to add dark mode to Astro, so the rest of your site matches.
• How to create a 404 page in Astro, another small touch that makes a site feel finished.
• How to add a navigation menu in Astro, which goes in the same layout.