Vite Plugin: Favicon generator

Een Vite plugin die automatisch favicons genereert van een bronafbeelding met behulp van de krachtige favicons bibliotheek.

Kenmerken

• ð¯ Genereer meerdere favicon formaten vanuit een enkele bronafbeelding
• ð§ Volledig configureerbare favicon opties
• ð Automatische HTML injectie in index.html
• ð Aangepaste uitvoermap en openbaar pad
• ð Ondersteuning voor ontwikkelingsserver met in-memory serveren
• ð Optioneel genereren van HTML-tags bestand
• ð¨ Ondersteuning voor Android, Apple en standaard favicons

Installatie

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

Gebruik

Basis gebruik

// 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',
    })
  ]
})

Geavanceerde configuratie

// 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'
      }
    })
  ]
})

Configuratie-opties

Plugin opties

Favicon opties

Alle opties uit de favicons bibliotheek worden ondersteund:

Pictogram Configuratie

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
}

Elk pictogramtype kan ook een object met offset en background eigenschappen accepteren:

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

Voorbeelden

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

Aangepaste uitvoer en HTML-generatie

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',
})

Ontwikkeling vs Productie

• Ontwikkeling: Favicons worden in het geheugen gegenereerd en geserveerd via middleware
• Productie: Favicons worden gegenereerd als statische bestanden in de build output directory

Vereisten

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

Bijdragen

Gelieve bugs of feature requests in te dienen via de Github issues.

Pull requests zijn welkom!

Bedankt!

Licentie

Dit project is open-sourced software gelicenseerd onder de MIT Licentie.

Je bent vrij om het te gebruiken, aan te passen en te verspreiden in je projecten, zolang je voldoet aan de voorwaarden van de licentie.