Vite Plugin: Favicon generator

A Vite plugin that automatically generates favicons from a source image using the powerful favicons library.

Features

• 🎯 Generate multiple favicon formats from a single source image
• 🔧 Fully configurable favicon options
• 🚀 Automatic HTML injection into index.html
• 📁 Custom output directory and public path
• 🔄 Development server support with in-memory serving
• 📝 Optional HTML tags file generation
• 🎨 Support for Android, Apple, and standard favicons

Installation

npm install vite-plugin-favicon-generator --save-dev
# or
yarn add vite-plugin-favicon-generator --dev
# or
pnpm add vite-plugin-favicon-generator --save-dev

Usage

Basic Usage

// vite.config.js
import { defineConfig } from 'vite'
import faviconPlugin from 'vite-plugin-favicon-generator'

export default defineConfig({
  plugins: [
    faviconPlugin({
      source: 'src/assets/favicon.png', // Source favicon image
      appName: 'My App',
      theme_color: '#1a1065',
      background: '#ffffff',
    })
  ]
})

Advanced Configuration

// vite.config.js
import { defineConfig } from 'vite'
import faviconPlugin from 'vite-plugin-favicon-generator'

export default defineConfig({
  plugins: [
    faviconPlugin({
      // Source image
      source: 'src/assets/favicon.png',
      
      // Output configuration
      outputDir: 'icons', // Output directory (relative to dist)
      publicPath: '/icons', // Public path for HTML links
      htmlOutput: 'src/favicon-tags.html', // Generate HTML tags file
      injectHtml: true, // Auto-inject into index.html
      
      // Favicon configuration (same as favicons library)
      appName: 'My Awesome App',
      appShortName: 'MyApp',
      appDescription: 'My awesome application description',
      developerName: 'Your Name',
      developerURL: 'https://yoursite.com',
      lang: 'en-US',
      theme_color: '#1a1065',
      background: '#ffffff',
      
      // Icon types to generate
      icons: {
        android: true,              // Android homescreen icon
        appleIcon: true,           // Apple touch icons
        appleStartup: false,       // Apple startup images
        favicons: true,            // Regular favicons
        windows: false,            // Windows 8 tile icons
        yandex: false,             // Yandex browser icon
      },
      
      // Platform-specific options
      android: {
        offset: 10,
        background: '#ffffff'
      },
      appleIcon: {
        offset: 10,
        background: '#ffffff'
      }
    })
  ]
})

Configuration Options

Plugin Options

Favicon Options

All options from the favicons library are supported:

Icons Configuration

icons: {
  android: true,              // Create Android homescreen icon
  appleIcon: true,           // Create Apple touch icons  
  appleStartup: false,       // Create Apple startup images
  favicons: true,            // Create regular favicons
  windows: false,            // Create Windows 8 tile icons
  yandex: false,             // Create Yandex browser icon
}

Each icon type can also accept an object with offset and background properties:

icons: {
  android: {
    offset: 10,
    background: '#ffffff'
  },
  appleIcon: {
    offset: 15,
    background: 'transparent'
  }
}

Examples

React + TypeScript

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import faviconPlugin from 'vite-plugin-favicon-generator'

export default defineConfig({
  plugins: [
    react(),
    faviconPlugin({
      source: 'src/assets/logo.png',
      appName: 'React App',
      appDescription: 'My React application',
      theme_color: '#646cff',
      background: '#ffffff',
      icons: {
        android: true,
        appleIcon: true,
        favicons: true,
      }
    })
  ]
})

Vue.js

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import faviconPlugin from 'vite-plugin-favicon-generator'

export default defineConfig({
  plugins: [
    vue(),
    faviconPlugin({
      source: 'src/assets/favicon.png',
      appName: 'Vue App',
      theme_color: '#4fc08d',
      background: '#ffffff',
    })
  ]
})

Laravel

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import faviconPlugin from 'vite-plugin-favicon-generator'

export default defineConfig({
  plugins: [
    laravel(),
    faviconPlugin({
        source: 'resources/images/favicon.png',
        outputDir: 'public/favicons',
        publicPath: '/favicons',
        htmlOutput: 'resources/views/favicons.blade.php',
        injectHtml: false,
        icons: {
            android: true,
            appleIcon: true,
            appleStartup: false,
            favicons: true,
            windows: false,
            yandex: false,
        },
    })
  ]
})

{{-- layout.blade.php --}}
@if(file_exists(resource_path('views/favicons.blade.php')))
    @include('favicons')
@endif

Custom Output and HTML Generation

faviconPlugin({
  source: 'assets/icon.png',
  outputDir: 'static/icons',
  publicPath: '/static/icons',
  htmlOutput: 'public/favicon-meta.html',
  injectHtml: false, // Don't auto-inject, use the HTML file instead
  appName: 'My Custom App',
})

Development vs Production

• Development: Favicons are generated in memory and served via middleware
• Production: Favicons are generated as static files in the build output directory

Requirements

• Node.js >= 18
• Vite >= 5.0.0

Contributing

Please, submit bugs or feature requests via the Github issues.

Pull requests are welcomed!

Thanks!

License

This project is open-sourced software licensed under the MIT License.

You are free to use, modify, and distribute it in your projects, as long as you comply with the terms of the license.