Important

This is a fork of version 2.2.0 of https://github.com/JohnPremKumar/vite-plugin-favicons-inject aiming to provide support for relative paths in the generated HTML by using, as a dependency, @dttrian/favicons (https://github.com/dttrian/favicons) instead of the original favicon (https://www.npmjs.com/package/favicons).

The use case for which this fork has been produced is the following: for an application not to be published in the root of the website (e.g. https://www.website.com/) but in a subpath (e.g. https://www.website.com/myapp), the links generated for the manifest file and the generated HTML should be relative. While for manifest.webmanifest this can be achieved by setting the manifestRelativePaths option to true, there is no way in the original version of favicon to have the same kind of result for the generated HTML. In other words, it is only possible to obtain something like:

<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">

while it would be needed something like:

<link rel="icon" type="image/x-icon" href="assets/favicon.ico">

For this reasons this fork has been created.

In the following, it has been reported, unmodified, the original readme of vite-plugin-favicons-inject 2.2.0. Notice that:

• since the name of this fork's package is @dttrian/vite-plugin-favicons-inject, to install this package, the correct command is:

npm install @dttrian/vite-plugin-favicons-inject

vite-plugin-favicons-inject

A Vite plugin for creating and injecting favicons during the application build!

Install

$ npm install vite-plugin-favicons-inject

Usage

As ES6 Module

// In vite.config.js file

import vitePluginFaviconsInject from 'vite-plugin-favicons-inject';

export default defineConfig({
  plugins: [
    ...
    vitePluginFaviconsInject('./src/assets/logo.svg'),
    ...
  ]
});

As CommonJs

// In vite.config.js file

const vitePluginFaviconsInject = require('vite-plugin-favicons-inject');

export default defineConfig({
  plugins: [
    ...
    vitePluginFaviconsInject('./src/assets/logo.svg'),
    ...
  ]
});

Parameter

• source - path of the logo file. Default: ./src/logo.png
• config (optional) - favions config object. (refer favicons for all available options).
• pluginConfig (optional) - Some internal plugin configurations - Default:

  {
    failGraciously: false, // set it to `true`for failing without errors(only applicable on exceptional cases)
  }

Note 'path' option in the config cannot be overriden as it is assigned to vite assetsDir:

{
  path: "<vite assets dir>" // destination path of generated favicons based on vite asset dir
}

More information about vite assets directory and how to change it can be found here

Development Mode

By default this plugin will not generate any files in the development mode since it will affect the HMR performance and overall development experience.

But, the markup will be injected into the HTML files. If you would like to avoid it you can optionally enable this plugin only on production mode like below:

process.env.NODE_ENV == "production" ? vitePluginFaviconsInject() : false

Note: the above suggestion assume you have a envionment variable called NODE_ENV properly configured in your application on the both production and development environments accordingly.

Compatibility

This plugin was created to easily migrate from vite-plugin-favicon which no longer seems to be working.

Just install, change the import and plugin config in vite config file. You are good to go!

License

MIT