VueCLIでfaviconを変える方法

最近個人開発で作っているウェブアプリのfavicon(ブラウザで上に出るアイコン)を変えようとしたのですが反映されずに相当つまづいたので備忘録としてこの記事を書きました。

Faviconについて

Vue CLIではFaviconはすべて/public/img/iconsのところに入っており、このiconsフォルダを置き換えることによってアイコンを変えることができます。これらのアイコンは端末に合わせてvue側で入れ替えられるので、画質を落とすことなく複数デバイスにあったfaviconを表示できるようになっています。

どうやって入れ替えるの？？？

このジェネレーターをつかってiconsフォルダ内の画像を一括生成します。 (生成した際に、ブラウザ用のfavicon-16x16.pngなどの画像の名前がicon-16x16.pngになってしまうのでこれらの名前を変更する必要があります。)