Customize the Favicon
The favicons of Astro-Chirpy are placed in the public/ directory. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
Generate the Favicon
Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool Real Favicon Generator and click the button Pick your favicon image to upload your image file.
In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button Next → to generate the favicon.
Download & Replace
Download the generated package, unzip and delete the following file(s) from the extracted files:
site.webmanifest
And then copy the remaining image files ( .PNG, .ICO and .SVG) to the public/ directory of your Astro-Chirpy site, replacing the original files.
The following table will help you understand the changes to the favicon files:
| File(s) | From Online Tool | From Astro-Chirpy |
|---|---|---|
*.PNG | ✓ | ✗ |
*.ICO | ✓ | ✗ |
*.SVG | ✓ | ✗ |
favicon.ico | ✓ | ✗ |
apple-touch-icon.png | ✓ | ✗ |
✓ means keep, ✗ means delete.
How It Works in Astro
In Astro, files in the public/ folder are served at the root path. This means:
public/favicon.icobecomes/favicon.icopublic/apple-touch-icon.pngbecomes/apple-touch-icon.png- And so on…
The favicon references are included in the site’s HTML head, and browsers will automatically discover and use them.
Next Build
The next time you build the site with npm run build, your custom favicon will be included in the deployment. The development server (npm run dev) will also serve your new favicon immediately.
This guide is adapted for Astro-Chirpy, based on the original Jekyll Chirpy theme by Cotes Chung.