vite-plugin-favicons-inject

2.2.0 verified Mon Apr 27 auth: no javascript

A Vite plugin that generates and injects favicons into HTML during build. Current version 2.2.0 (Mar 2023), maintained actively. It wraps the `favicons` package, supporting SVG sources and optional configuration. Unlike `vite-plugin-favicon`, it injects markup directly based on Vite's assets directory. Skips file generation in dev mode for HMR performance, but still injects markup. Uses ESM default export, also supports CJS. Key differentiator: simple migration path from deprecated `vite-plugin-favicon` and automatic path handling aligned with Vite's build.assetsDir.

Common errors

error Cannot find module 'vite-plugin-favicons-inject' ↓

cause Package not installed or typo in import path.

fix

Run 'npm install vite-plugin-favicons-inject' and ensure the import is correct.

error [vite] Internal server error: favicons is not a function ↓

cause Missing peer dependency 'favicons' or mismatch version.

fix

Install 'favicons' as a dependency: 'npm install favicons'.

error TypeError: vitePluginFaviconsInject is not a function ↓

cause Using named import instead of default import.

fix

Use 'import vitePluginFaviconsInject from ...' or 'const vitePluginFaviconsInject = require(...)'.

Warnings

gotcha The 'path' option in favicons config cannot be overridden; it is automatically set to Vite's assetsDir. ↓

fix Do not specify 'path' in the config object. Adjust Vite's build.assetsDir instead.

gotcha In development mode, no files are generated (affects HMR performance). Markup is still injected. ↓

fix If you want to avoid markup injection in dev, conditionally disable the plugin: process.env.NODE_ENV === 'production' ? vitePluginFaviconsInject() : false

deprecated The plugin was created to replace the no-longer-maintained 'vite-plugin-favicon'. Migration: simple swap of import and plugin call. ↓

fix Replace import and usage of 'vite-plugin-favicon' with this plugin; see README for details.

gotcha The source path is relative to the project root, not the vite config file location. ↓

fix Use a path starting with './src/...' from the project root.

Install

npm install vite-plugin-favicons-inject

yarn add vite-plugin-favicons-inject

pnpm add vite-plugin-favicons-inject

Imports

vitePluginFaviconsInject

wrong

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

correct

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

Default export only, not named. Use default import or require the whole module.

vitePluginFaviconsInject

wrong

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

correct

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

CJS require returns the function directly, no .default property.

Plugin config options

wrong

vitePluginFaviconsInject('./src/logo.svg', { failGraciously: true })

correct

vitePluginFaviconsInject('./src/logo.svg', { /* favicons config */ }, { failGraciously: true })

Second argument is favicons config, third is pluginConfig. Do not merge them.

Quickstart

Minimal setup: provide path to your SVG logo. The plugin generates favicons and injects markup during build.

// vite.config.js
import { defineConfig } from 'vite';
import vitePluginFaviconsInject from 'vite-plugin-favicons-inject';

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