Vue CLI 3でfaviconの設定をする方法

Vue CLIを使ってウェブサイトを実装するとき、デフォルトだとVue.jsのアイコンがfaviconとして登録されています。

「public」フォルダの直下に「favicon.ico」があるので、それを差し替えればいいのかと思っていましたが、反映されなかったので、備忘録として残しておきます。

入れ替える画像

favicon.icoの入れ替え

まずは「public/favicon.ico」をデフォルトから変更します。
icoファイルは下記で作成できるので、作成して入れ替えます。

半透過マルチアイコン作成。無料で半透明マルチアイコンやファビコン(favicon.ico)が作れます。

半透過マルチアイコン作成。

https://ao-system.net/alphaicon/

半透過マルチアイコン作成。無料で半透明マルチアイコンやファビコン(favicon.ico)が作れます。ギザギザの無い美しい影を持ったアイコンが作成できます。

しかし、これを入れ替えただけだとサイトを表示しても変更されません。
実際にサイトを見ると、「favicon.ico」はIE用に設定されてあるだけで、それ以外は別のファイルが指定されています。

iconsフォルダ内の入れ替え

「public/img/icons/」内に、favicon用の画像があります。
Vue CLI 3では、このフォルダ内にブラウザ・サイズに合った適切な画像が用意されている場合はそれを優先して読み込むみたいです。

そのため、もともとこのフォルダ内にあるアイコンが優先されて変わらなかったみたいです。

下記のサイトを利用すれば、512×512px〜700×700pxの画像を選択して必要なファイルが一式生成されます。

様々なブラウザやデバイスに対応したファビコンをまとめて作成できます。

様々なファビコンを一括生成

https://ao-system.net/favicongenerator/

使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計な404 not foundを記録させない対策としても有効。

「icon-32×32.png」など先頭に「icon-」と付いたファイルは「favicon-32×32.png」にリネームする必要がありますが、一括で生成してくれるので便利です。

iconsフォルダごと削除した場合

「public/img/icons/」フォルダごと削除してしまえば、「public/favicon.ico」が優先されるのでfaviconが表示されるようになりますが、エラーが出てきたりしますし、アップルタッチアイコンなどの見栄えが最適化されない問題があります。

そこまで手間はかからないので、生成してiconsフォルダ内を入れ替えた方がよさそうです。