@darkobits/vite-plugin-favicons

Yet another favicons plugin. 🤷

Features

• Specify different source assets for each icon type (ie: favicon.png for favicons, startup.png for Apple startup screen, etc.).
• Rendered assets are cached to disk. Rebuilds run in ~40ms. ✨

Install

npm install --save-dev @darkobits/vite-plugin-favicons

Use

The plugin accepts a FaviconOptions object used to configure favicons, with the following differences:

import { defineConfig } from 'vite';
import { faviconsPlugin } from '@darkobits/vite-plugin-favicons';

export default defineConfig(() => ({
  plugins: [
    faviconsPlugin({
      /**
       * Whether to inject the HTML fragments generated by `favicons` into the
       * compilation's HTML document.
       *
       * @default `true`
       */
      inject: true,

      /**
       * Whether to cache generated assets for faster rebuilds.
       *
       * @default `true`
       */
      cache: true,

      // Any additional `favicons` configuration options may be used here.

      /**
       * Specify each icon type to render. Unlike `favicons`, this plugin is
       * opt-in, meaning only the icon types you declare here will be rendered.
       *
       * For each icon type, all `favicons` options are supported. An
       * additional `source` property is required to indicate the asset to be
       * used for that icon type.
       */
      icons: {
        favicons: {
          source: './assets/favicon.png'
        },
        android: {
          source: './assets/android.png'
        },
        appleStartup: {
          source: './assets/apple-startup.png'
        }
        // ...etc.
      }
    })
  ]
}));

Prior Art

• vite-plugin-favicon
• favicons-webpack-plugin