Astro-favicons NPM

Latest Updates! 🎉 See the change log for details.

astro-favicons

A Multi-platform (iOS13+、Android、Windows、macOS、chromeOS etc.), All Browser(Chrome、 Safari、Firefox、Yandex、IE、Edge ) Favicon generator for Astro Project.

Features · Installation · Usage · Configuration · Change Log

Key Features

Generates and inserts standard-compliant favicon link tags.
Automatically creates favicon assets for different environments using one source file.
Simplify or optimize communication between teams to avoid missing files.
Change Favicon for Light and Dark Mode.

Installation

This package is compatible with Astro 4.0.0 and above, which support the Integrations API.

npm install astro-favicons

Usage

To use this integration, add it to your astro.config.* file using the integrations property:

// astro.config.mjs
import { defineConfig } from "astro/config";
import favicons from "astro-favicons"; // Add code manually

export default defineConfig({
  compressHTML: import.meta.env.PROD,

  integrations: [
    favicons({
      // masterPicture: "./src/favicon.svg",
      // emitAssets: true,

      // You should adjust the following options accordingly
      appName: "",
      appShortName: "",
      appDescription: "",
      // dir:"auto",
      lang: "en-US",
      // display: "standalone",
      // orientation: "any",
      // start_url: "/?homescreen=1",
      background: "#fff",
      theme_color: "#fff",

      faviconsDarkMode: false, // default `true`, Make favicon compatible with light and dark modes
      
      // appleStatusBarStyle: "black-translucent",

      //....
    }),
  ],
});

Provide a favicon.svg image in the src directory.
Run npm run dev or npm run build in terminal. Following HTML Code will automatically insert in the head section of all pages.

<!-- Astro Favicons v1.1.0 - https://github.com/ACP-CODE/astro-favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"  media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"  media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"  media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon-dark.ico" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16-dark.png"  media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32-dark.png"  media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48-dark.png"  media="(prefers-color-scheme: dark)">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#fff">
<meta name="application-name" content="Welcome to Astro Favicons.">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="mask-icon" href="/safari-pinned-tab.svg" color="#fff">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">
<!--  Astro Favicons -->

If compressHTML default, it will be compressed

Emit or not emit assets by emitAssets options.

npm run build

/
├── public/
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── favicon-16x16.png
│   ├── favicon-16x16-dark.png
│   ├── favicon-32x32.png
│   ├── favicon-32x32-dark.png
│   ├── favicon-48x48.png
│   ├── favicon-48x48-dark.png
│   ├── favicon.ico
│   ├── favicon-dark.ico
│   ├── favicon.svg
│   ├── manifest.webmanifest
│   ├── mstile-150x150.png
│   ├── safari-pinned-tab.svg
│   ├── yandex-browser-50x50.png
│   └── yandex-browser-manifest.json
├── src/
│   └── faicon.svg
└── package.json

The default output is a total of 18 files, which will reach 66 files in full configuration

Configuration

Base Options

This is the underlying API of the plugin masterPicture and emitAssets

export default defineConfig({
  integrations: [
    favicons({
      masterPicture: "./src/favicon.svg",
      emitAssets: true,
      faviconsDarkMode: true,
    }),
  ],
});