Vue CLI 3でfaviconが変わらないときの対処法

2020年6月28日

今回はVue CLI 3でfaviconが変わらないときの対処法についてご紹介いたします。



Vue CLI 3でfaviconが変わらないときの対処法

Vue CLI 3でfaviconの変え方を調べてみると、「public」ディレクトリの「favicon.ico」を差し替えれば良いだけと出てきます。

しかしこれだけではファビコンを差し替えることができません。
何回もブラウザのキャッシュを消すなどして試してみましたがファビコンを変更することができず、2時間くらい潰しました。

「public」ディレクトリの「img」の下に「icons」というフォルダがあり、その下にたくさんのVueのアイコンが置かれていることが分かると思います。
結論を言うと、この「public/img/icons/」の下のアイコンファイルを全て消すことで、「public」ディレクトリの「favicon.ico」が反映されると思います。

なぜこれでうまくいくのかというと、ブラウザの種類やウィンドウサイズによって最適なファビコンを「public/img/icons/」の下のアイコンファイルから選んで表示させているようです。
ファイルの名前からそれぞれ対応するブラウザの種類やウィンドウサイズが推測できるかと思います。

以上の理由から「public」ディレクトリ直下のfavicon.icoを差し替えたとしても「public/img/icons/」の下のアイコンファイルから表示させているので、「public」ディレクトリ直下のfavicon.icoが反映されないわけですね。

「public/img/icons/」の下のアイコンファイルにアイコンがないと、自動的にpublicディレクトリ直下のfavicon.icoを見ることになります。

半ば無理やりに近いですが、これでpublicディレクトリ直下のfavicon.icoを反映されることができます。

もちろん、「public/img/icons/」の下のアイコンファイルをすべて変えたいファビコンのファイルに差し替えればやりたいことが達成できます。

しかし何しろ数が多いので、「public/img/icons/」の下のアイコンファイルをすべて消す方が差し替え工数などが抑えられるため、楽にファビコンを差し替えることが可能です。

2020年6月28日追記

「public/img/icons/」の下のアイコンファイルをすべて消すことで、public直下のfavicon.icoが反映されることになりますが、コンソールにエラーが出ます。
コンソールのエラーが気持ち悪い方は、下記リンク先でファビコンを一気に生成して「public/img/icons/」の下に入れた方が良いかもしれません。
https://ao-system.net/favicongenerator/

終わりに

今回はVue CLI 3でfaviconが変わらないときの対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Vue CLI

Posted by ちこ