Vueのindex.htmlを編集してfaviconを設置しようとして、コメントアウトされてしまった時の対処法
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
タグだけ条件付きコメントになったのか、とても興味深いです。
参考
Author And Source
この問題について(Vueのindex.htmlを編集してfaviconを設置しようとして、コメントアウトされてしまった時の対処法), 我々は、より多くの情報をここで見つけました https://qiita.com/v97ug/items/e7175e47b4febc5f5005著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .