$3

- Step 1: To install manually, run:

`shell
npm install astro-favicons
`

- Step 2: Add the integration to your Astro config file (astro.config.*):

`ts
// @ts-check
import { defineConfig } from "astro/config";
import favicons from "astro-favicons";

export default defineConfig({
integrations: [favicons()],
});
`

- Step 3: Place the favicon.svg file in the public folder:

`plaintext
/
├── public/
│ └── favicon.svg
├── src/
│ └── pages/
│ └── index.astro
└── astro.config.mjs
`

$3

Start the server with npm run dev, You can access the all generated assets, such as http://localhost:4321/manifest.webmanifest.

By default, astro-favicons will insert 20 HTML tags into all pages, including the default404 page:

> - Localized (requires name_localized configuration).
> - withCapo is defaults to true (based on AstroConfig.compressHTML). To prevent automatic reordering and tidying of tags, set the relevant option or compressHTML to false.

$3

Build the project by running npm run build. By default, 3 files and 16 images will be built through emitFile of vite.

> - The output directory is determined by the output.assetsPrefix option in the integration configuration.
> - Why Place Favicons in the Root Directory?

To generate additional resources, refer to the following configuration. This will output more than 71 assets (3 files, 68 images) and 65 HTML tags during the build process:

`ts
// @ts-check
import { defineConfig } from "astro/config";
import favicons from "favicons";
import { readFile } from "fs/promises";

export default defineConfig({
i18n: {
defaultLocale: "zh-CN",
locales: ["zh-CN", "en", "ar"],
},
compressHTML: import.meta.env.PROD,
integrations: [
favicons({
input: {
favicons: [
"public/favicon.svg",
await readFile("src/assets/pixel.png"),
], // select best source image by its size
// Add other platform-specific sources if needed.
},
name: "twitter",
name_localized: {
"zh-CN": "推特",
ar: {
value: "ضحك على نحو نصف مكبوت",
dir: "rtl",
lang: "ar",
},
},
short_name: "x",
manifest: {},
icons: {
favicons: true,
android: true,
appleIcon: true,
appleStartup: true,
windows: true,
yandex: true,
},
pixel_art: true,
manifestMaskable: false,
shortcuts: {},
screenshots: {},
output: {
images: true,
files: true,
html: true,
assetPrefix: "/",
},
// Extra options...
}),
],
});
``

> It may look complex, but with with enhanced [JSDoc] support, you'll master it quickly.