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

Option	Type	Default	Description
source	string	'src/favicon.png'	Path to the source favicon image
outputDir	string	'favicons'	Output directory for generated favicons (relative to build output)
publicPath	string	'/favicons'	Public path for favicons in HTML
htmlOutput	string	undefined	Output file for HTML tags (relative to project root)
injectHtml	boolean	true	Whether to inject HTML tags into index.html

Favicon Options

All options from the favicons library are supported:

Option	Type	Default	Description
appName	string	null	Your application's name
appShortName	string	appName	Your application's short name
appDescription	string	null	Your application's description
developerName	string	null	Your name
developerURL	string	null	Your website
lang	string	'en-US'	Primary language for name and short_name
background	string	'#fff'	Background color for flattened icons
theme_color	string	'#fff'	Theme color user agents should use
icons	object	See below	Platform-specific icon settings

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 >= 16
• 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.

---

Maintained by ISAPP.
Check out our software development services at isapp.be.