🎨 Favigo

Universal favicon generator for Vite, Webpack, Rollup, esbuild, and more.

Generate all favicon formats from a single source image with optional environment-specific variants.

Getting Started · Examples · Variants

✨ Features

• 🎯 Universal - Works with Vite, Webpack, Rollup, esbuild, Rspack, Farm, and Rolldown
• 🖼️ Single Source - Generate all favicon formats from one image
• 🎨 Environment Variants - Add borders, badges, overlays, or tints for different environments
• ⚡ Fast - High-performance image processing with Sharp
• 🔧 Zero Config - Works out of the box with sensible defaults
• 📦 All Formats - Generates ICO, PNG, Apple Touch Icons, Android icons, and more
• 🎭 TypeScript - Full type definitions included

📦 Installation

npm install --save-dev favigo

pnpm add -D favigo

yarn add -D favigo

🚀 Usage

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import favicons from 'favigo/vite'

export default defineConfig({
  plugins: [
    favicons({
      source: './src/assets/logo.png'
    })
  ]
})

Webpack

// webpack.config.js
const favicons = require('favigo/webpack')

module.exports = {
  plugins: [
    favicons({
      source: './src/assets/logo.png'
    })
  ]
}

Rollup

// rollup.config.js
import favicons from 'favigo/rollup'

export default {
  plugins: [
    favicons({
      source: './src/assets/logo.png'
    })
  ]
}

esbuild

// build.js
import * as esbuild from 'esbuild'
import favicons from 'favigo/esbuild'

await esbuild.build({
  plugins: [
    favicons({
      source: './src/assets/logo.png'
    })
  ]
})

Other Bundlers

Favigo also supports:

• Rspack - import favicons from 'favigo/rspack'
• Farm - import favicons from 'favigo/farm'
• Rolldown - import favicons from 'favigo/rolldown'

⚙️ Configuration

interface FaviconsOptions {
  // Required: Path to source image
  source: string

  // Optional: Output directory (default: 'public')
  outputPath?: string

  // Optional: Image variant for environment differentiation
  variant?: ImageVariant

  // Optional: Pass-through configuration for favicons library
  configuration?: FaviconOptions
}

Basic Example

favicons({
  source: './src/assets/logo.png',
  outputPath: 'dist/assets'
})

🎨 Image Variants

Differentiate environments (staging, development, testing) by applying visual modifications to your favicon.

🔲 Border Variant

Add a colored border around your favicon:

favicons({
  source: './src/assets/logo.png',
  variant: {
    type: 'border',
    color: '#fbbf24',  // Border color
    width: 8           // Border width percentage (1-20)
  }
})

Perfect for: Staging environments

🎯 Badge Variant

Add a circular badge with text:

favicons({
  source: './src/assets/logo.png',
  variant: {
    type: 'badge',
    text: 'DEV',
    backgroundColor: '#ef4444',
    textColor: '#ffffff',
    position: 'bottom-right',  // 'top-left', 'top-right', 'bottom-left', 'bottom-right'
    size: 'medium'            // 'small', 'medium', 'large'
  }
})

Perfect for: Development environments

⭕ Overlay Variant

Add a colored circle overlay:

favicons({
  source: './src/assets/logo.png',
  variant: {
    type: 'overlay',
    color: '#8b5cf6',
    opacity: 0.7,              // Opacity (0-1)
    position: 'corner'         // 'corner', 'center', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
  }
})

📝 Text Variant

Add custom text to your favicon:

favicons({
  source: './src/assets/logo.png',
  variant: {
    type: 'text',
    text: 'BETA',
    color: '#ffffff',
    fontSize: 25,              // Font size percentage (10-50)
    position: 'corner',        // Position options same as overlay
    fontFamily: 'Arial'        // Optional: font family
  }
})

🎨 Tint Variant

Apply a color tint to the entire image:

favicons({
  source: './src/assets/logo.png',
  variant: {
    type: 'tint',
    color: '#3b82f6',
    opacity: 0.3               // Tint opacity (0-1)
  }
})

Perfect for: Testing/QA environments

🌍 Real-World Examples

Multi-Environment Setup

// vite.config.ts
import { defineConfig } from 'vite'
import favicons from 'favigo/vite'

const env = process.env.NODE_ENV

const variantConfig = {
  development: {
    type: 'badge',
    text: 'DEV',
    backgroundColor: '#ef4444',
    textColor: '#ffffff',
    position: 'bottom-right'
  },
  staging: {
    type: 'border',
    color: '#fbbf24',
    width: 6
  },
  test: {
    type: 'tint',
    color: '#8b5cf6',
    opacity: 0.4
  }
}

export default defineConfig({
  plugins: [
    favicons({
      source: './src/assets/logo.png',
      variant: env !== 'production' ? variantConfig[env] : undefined
    })
  ]
})

📝 Generated Files

Favigo automatically generates:

• ✅ favicon.ico - Classic favicon
• ✅ Multiple PNG sizes (16×16, 32×32, 48×48, etc.)
• ✅ Apple Touch Icons
• ✅ Android Chrome icons
• ✅ Windows tile icons
• ✅ Web app manifest (manifest.json)
• ✅ Browser configuration files (browserconfig.xml)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Try preview packages from PRs:

npm install https://pkg.pr.new/jog1t/favigo@{pr-number}

📄 License

MIT

🔗 Links

• GitHub Repository
• npm Package
• Report Issues

Built with unplugin · Powered by Sharp