{"id":22666,"library":"vite-plugin-favicons","title":"vite-plugin-favicons","description":"A Vite plugin that automatically generates favicons in various formats and sizes from a source image using the Favicons library. Version 0.1.7 is stable, with a moderate release cadence. It integrates seamlessly into the Vite build pipeline, provides a virtual module 'virtual:favicons' for injecting links, includes caching for faster builds, and ships TypeScript definitions. Key differentiators: designed specifically for Vite, works with SvelteKit (unlike some alternatives), and offers a simple API with optional customization via Favicons package options.","status":"active","version":"0.1.7","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-favicons","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-favicons","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-favicons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for generating favicons from source image.","package":"favicons","optional":false},{"reason":"Peer dependency - plugin only works with Vite >=6.3.5.","package":"vite","optional":false},{"reason":"Peer dependency for TypeScript type definitions - required for TS projects.","package":"typescript","optional":true}],"imports":[{"note":"ESM-only package; CommonJS require will fail. Use ESM imports.","wrong":"const faviconsPlugin = require('vite-plugin-favicons')","symbol":"faviconsPlugin","correct":"import { faviconsPlugin } from 'vite-plugin-favicons'"},{"note":"Options is a TypeScript type, not a runtime export. Use import type.","wrong":"import { Options } from 'vite-plugin-favicons'","symbol":"Options","correct":"import type { Options } from 'vite-plugin-favicons'"},{"note":"The virtual module exports a default string (HTML link tags), not a named export. For Svelte, import { FaviconsHead } which is a named export.","wrong":"import { faviconLinks } from 'virtual:favicons'","symbol":"virtual:favicons (default export)","correct":"import faviconLinks from 'virtual:favicons'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { faviconsPlugin } from 'vite-plugin-favicons';\n\nexport default defineConfig({\n plugins: [\n faviconsPlugin({\n imgSrc: './src/assets/favicon.png',\n faviconAssetsDest: 'assets/favicons',\n }),\n ],\n});\n\n// In your HTML entry: import faviconLinks from 'virtual:favicons';\n// and inject into \n\n// Usage example (e.g., in a JavaScript file)\nimport faviconLinks from 'virtual:favicons';\ndocument.head.insertAdjacentHTML('afterbegin', faviconLinks);","lang":"typescript","description":"Shows how to configure the plugin in vite.config.ts and use the virtual module to inject favicon links into HTML head."},"warnings":[{"fix":"Upgrade Vite to ^6.3.5 and TypeScript to ^5.8.3.","message":"Plugin requires Vite >=6.3.5 and TypeScript ^5.8.3 as peer dependencies; older versions cause build errors.","severity":"breaking","affected_versions":"<0.1.7"},{"fix":"In Svelte: import { FaviconsHead } from 'virtual:favicons' and use {@html FaviconsHead}. In other frameworks, import the default export.","message":"The virtual module 'virtual:favicons' exports a default string of HTML link tags, but SvelteKit users must import { FaviconsHead } instead for proper SSR.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Monitor release notes for option name changes.","message":"The option 'faviconAssetsDest' may be renamed in future versions; check documentation for changes.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Ensure imgSrc points to an existing file; verify with a console.log or check the build output.","message":"If the source image path is incorrect or the image is missing, the plugin fails silently during build.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Run 'npm install favicons' alongside 'vite-plugin-favicons'.","message":"The plugin requires the 'favicons' package as a dependency; it is not bundled. Ensure it is installed.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Use ESM imports (import) instead of require().","message":"The plugin does not work with CommonJS require due to ESM-only design; using require will throw a runtime error.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import { faviconsPlugin } from 'vite-plugin-favicons' instead of import faviconsPlugin from 'vite-plugin-favicons'.","cause":"Trying to import default export but the package exports named export 'faviconsPlugin'.","error":"Error: Module 'vite-plugin-favicons' does not export a default"},{"fix":"Convert your project to ESM (add \"type\": \"module\" in package.json) or use dynamic import().","cause":"Using CommonJS require() to load an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node_modules/vite-plugin-favicons/dist/index.js not supported."},{"fix":"Pass an options object with at least 'imgSrc' property, e.g., faviconsPlugin({ imgSrc: './src/assets/favicon.png' }).","cause":"The plugin is called without options or with an empty object.","error":"TypeError: Cannot read properties of undefined (reading 'imgSrc')"},{"fix":"Install the 'favicons' package: npm install favicons.","cause":"Missing runtime dependency 'favicons' which is required by the plugin.","error":"Error: The package 'favicons' is not installed."},{"fix":"Add a declaration file (e.g., env.d.ts) with: declare module 'virtual:favicons' { const links: string; export default links; }","cause":"TypeScript cannot resolve the virtual module; its types are not declared.","error":"TS2307: Cannot find module 'virtual:favicons' or its corresponding type declarations."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}