webpackでデプロイの時にfaviconを自動で追加する方法

faviconジェネレーターサイトを利用する方法

まずはあんまりスマートじゃありませんが、アイコン生成サイトを利用する方法を紹介します。手順としては以下の通り。

1. faviconをPNGで作成
2. faviconジェネレータサイトを利用
3. webpackのタスクへ追加

1. faviconをPNGで作成

これはできた素晴らしいサイトができていると思うので、簡単にできると思いますっ。 サイズは512 x 512で作るとiphoneのアイコンなどでもキレイに仕上がります。

2. faviconジェネレータサイトを利用

たくさん生成サイトはありますが、私はこちらを利用しました。bookmarkに登録されているので、反応で使ってしまいます。
このサイトは、微調整が画面で確認しながらできるのがいいですね。

RealFaviconGenerator
https://realfavicongenerator.net/

3. webpackのタスクへ追加

ジェネレータでアイコンができました。zipされているので、解凍するとファイルが10ファイルぐらいできます。これをビルドした時に自動で公開用のディレクトリ/distに入るようしします。まずは、

新たにfaviconsディレクトリを作成し、解凍したファイルをコピー

そして、デプロイ時に自動で/distにコピーされて欲しいので、webpack.prod.conf.jsのCopyWebpackPluginへ新たにアイコンをコピーする記述を追加します。

...
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      // ここから
      {
        from: path.resolve(__dirname, '../favicons'),
        to: './',
        ignore: ['.*']
      }
      // ここまで
    ])
...

to: './'と固定でディレクトリ指定していて、全てのfaviconsディレクトリにあるファイルはdistのルートにコピーしますというコマンドになります。

以上ですっ。簡単っ！あとは、ビルド（npm run build）して/distディレクトリにアイコンがコピーされているはずっ

プラグイン favicons-webpack-pluginを使った方法

アイコンを制作する以外全て自動化できます。最初に紹介したジェネレータサイトなんて使わなくても簡単にできてしまいます。そのwebpackプラグインがfavicons-webpack-pluginです。

favicons-webpack-plugin
https://github.com/jantimon/favicons-webpack-plugin

まとめ

結局使ったのは最初のジェネレータサイトを利用した方法で作業しました。 どうしても画面で確認しながら、持っていないwindowsでの表示の仕方などを画面で確認しながらできるのはやっぱり頼りになります。 それに、レアなケースですが、アイコンのデザインがかなり細い線が含まれるものだったので、faviconなど小さいサイズのアイコンには線を太くしたもの、大きいiphoneなどのアイコンには線の細いものを使用するなど、細かな調整が必要だったのもこちらを採用した理由です。

参考にしたサイト：

https://stackoverflow.com/questions/37298215/add-favicon-with-react-and-webpack

Tags

• vue-cli
• vue
• webpack
• favicon
• favicons-webpack-plugin
• CopyWebpackPlugin