rollup-plugin-favicons

0.5.0 verified Mon Apr 27 auth: no javascript

A Rollup plugin for generating favicons and associated files from a source image, using the favicons generator. Version 0.5.0 is the latest stable release. It supports caching, custom output via callback, and integrates with rollup-plugin-html2 for automatic injection of link tags. Compared to other solutions, it leverages Rollup's asset emission and is designed for modern build pipelines. Peer dependencies: rollup >=1.25 and rollup-plugin-html2 >=0.7.

Common errors

error Error: Cannot find module 'rollup-plugin-html2' ↓

cause Missing peer dependency rollup-plugin-html2 when using it in the plugin list.

fix

npm install -D rollup-plugin-html2

error TypeError: favicons is not a function ↓

cause Using a named import (import { favicons } from ...) instead of default import; the module exports a single default function.

fix

Change to 'import favicons from 'rollup-plugin-favicons''

error Error: Could not resolve source image: 'icon.svg' ↓

cause The source option path is incorrect or the file does not exist.

fix

Provide a correct absolute or relative path to the source image. Use path.resolve(__dirname, 'src/icon.svg') if needed.

Warnings

deprecated Option 'appDescription' is deprecated in favicons configuration; use 'description' instead. ↓

fix Rename appDescription to description in the configuration object passed to the plugin.

gotcha Plugin order matters: favicons must be placed before rollup-plugin-html2 in the plugins array. ↓

fix Ensure favicons plugin is listed before html2 in the plugins array.

breaking In version 0.4.0, the default export changed from a factory function to a direct invocation. Previously you had to call favicons() to get the plugin; now it's the plugin itself. ↓

fix Update usage: remove extra function call (e.g., favicons() becomes favicons).

gotcha If no output.dir is set in Rollup config, rollup-plugin-favicons may emit assets to the current working directory. ↓

fix Set an output.dir in your Rollup configuration (e.g., output: { dir: 'dist' }).

Install

npm install rollup-plugin-favicons

yarn add rollup-plugin-favicons

pnpm add rollup-plugin-favicons

Imports

favicons
wrong
```
const favicons = require('rollup-plugin-favicons')
```
correct
```
import favicons from 'rollup-plugin-favicons'
```
ESM default export. CommonJS require will not work with default export without using .default.
favicons
wrong
```
import { favicons } from 'rollup-plugin-favicons'
```
correct
```
import favicons from 'rollup-plugin-favicons'
```
The package exports a single default function; named import will result in undefined.
RollupPluginFavicons
```
import type { RollupPluginFavicons } from 'rollup-plugin-favicons'
```
TypeScript users can import the type for type-checking if they use the TypeScript declarations.

Quickstart

Shows basic usage of rollup-plugin-favicons with rollup-plugin-html2, generating favicons from a source SVG with custom configuration and caching.

// rollup.config.js
import favicons from 'rollup-plugin-favicons'
import html2 from 'rollup-plugin-html2'

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [
    favicons({
      source: 'src/icon.svg',
      configuration: {
        appName: 'My App',
        appShortName: 'App',
        background: '#ffffff',
        theme_color: '#000000',
        display: 'standalone',
        orientation: 'any',
        start_url: '/',
        scope: '/',
      },
      cache: true,
    }),
    html2({
      template: 'src/index.html',
    }),
  ],
}