Vue でファビコンが表示されない？その解決法
Vue の単一ファイルコンポーネントは head に link タグをレンダリングできないため、ファビコンは index.html で宣言します。Vite ではプロジェクトルート、Vue CLI では public/ の中です。タブが空白なら、そのファイルのタグが誤っています。
なぜコンポーネントではないのか
ブラウザは head を解析している間に、Vue が何かをマウントする前にファビコンを要求します。アプリ内部から追加したものは遅すぎて間に合わないため、アイコンは静的な HTML に属します。
その HTML の場所はスキャフォールドによって異なります。create-vue（Vite）は index.html をプロジェクトルートに置き、public/ を手を加えずに出力へコピーします。Vue CLI はテンプレートを public/index.html に置き、EJS を通して処理するため、URL にはプレースホルダーが必要です。
不具合を見つける
- 1
/favicon.ico を直接開く
404 なら、そのパスでファイルが配信されていません。読み込めるならファイルは問題なく、link タグかキャッシュが原因です。
- 2
どのスキャフォールドか確認する
ルートに index.html があれば Vite です。/favicon.ico を使います。public/index.html のテンプレートがあれば Vue CLI です。<%= BASE_URL %> プレフィックスを使います。
- 3
アイコンを src からインポートしない
インポートされた画像はバンドルされてハッシュ化されるため、/favicon.ico が解決されなくなります。アイコンは名前を保ったまま public/ に置いてください。
Vue でファビコンが表示されない：よくある質問
Vue のファビコンが表示されないのはなぜですか？
index.html の link タグがファイルの無い場所を指しているか、（Vue CLI では）BASE_URL プレースホルダーが欠けていてドメインルート以外でパスが壊れているかです。/favicon.ico を直接開いて、そもそもファイルが配信されているか確認してください。
Vue コンポーネントからファビコンを設定できますか？
useHead で実行時に差し替えることはでき、ブラウザは読み込み後にその変更に追随します。ただし最初のリクエストは index.html が宣言したものを使うので、そこに本物のデフォルトを残しておいてください。
インポートしたらファビコンが消えたのはなぜですか？
src から画像をインポートするとバンドラーに渡され、ハッシュ付きのファイル名で出力されます。すると /favicon.ico では何も到達できなくなります。ファイルは代わりに public/ に置いてください。