Vue CLI 3でfaviconの設定をする方法
Vue CLIを使ってウェブサイトを実装するとき、デフォルトだとVue.jsのアイコンがfaviconとして登録されています。
「public」フォルダの直下に「favicon.ico」があるので、それを差し替えればいいのかと思っていましたが、反映されなかったので、備忘録として残しておきます。
入れ替える画像
favicon.icoの入れ替え
まずは「public/favicon.ico」をデフォルトから変更します。
icoファイルは下記で作成できるので、作成して入れ替えます。
しかし、これを入れ替えただけだとサイトを表示しても変更されません。
実際にサイトを見ると、「favicon.ico」はIE用に設定されてあるだけで、それ以外は別のファイルが指定されています。
iconsフォルダ内の入れ替え
「public/img/icons/」内に、favicon用の画像があります。
Vue CLI 3では、このフォルダ内にブラウザ・サイズに合った適切な画像が用意されている場合はそれを優先して読み込むみたいです。
そのため、もともとこのフォルダ内にあるアイコンが優先されて変わらなかったみたいです。
下記のサイトを利用すれば、512×512px〜700×700pxの画像を選択して必要なファイルが一式生成されます。
「icon-32×32.png」など先頭に「icon-」と付いたファイルは「favicon-32×32.png」にリネームする必要がありますが、一括で生成してくれるので便利です。
iconsフォルダごと削除した場合
「public/img/icons/」フォルダごと削除してしまえば、「public/favicon.ico」が優先されるのでfaviconが表示されるようになりますが、エラーが出てきたりしますし、アップルタッチアイコンなどの見栄えが最適化されない問題があります。
そこまで手間はかからないので、生成してiconsフォルダ内を入れ替えた方がよさそうです。
