{"id":22665,"library":"vite-plugin-favicons-inject","title":"vite-plugin-favicons-inject","description":"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.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"git://github.com/JohnPremKumar/vite-plugin-favicons-inject","tags":["javascript","vite","favicons","inject","plugin"],"install":[{"cmd":"npm install vite-plugin-favicons-inject","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-favicons-inject","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-favicons-inject","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core generator for favicon files and HTML markup.","package":"favicons","optional":false}],"imports":[{"note":"Default export only, not named. Use default import or require the whole module.","wrong":"const { vitePluginFaviconsInject } = require('vite-plugin-favicons-inject');","symbol":"vitePluginFaviconsInject","correct":"import vitePluginFaviconsInject from 'vite-plugin-favicons-inject';"},{"note":"CJS require returns the function directly, no .default property.","wrong":"const plugin = require('vite-plugin-favicons-inject').default;","symbol":"vitePluginFaviconsInject","correct":"const vitePluginFaviconsInject = require('vite-plugin-favicons-inject');"},{"note":"Second argument is favicons config, third is pluginConfig. Do not merge them.","wrong":"vitePluginFaviconsInject('./src/logo.svg', { failGraciously: true })","symbol":"Plugin config options","correct":"vitePluginFaviconsInject('./src/logo.svg', { /* favicons config */ }, { failGraciously: true })"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport vitePluginFaviconsInject from 'vite-plugin-favicons-inject';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginFaviconsInject('./src/assets/logo.svg'),\n  ],\n});","lang":"javascript","description":"Minimal setup: provide path to your SVG logo. The plugin generates favicons and injects markup during build."},"warnings":[{"fix":"Do not specify 'path' in the config object. Adjust Vite's build.assetsDir instead.","message":"The 'path' option in favicons config cannot be overridden; it is automatically set to Vite's assetsDir.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"If you want to avoid markup injection in dev, conditionally disable the plugin: process.env.NODE_ENV === 'production' ? vitePluginFaviconsInject() : false","message":"In development mode, no files are generated (affects HMR performance). Markup is still injected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Replace import and usage of 'vite-plugin-favicon' with this plugin; see README for details.","message":"The plugin was created to replace the no-longer-maintained 'vite-plugin-favicon'. Migration: simple swap of import and plugin call.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use a path starting with './src/...' from the project root.","message":"The source path is relative to the project root, not the vite config file location.","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 vite-plugin-favicons-inject' and ensure the import is correct.","cause":"Package not installed or typo in import path.","error":"Cannot find module 'vite-plugin-favicons-inject'"},{"fix":"Install 'favicons' as a dependency: 'npm install favicons'.","cause":"Missing peer dependency 'favicons' or mismatch version.","error":"[vite] Internal server error: favicons is not a function"},{"fix":"Use 'import vitePluginFaviconsInject from ...' or 'const vitePluginFaviconsInject = require(...)'.","cause":"Using named import instead of default import.","error":"TypeError: vitePluginFaviconsInject is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}