【vue3+TypeScript】favicon設定でハマった #TypeScript

はじめに

Webサイトを開発する中で、faviconの設定をする機会はあると思います。設定する機会は頻繁にはないと思いますし、更新されることもあまりないと思いますが笑
faviconの設定手順はとても簡単なのですが、今回中々faviconが表示されずに時間がかかってしまったのでその時の解決方法を書き残そうと思います。

Faviconを設定

faviconを設定する手順は3ステップだけです。

favicon.icoを/publicの直下に配置
index.htmlにfaviconのパスを記載
開発サーバーの再起動

ディレクトリ

project/
  ├─ .vscode
  ├─ node_modules/
  .
  .
  .
  ├─ public/           // 静的なファイルやリソース（画像、フォント、外部ライブラリなど）
  │   ├─ images/
  │   │      └─ logo.png
  │   └─ favicon.ico
  .
  .
  index.html

index.html

<html lang="en">
<head>
  <!-- favicon.ico を参照するリンク要素を追加 -->
  <link rel="icon" href="/favicon.ico">
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your App Title</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

とても簡単ですよね？
でもこの手順を踏んでもfaviconが全く表示されなかったんです。

考えた原因①hrefのリソースが間違っている?

vue+Typescriptのfavicon設定方法を調べると以下のように<%= BASE_URL %>を使った相対パスを設定する記事が出てきます。やっぱり<%= BASE_URL %>を使わないとダメなのかな？と思ったのですが、 Vite(vite.config.ts)にルートパスを正しく解釈する設定があったのでここは問題ではないようでした。

index.html

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

※ <%= BASE_URL %>はVue CLIが提供する変数で、ビルド時に正しいパスに変換されます。

考えた原因②ファイルのパスが違う？

faviconのパスを絶対パスにしていますが、そこが読み込まれていないのかと思いました。
そこで、hrefのリソースをポート番号を含む絶対パスに変更してみました。
以下のように変更してもfaviconは表示されませんでした
...ということはネットワークエラーかブラウザのキャッシュが原因...?

index.html

<link rel="icon" href="http://localhost:3000/favicon.ico">

解決方法

ブラウザのキャッシュが原因でした。
それまでGoogle Chromeで確認していたのですが、キャッシュを消して確認したらfaviconが表示されました！