vite-plugin-favicon2

1.1.5 verified Mon Apr 27 auth: no javascript

A Vite plugin that generates favicons and PWA manifest icons from a single logo image using the favicons library. Current stable version is 1.1.5. It is a fork of the original vite-plugin-favicon that fixes issues with dev mode support, adds ability to generate webapp.html file, and re-enables outputPath configuration. The plugin is applied only during build phase to speed up dev server cold starts. It is compatible with favicons-webpack-plugin configuration.

Common errors

error Error: Cannot find module 'vite-plugin-favicon2' ↓

cause Missing package installation.

fix

Run 'npm install --save-dev vite-plugin-favicon2'

error TypeError: ViteFaviconsPlugin is not a constructor ↓

cause Using default import instead of named import.

fix

Use 'import { ViteFaviconsPlugin } from 'vite-plugin-favicon2' or const { ViteFaviconsPlugin } = require('vite-plugin-favicon2')

error The plugin does not work in dev mode ↓

cause Since v1.1.0, the plugin only runs during build.

fix

Use inject: true and accept that favicons won't update in dev; or use a workaround like separate dev build.

Warnings

breaking In v1.1.0, the plugin changed to only run during build phase, which may affect workflows that rely on dev mode favicon generation. ↓

fix Use inject: true to automatically inject tags; if you need dev mode support, consider using a different plugin or downgrading to older versions.

deprecated The 'prefix', 'cache', and 'publicPath' options are deprecated and have no effect; they exist only for migration from favicons-webpack-plugin. ↓

fix Remove these options from your config; they are automatically handled by Vite.

gotcha When using 'inject: false', the plugin generates a 'webapp.html' file instead of injecting HTML tags. Ensure your build setup includes this file (e.g., copy to output). ↓

fix Set inject: true for automatic injection, or manually reference the generated webapp.html in your HTML.

gotcha The 'logo' option defaults to 'assets/logo.png' from the project root. If not found, the plugin may fail silently or produce unexpected results. ↓

fix Specify an absolute or relative path to your logo file explicitly.

Install

npm install vite-plugin-favicon2

yarn add vite-plugin-favicon2

pnpm add vite-plugin-favicon2

Imports

ViteFaviconsPlugin

wrong

import ViteFaviconsPlugin from 'vite-plugin-favicon2'

correct

import { ViteFaviconsPlugin } from 'vite-plugin-favicon2'

Named export, not default.

ViteFaviconsPlugin

wrong

const ViteFaviconsPlugin = require('vite-plugin-favicon2')

correct

const { ViteFaviconsPlugin } = require('vite-plugin-favicon2')

CommonJS destructured require.

ViteFaviconsPlugin

wrong

import { ViteFaviconsPlugin } from 'vite-plugin-favicon'

correct

import { ViteFaviconsPlugin } from 'vite-plugin-favicon2'

Wrong package name; use 'vite-plugin-favicon2'.

Quickstart

Shows how to configure the plugin with a custom logo, enabling injection and setting output path.

// vite.config.js
import { defineConfig } from 'vite';
import { ViteFaviconsPlugin } from 'vite-plugin-favicon2';

export default defineConfig({
  plugins: [
    ViteFaviconsPlugin({
      logo: './src/logo.svg',
      inject: true,
      outputPath: 'favicons',
    }),
  ],
});