Extra Tips for Your Astro Site

Small but important enhancements to make your Astro site look professional, perform well, and feel polished.

Step 1

Favicon

A favicon improves brand recognition in browser tabs, bookmarks, and home-screen shortcuts. In Astro it's a two-step process:

Drop your favicon files into public/, Astro serves everything there at the site root as-is, with no passthrough or copy config.
Link them in your layout's <head> so every page picks them up:

src/layouts/BaseLayout.astro

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

See the Favicon guide for generating a full icon set and troubleshooting caching.

Step 2

SVG Logo

SVG logos stay crisp at any size and weigh next to nothing. This Astro starter already ships its logo through astro-icon, but you can also drop one straight into public/.

Add your SVG to src/icons/, the filename becomes the icon name, and render it with the <Icon> component:

src/components/Header/StaticHeader.astro

---
import { Icon } from "astro-icon/components";
---
<a href="/" class="cs-logo" aria-label="Return to home page">
  <Icon name="logo-black" />
</a>

Because astro-icon inlines the SVG, you can recolor it with CSS (use fill: currentColor to follow your theme). Full details in the SVG Logo guide.

Step 3

Page Speed

Astro sites are fast by default, it ships zero JavaScript unless you opt in. To optimize further:

Optimize images with Astro's built-in <Image> component from astro:assets.
Minify CSS & JS, keep scripts minimal, and prefer islands for interactivity.
Deploy via CDN for global low-latency delivery.
Inline critical CSS and preload fonts for faster first paint.

Audit your site using tools like Google PageSpeed Insights to spot remaining optimizations. Walk through it in the Page Speed guide.

Quick Tips

Always include a favicon for branding.

Use SVG logos for sharp, scalable graphics.

Static HTML + optimized assets = fastest load times.

Check performance after deployment, even small tweaks help.