{"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,"search_vec":"'0.1.7':26 'altern':71 'api':76 'automat':9 'build':40,55 'cach':52 'cadenc':33 'custom':79 'definit':59 'design':62 'differenti':61 'faster':54 'favicon':4,11,23,47,81 'format':14 'generat':10 'imag':20 'includ':51 'inject':49 'integr':35 'javascript':84 'key':60 'librari':24 'link':50 'moder':31 'modul':45 'offer':73 'option':78,83 'packag':82 'pipelin':41 'plugin':3,7 'provid':42 'releas':32 'seamless':36 'ship':57 'simpl':75 'size':16 'sourc':19 'specif':63 'stabl':28 'sveltekit':68 'typescript':58,85 'unlik':69 'use':21 'various':13 'version':25 'via':80 'virtual':44,46 'vite':2,6,39,65 'vite-plugin-favicon':1 'work':66","created_at":"2026-04-27T17:06:22.950648+00:00","updated_at":"2026-04-27T17:06:22.950648+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-favicons","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}