{"id":22663,"library":"vite-plugin-favicon","title":"vite-plugin-favicon","description":"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.","status":"active","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/josh-hemphill/vite-plugin-favicon","tags":["javascript","vite-plugin","favicon","favicons","image","generate","typescript"],"install":[{"cmd":"npm install vite-plugin-favicon","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-favicon","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-favicon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - plugin requires Vite >=2.0.0","package":"vite","optional":false}],"imports":[{"note":"ESM import is the standard; CommonJS require works but not recommended for Vite projects.","wrong":"const ViteFaviconsPlugin = require('vite-plugin-favicon')","symbol":"ViteFaviconsPlugin","correct":"import { ViteFaviconsPlugin } from 'vite-plugin-favicon'"},{"note":"Plugin also has a default export, but named export is more consistent with Vite plugins.","wrong":"import { default as ViteFaviconsPlugin } from 'vite-plugin-favicon'","symbol":"ViteFaviconsPlugin (default)","correct":"import ViteFaviconsPlugin from 'vite-plugin-favicon'"},{"note":"Type import is available for TypeScript usage.","wrong":"","symbol":"ViteFaviconsPlugin (type)","correct":"import type { ViteFaviconsPlugin } from 'vite-plugin-favicon'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { ViteFaviconsPlugin } from 'vite-plugin-favicon';\n\nexport default defineConfig({\n  plugins: [\n    ViteFaviconsPlugin('src/assets/logo.png', {\n      // Optional: override default favicon generation settings\n      favicons: {\n        appName: 'My App',\n        appShortName: 'App',\n        appDescription: 'My awesome app',\n        background: '#ffffff',\n        theme_color: '#333333',\n        display: 'standalone',\n        orientation: 'portrait',\n        start_url: '.',\n        version: '1.0.0',\n        logging: false,\n        html: 'index.html',\n        pipeHTML: true,\n        replace: true\n      }\n    })\n  ]\n});","lang":"typescript","description":"Basic setup with a custom logo path and optional favicon configuration, demonstrating zero-config usage and TypeScript integration."},"warnings":[{"fix":"Always verify the logo path is correct and accessible.","message":"Plugin may fail silently if the logo file path is incorrect; no error is thrown for missing file in some cases.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Check the favicons package documentation for available options and versions.","message":"The 'favicons' option directly passes config to the underlying 'favicons' package, which may change its options between versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure you run a production build (vite build) to see the favicons in output.","message":"Plugin does not generate separate files for development; favicons are only built in production mode.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use Vite's default index.html or ensure your template includes the html plugin hooks.","message":"HTML injection only works if Vite's html plugin hooks are present; if you use a custom HTML template, injection may not happen.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using the 'favicons' option to limit vendors or icon sizes.","message":"The plugin generates many files (44+ icons) which can clutter the build output and increase build time.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev vite-plugin-favicon'","cause":"Package not installed or not in node_modules","error":"Error: Cannot find module 'vite-plugin-favicon'"},{"fix":"Ensure you have network access or provide a pre-rasterized logo as PNG instead of SVG.","cause":"The underlying favicons package may require network access to download resources (e.g., for rasterizing SVGs)","error":"Error: The service you have requested is not available yet."},{"fix":"Use import { ViteFaviconsPlugin } from 'vite-plugin-favicon' (named export)","cause":"Incorrect import: using default import when named export is expected, or vice versa","error":"TypeError: ViteFaviconsPlugin is not a function"},{"fix":"Ensure you call ViteFaviconsPlugin() as a function in the plugins array","cause":"Plugin instantiated without calling it (missing parentheses) or used as Vite plugin incorrectly","error":"Error: [vite] Internal server error: FaviconsPlugin(...).apply is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}