Vue CLI 3でfaviconが変わらないときの対処法
今回はVue CLI 3でfaviconが変わらないときの対処法についてご紹介いたします。
Vue CLI 3でfaviconが変わらないときの対処法
Vue CLI 3でfaviconの変え方を調べてみると、「public」ディレクトリの「favicon.ico」を差し替えれば良いだけと出てきます。
しかしこれだけではファビコンを差し替えることができません。
何回もブラウザのキャッシュを消すなどして試してみましたがファビコンを変更することができず、２時間くらい潰しました。
「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が変わらないときの対処法についてご紹介いたしました。