An all-in-one favicon and PWA assets generator for Astro projects,
supporting iOS 13+, Android, Windows, macOS, chromeOS, and all major browsers (Chrome, Safari, Firefox, Yandex, IE, Edge).
Supports localized app names, and integrates a dynamic W3C appmanifest, and supports hot reloading for efficient development.
Quickly install with the astro add command: (>=4.0.0)
npx astro add astro-faviconsIf you run into issues, try with Manual Setup guide.
✨ Manual Setup
-
Step 1: To install manually, run:
npm install astro-favicons
-
Step 2: Add the integration to your Astro config file (
astro.config.*):
// @ts-check
import { defineConfig } from "astro/config";
import favicons from "astro-favicons";
export default defineConfig({
integrations: [favicons()],
});-
Step 3: Place the
favicon.svgfile in thepublicfolder:/ ├── public/ │ └── favicon.svg ├── src/ │ └── pages/ │ └── index.astro └── astro.config.mjs
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:
Automatically Injected HTML Tags (Localized Support)
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
<meta name="application-name" content="Astro Favicons" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon-precomposed.png"
/>
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="apple-mobile-web-app-title" content="Astro Favicons" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="msapplication-TileColor" content="#fff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json" />
Localized(requiresname_localizedconfiguration).withCapois defaults totrue(based onAstroConfig.compressHTML). To prevent automatic reordering and tidying of<head>tags, set the relevant option orcompressHTMLtofalse.
Manual Injected of HTML Tags Now Supported
Added in: v3.1.0
v3.1.0e.g ~/components/Meta.astro
---
import { localizedHTML as favicons } from 'astro-favicons/middleware';
---
<meta charset="utf-8" />
<Fragment set:html={favicons(Astro.currentLocale)} />Build the project by running npm run build. By default, 3 files and 16 images will be built through emitFile of vite.
Build Output: 19 Files
17:57:14 [vite] dist/yandex-browser-manifest.json 0.15 kB │ gzip: 0.13 kB
17:57:14 [vite] dist/browserconfig.xml 0.37 kB │ gzip: 0.19 kB
17:57:14 [vite] dist/favicon-16x16.png 0.38 kB
17:57:14 [vite] dist/manifest.webmanifest 0.56 kB
17:57:14 [vite] dist/favicon-32x32.png 0.77 kB
17:57:14 [vite] dist/favicon-48x48.png 1.17 kB
17:57:14 [vite] dist/safari-pinned-tab.svg 1.24 kB │ gzip: 0.57 kB
17:57:14 [vite] dist/favicon.svg 1.24 kB │ gzip: 0.57 kB
17:57:14 [vite] dist/yandex-browser-50x50.png 1.24 kB
17:57:14 [vite] dist/mstile-70x70.png 1.76 kB
17:57:14 [vite] dist/mstile-144x144.png 3.84 kB
17:57:14 [vite] dist/mstile-150x150.png 3.96 kB
17:57:14 [vite] dist/mstile-310x150.png 4.26 kB
17:57:14 [vite] dist/apple-touch-icon.png 4.97 kB
17:57:14 [vite] dist/apple-touch-icon-precomposed.png 4.97 kB
17:57:14 [vite] dist/android-chrome-192x192.png 5.00 kB
17:57:14 [vite] dist/mstile-310x310.png 8.40 kB
17:57:14 [vite] dist/android-chrome-512x512.png 14.99 kB
17:57:14 [vite] dist/favicon.ico 33.31 kB
- The output directory is determined by the
output.assetsPrefixoption 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-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.
For advanced features and detailed usage, please refer to the documentation
Submit your issues or feedback on our GitHub channel.
For the full changelog, see the Releases page.
MIT
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}