Registry / web-framework / vite-plugin-favicon

vite-plugin-favicon

JSON →
library1.0.8jsnpmunverified

Automatically generate and manage favicons for Vite bundles from a single logo, supporting 44+ icon formats for iOS, Android, Windows Phone, and desktop browsers. Current stable version is 1.0.8 (May 2021), with infrequent releases. Partially compatible with favicons-webpack-plugin config. Ships TypeScript types. Key differentiator: minimal config, zero-config setup, and integrates with Vite's HTML plugin hooks.

npm install vite-plugin-favicon
INSTALL
IMPORT
SIG · VITE-PLUGIN-FAVICO
V
vite-plugin-favicon
web-frameworkjavascriptv1.0.8
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18223 runs
build_error
glibc
node 18223 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

ViteFaviconsPlugin
import { ViteFaviconsPlugin } from 'vite-plugin-favicon'
const ViteFaviconsPlugin = require('vite-plugin-favicon')
ESM import is the standard; CommonJS require works but not recommended for Vite projects.
ViteFaviconsPlugin (default)
import ViteFaviconsPlugin from 'vite-plugin-favicon'
import { default as ViteFaviconsPlugin } from 'vite-plugin-favicon'
Plugin also has a default export, but named export is more consistent with Vite plugins.
ViteFaviconsPlugin (type)
import type { ViteFaviconsPlugin } from 'vite-plugin-favicon'
Type import is available for TypeScript usage.

Basic setup with a custom logo path and optional favicon configuration, demonstrating zero-config usage and TypeScript integration.

// vite.config.ts import { defineConfig } from 'vite'; import { ViteFaviconsPlugin } from 'vite-plugin-favicon'; export default defineConfig({ plugins: [ ViteFaviconsPlugin('src/assets/logo.png', { // Optional: override default favicon generation settings favicons: { appName: 'My App', appShortName: 'App', appDescription: 'My awesome app', background: '#ffffff', theme_color: '#333333', display: 'standalone', orientation: 'portrait', start_url: '.', version: '1.0.0', logging: false, html: 'index.html', pipeHTML: true, replace: true } }) ] });
Debug
Known issues
gotchaPlugin may fail silently if the logo file path is incorrect; no error is thrown for missing file in some cases.
fix
Always verify the logo path is correct and accessible.
affects: >=1.0.0
deprecatedThe 'favicons' option directly passes config to the underlying 'favicons' package, which may change its options between versions.
fix
Check the favicons package documentation for available options and versions.
affects: >=1.0.0
gotchaPlugin does not generate separate files for development; favicons are only built in production mode.
fix
Ensure you run a production build (vite build) to see the favicons in output.
affects: >=1.0.0
gotchaHTML injection only works if Vite's html plugin hooks are present; if you use a custom HTML template, injection may not happen.
fix
Use Vite's default index.html or ensure your template includes the html plugin hooks.
affects: >=1.0.0
gotchaThe plugin generates many files (44+ icons) which can clutter the build output and increase build time.
fix
Consider using the 'favicons' option to limit vendors or icon sizes.
affects: >=1.0.0
Errors
Common errors & fixes
Error: Cannot find module 'vite-plugin-favicon'
Package not installed or not in node_modules
fix
Run 'npm install --save-dev vite-plugin-favicon'
Error: The service you have requested is not available yet.
The underlying favicons package may require network access to download resources (e.g., for rasterizing SVGs)
fix
Ensure you have network access or provide a pre-rasterized logo as PNG instead of SVG.
TypeError: ViteFaviconsPlugin is not a function
Incorrect import: using default import when named export is expected, or vice versa
fix
Use import { ViteFaviconsPlugin } from 'vite-plugin-favicon' (named export)
Error: [vite] Internal server error: FaviconsPlugin(...).apply is not a function
Plugin instantiated without calling it (missing parentheses) or used as Vite plugin incorrectly
fix
Ensure you call ViteFaviconsPlugin() as a function in the plugins array
Upgrade
Version history
1.0.8latest on npm
Audit
Dependencies
viterequiredpeer dependency - plugin requires Vite >=2.0.0
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
vite-plugin-favicon — npm install vite-plugin-favicon · libregistry