More than 3 years have passed since last update.

Vueのindex.htmlを編集してfaviconを設置しようとして、コメントアウトされてしまった時の対処法

Posted at 2020-04-13

Vueでファビコンを設置しようとして、なんか上手くファビコンが表示されないなーと思ったら、衝撃の事実が発覚しました。。
その時の対処法の記事です。

どういう状況か？

Vue + Typescriptのプロジェクトで、ファビコンを設置したい
↓
public/index.htmlを編集する(headタグ内に以下を追加する)

<link rel="icon" type="image/x-icon" href="<%= BASE_URL %>favicon.ico">

↓
ビルド
↓
ファビコンが表示されない
↓
デベロッパーツールで見てみると、以下のようになっている・・・！？

<!--[if IE]><link rel="icon" href="favicon.png"><![endif]-->

vue.config.jsに以下を設定すればOK！

module.exports = {
  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
    }
  }
};

なお、ファビコン自体は、public/favicon.icoに配置しました。

なぜファビコンのlinkタグだけ条件付きコメントになったのか、とても興味深いです。