vue-cliではfaviconのタスクが含まれていませんでしたので、設定方法をまとめました。
まずはあんまりスマートじゃありませんが、アイコン生成サイトを利用する方法を紹介します。手順としては以下の通り。
これはできた素晴らしいサイトができていると思うので、簡単にできると思いますっ。
サイズは512 x 512
で作るとiphoneのアイコンなどでもキレイに仕上がります。
たくさん生成サイトはありますが、私はこちらを利用しました。bookmarkに登録されているので、反応で使ってしまいます。
このサイトは、微調整が画面で確認しながらできるのがいいですね。
RealFaviconGenerator
https://realfavicongenerator.net/
ジェネレータでアイコンができました。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
ディレクトリにアイコンがコピーされているはずっ
アイコンを制作する以外全て自動化できます。最初に紹介したジェネレータサイトなんて使わなくても簡単にできてしまいます。その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