A Vite plugin for creating and injecting favicons during the application build!

$ npm install vite-plugin-favicons-inject

// In vite.config.js file

import vitePluginFaviconsInject from 'vite-plugin-favicons-inject';

export default defineConfig({
  plugins: [
    ...
    vitePluginFaviconsInject('./src/assets/logo.svg'),
    ...
  ]
});

// In vite.config.js file

const vitePluginFaviconsInject = require('vite-plugin-favicons-inject');

export default defineConfig({
  plugins: [
    ...
    vitePluginFaviconsInject('./src/assets/logo.svg'),
    ...
  ]
});

• source - path of the logo file. Default: ./src/logo.png
• config (optional) - favions config object. (refer favicons for all available options).
• pluginConfig (optional) - Some internal plugin configurations - Default:

  {
    failGraciously: false, // set it to `true`for failing without errors(only applicable on exceptional cases)
  }

Note 'path' option in the config cannot be overriden as it is assigned to vite assetsDir:

{
  path: "<vite assets dir>" // destination path of generated favicons based on vite asset dir
}

More information about vite assets directory and how to change it can be found here

By default this plugin will not generate any files in the development mode since it will affect the HMR performance and overall development experience.

But, the markup will be injected into the HTML files. If you would like to avoid it you can optionally enable this plugin only on production mode like below:

process.env.NODE_ENV == "production" ? vitePluginFaviconsInject() : false

Note: the above suggestion assume you have a envionment variable called NODE_ENV properly configured in your application on the both production and development environments accordingly.

This plugin was created to easily migrate from vite-plugin-favicon which no longer seems to be working.

Just install, change the import and plugin config in vite config file. You are good to go!

MIT