vue.js webpackプロジェクトでfavicon.icoを適切に設定する方法は？

Question 1

をvue webpack使用してプロジェクトを作成しましたvue-cli。

vue init webpack myproject

そして、プロジェクトをdevモードで実行しました：

npm run dev

私はこのエラーを受け取りました：

リソースの読み込みに失敗しました：サーバーはステータス404（見つかりません）http：// localhost：8080 / favicon.icoで応答しました

では、webpack内で、favicon.ico正しくインポートする方法は？

Question 2

webpackテンプレートのプロジェクト構造を確認してください：https ://vuejs-templates.github.io/webpack/structure.html

静的フォルダが一緒に、そこにあることに注意してくださいnode_modules、srcなど

のstaticような画像をフォルダに入れるとfavicon.png、http：// localhost：8080 / static / favicon.pngで利用できるようになります。

静的アセットのドキュメントは次のとおりです：https : //vuejs-templates.github.io/webpack/static.html

ファビコンの問題については、favicon.icoまたはfavicon.pngをstaticフォルダに入れて<head>、index.htmlのを次のように参照できます。

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

を定義しない場合favicon.ico、index.htmlは、ブラウザがWebサイトのルート（デフォルトの動作）からファビコンを要求します。上記のようにファビコンを指定すると、その404は表示されなくなります。ファビコンはブラウザのタブにも表示されます。

補足として、ICOファイルではなくPNGを使用する理由は次のとおりです。

favicon.png vs favicon.ico-ICOの代わりにPNGを使用する必要があるのはなぜですか？

Question 3

Laravel 5.xの小さな更新。favicon.icoまたはまたはfavicon.pngを/publicフォルダーに入れて、次のindex.htmlように参照します。

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

それが役に立てば幸い！

Question 4

何らかの理由で、デフォルトのfavicon.icoファイルをに変換しfavicon.pngて名前を変更するまでfavicon-xyz.png（上記のファイルを/publicフォルダに入れました）、index.html次のようにファイルを編集する前に、上記の解決策が機能しませんでした。

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

誰かに役立つかもしれません。