You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

astro-favicons

Package Overview
Dependencies
Maintainers
0
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

astro-favicons

An all-in-one favicon and PWA assets generator for Astro projects. It automates the creation of favicons, manifest, and supports hot reloading for efficient development. Powered by `astro-capo`, it keeps your ﹤𝚑𝚎𝚊𝚍﹥ content well-organized and tidy.

3.1.5
latest
Source
npm
Version published
Weekly downloads
600
-19.89%
Maintainers
0
Weekly downloads
 
Created
Source

Build Status NPM Version

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)

npx 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:

    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.svg file in the public folder:

    /
├── public/
│   └── favicon.svg
├── src/
│   └── pages/
│       └── index.astro
└── 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) 
<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 (requires name_localized configuration).
  • withCapo is defaults to true (based on AstroConfig.compressHTML). To prevent automatic reordering and tidying of <head> tags, set the relevant option or compressHTML to false.
Manual Injected of HTML Tags Now Supported

Added in: v3.1.0

e.g ~/components/Meta.astro

---
import { localizedHTML as favicons } from 'astro-favicons/middleware';
---
<meta charset="utf-8" />
<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 
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

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

Support and Feedback

Submit your issues or feedback on our GitHub channel.

Changelog

For the full changelog, see the Releases page.

License

MIT

Keywords

astro
astro-integration
favicons
web-manifest
apple-icons
apple-startup

FAQs

Package last updated on 25 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Go Support Is Now Generally Available

Product

Go Support Is Now Generally Available

Socket's Go support is now generally available, bringing automatic scanning and deep code analysis to all users with Go projects.

By Peter van der Zee, Ryan Eberhardt  -  Apr 17, 2025