Gathering detailed insights and metrics for astro-favicons
Gathering detailed insights and metrics for astro-favicons
An all-in-one favicon and PWA assets generator for Astro projects.
3.1.5
45
MIT
TypeScript
23.44 kB
Installations
npm install astro-faviconsDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.20.5
NPM Version
10.8.2
Releases
10
Languages
1
TypeScript
TypeScript (100%)
Developer
ACP-CODE
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
45 Stars
70 Commits
7 Forks
1 Watchers
1 Branches
1 Contributors
Updated on Jul 08, 2025
Maintainers
1
Package Meta Information
Latest Version
3.1.5
Package Id
astro-favicons@3.1.5
Unpacked Size
23.44 kB
Size
8.69 kB
File Count
7
NPM Version
10.8.2
Node Version
18.20.5
Published on
Jan 25, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
astro-favicons
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.
Installation
Quickly install with the astro add command: (>=4.0.0)
1npx astro add astro-favicons
If you run into issues, try with Manual Setup guide.
Documentation
✨ Manual Setup
1. Install and Configure
-
Step 1: To install manually, run:
1npm install astro-favicons -
Step 2: Add the integration to your Astro config file (
astro.config.*):
1// @ts-check 2import { defineConfig } from "astro/config"; 3import favicons from "astro-favicons"; 4 5export default defineConfig({ 6 integrations: [favicons()], 7});
-
Step 3: Place the
favicon.svgfile in thepublicfolder:1/ 2├── public/ 3│ └── favicon.svg 4├── src/ 5│ └── pages/ 6│ └── index.astro 7└── astro.config.mjs
2. Development
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)
1<link rel="manifest" href="/manifest.webmanifest" /> 2<meta name="mobile-web-app-capable" content="yes" /> 3<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" /> 4<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" /> 5<meta name="application-name" content="Astro Favicons" /> 6<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> 7<link 8 rel="apple-touch-icon" 9 sizes="180x180" 10 href="/apple-touch-icon-precomposed.png" 11/> 12<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff" /> 13<meta name="apple-mobile-web-app-capable" content="yes" /> 14<meta 15 name="apple-mobile-web-app-status-bar-style" 16 content="black-translucent" 17/> 18<meta name="apple-mobile-web-app-title" content="Astro Favicons" /> 19<link rel="icon" type="image/x-icon" href="/favicon.ico" /> 20<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> 21<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> 22<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" /> 23<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 24<meta name="msapplication-TileColor" content="#fff" /> 25<meta name="msapplication-TileImage" content="/mstile-144x144.png" /> 26<meta name="msapplication-config" content="/browserconfig.xml" /> 27<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
1--- 2import { localizedHTML as favicons } from 'astro-favicons/middleware'; 3--- 4<meta charset="utf-8" /> 5<Fragment set:html={favicons(Astro.currentLocale)} />
3. Build
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
117:57:14 [vite] dist/yandex-browser-manifest.json 0.15 kB │ gzip: 0.13 kB 217:57:14 [vite] dist/browserconfig.xml 0.37 kB │ gzip: 0.19 kB 317:57:14 [vite] dist/favicon-16x16.png 0.38 kB 417:57:14 [vite] dist/manifest.webmanifest 0.56 kB 517:57:14 [vite] dist/favicon-32x32.png 0.77 kB 617:57:14 [vite] dist/favicon-48x48.png 1.17 kB 717:57:14 [vite] dist/safari-pinned-tab.svg 1.24 kB │ gzip: 0.57 kB 817:57:14 [vite] dist/favicon.svg 1.24 kB │ gzip: 0.57 kB 917:57:14 [vite] dist/yandex-browser-50x50.png 1.24 kB 1017:57:14 [vite] dist/mstile-70x70.png 1.76 kB 1117:57:14 [vite] dist/mstile-144x144.png 3.84 kB 1217:57:14 [vite] dist/mstile-150x150.png 3.96 kB 1317:57:14 [vite] dist/mstile-310x150.png 4.26 kB 1417:57:14 [vite] dist/apple-touch-icon.png 4.97 kB 1517:57:14 [vite] dist/apple-touch-icon-precomposed.png 4.97 kB 1617:57:14 [vite] dist/android-chrome-192x192.png 5.00 kB 1717:57:14 [vite] dist/mstile-310x310.png 8.40 kB 1817:57:14 [vite] dist/android-chrome-512x512.png 14.99 kB 1917: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:
1// @ts-check 2import { defineConfig } from "astro/config"; 3import favicons from "favicons"; 4import { readFile } from "fs/promises"; 5 6export default defineConfig({ 7 i18n: { 8 defaultLocale: "zh-CN", 9 locales: ["zh-CN", "en", "ar"], 10 }, 11 compressHTML: import.meta.env.PROD, 12 integrations: [ 13 favicons({ 14 input: { 15 favicons: [ 16 "public/favicon.svg", 17 await readFile("src/assets/pixel.png"), 18 ], // select best source image by its size 19 // Add other platform-specific sources if needed. 20 }, 21 name: "twitter", 22 name_localized: { 23 "zh-CN": "推特", 24 ar: { 25 value: "ضحك على نحو نصف مكبوت", 26 dir: "rtl", 27 lang: "ar", 28 }, 29 }, 30 short_name: "x", 31 manifest: {}, 32 icons: { 33 favicons: true, 34 android: true, 35 appleIcon: true, 36 appleStartup: true, 37 windows: true, 38 yandex: true, 39 }, 40 pixel_art: true, 41 manifestMaskable: false, 42 shortcuts: {}, 43 screenshots: {}, 44 output: { 45 images: true, 46 files: true, 47 html: true, 48 assetPrefix: "/", 49 }, 50 // Extra options... 51 }), 52 ], 53});
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
Support and Feedback
Submit your issues or feedback on our GitHub channel.
Changelog
For the full changelog, see the Releases page.
License
MIT
No vulnerabilities found.
No security vulnerabilities found.