0
0
Astroframework~5 mins

Public directory for static assets in Astro

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

The public directory holds files like images, fonts, or icons that your website needs to show directly. It makes these files easy to use without extra setup.

You want to add a logo image that appears on every page.
You need to include a custom font file for your website text.
You want to add a favicon that shows in the browser tab.
You have PDF or downloadable files for visitors.
You want to serve static files without processing or bundling.
Syntax
Astro
public/
  logo.png
  favicon.ico
  fonts/
    custom-font.woff2
  docs/
    guide.pdf

Files inside the public folder are copied as-is to the final website.

You can access these files in your code using a root-relative URL starting with /.

Examples
Use the image from the public folder directly with a root path.
Astro
<img src="/logo.png" alt="Site Logo" />
Set the favicon using the file in the public directory.
Astro
<link rel="icon" href="/favicon.ico" />
Load a font file from the public folder in your CSS.
Astro
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
}
Sample Program

This Astro component shows how to use files from the public directory. The logo image, favicon, and a downloadable PDF are all served directly from public/.

Astro
---
// No special code needed in Astro component
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Public Directory Example</title>
    <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
    <h1>Welcome to My Site</h1>
    <img src="/logo.png" alt="Site Logo" width="200" />
    <p>Here is a downloadable guide:</p>
    <a href="/docs/guide.pdf" download>Download Guide</a>
  </body>
</html>
OutputSuccess
Important Notes

Do not put sensitive or private files in the public directory because anyone can access them.

Use the public folder only for files that do not need processing or bundling by Astro.

Summary

The public directory stores static files served as-is.

Access files with root-relative URLs starting with /.

Good for images, fonts, icons, and downloadable files.