【Webpack】faviconを自動生成する

パッケージのインストール

faviconを自動生成するには「favicons-webpack-plugin」を使います。

npm i -D favicons favicons-webpack-plugin

Bash

設定ファイル

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

module.exports = {
    plugins: [
        new FaviconsWebpackPlugin({
            logo: './src/images/favicon.png', // 元となるfavicon画像までのパス
        }),
    ]
}

webpack.config.js

logoプロパティに設定した画像を元に様々な種類のfaviconがassetsディレクトリに出力されます。

出力先ディレクトリを変更する

faviconが出力されるディレクトリはデフォルトでassetsです。これを変更するには、outputPathプロパティを変更します。

html-webpack-pluginを使って、HTMLに自動でインジェクトさせる場合はprefixプロパティにoutputPathプロパティに設定したディレクトリを指定する必要があります。

prefixプロパティの設定を忘れると、パスがassetsのままインジェクトされfaviconの設定が反映されないので注意してください。

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            inject: 'body'
        }),
        new FaviconsWebpackPlugin({
            logo: './src/images/favicon.png',
            outputPath: 'favicons', // 出力先ディレクトリ
            prefix: 'favicons/' // HTMLに自動設定する場合はoutputPathのディレクトリに変更する
        }),
    ]
}

webpack.config.js