Vue アプリケーションをデプロイした後、ブラウザのタブにデフォルトの緑色の「V」ロゴが表示されたままになっていることに気づいたなら、それはブランディングにおける重要なステップを逃しています。これは、仕立ての良いスーツを着ているのに靴下が左右バラバラなのと同じようなものです。2026 年、ユーザーはタブが読み込みを開始した瞬間から洗練された体験を期待しており、汎用的なアイコンは「未完成のプロジェクト」であることを露呈してしまいます。

多くの開発者が Vue favicon setup で苦労するのは、アイコンを標準の Vue コンポーネントやバンドルされたアセットと同じように扱おうとするからです。それは間違いです。Favicon は標準のコンポーネントライフサイクルの外側に存在し、Safari、Chrome、モバイルのホーム画面で正しく動作させるためには特定の戦略が必要です。今日は Vite ベースのモダンなワークフローを使用して、これを解決しましょう。

「Public」フォルダ戦略：なぜこれが正解なのか

Vite を使用したモダンな Vue 3 プロジェクトでは、画像を保存する場所として主に src/assets と public の 2 つがあります。Favicon に関しては、public ディレクトリが唯一の正しい選択です。なぜなら、Vite は public フォルダ内のファイルを処理せず、ビルド時にそのまま dist フォルダのルートにコピーするからです。

ブラウザが /favicon.ico を探すとき、ルートディレクトリにあることを期待します。もしアイコンを src/assets に置くと、Vite はファイル名をハッシュ化（例：favicon.a1b2c3.ico）してしまい、すべてのページで手動でインポートしない限り、ブラウザは見つけることができません。パスを予測可能にするために、public フォルダを使用しましょう。

ステップ 1：アセットの準備

.ico ファイルだけで満足しないでください。2026 年の標準は、モダンブラウザ用の SVG とレガシー用の ICO フォールバックの組み合わせです。SVG は鮮明なスケーリングを可能にし、ダークモードもサポートします。SVG favicon ガイド を参考に、5K ディスプレイでも美しく表示されるアイコンを用意しましょう。

public フォルダに以下の 3 つのファイルを準備してください：

ステップ 2：index.html の更新

Vue はシングルページアプリケーション (SPA) なので、修正が必要なのは index.html だけです。プロジェクトのルートにあるこのファイルを開き、<head> セクションを探します。デフォルトの記述を以下のシーケンスに置き換えてください：

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

この順番が重要です。モダンブラウザは type='image/svg+xml' 属性を見て SVG を優先し、古いブラウザはそれを無視して ICO ファイルを取得します。変更が反映されない場合は、ファビコンのキャッシュをクリア する必要があります。

ステップ 3：動的な通知アイコンの実装

Vue の最大の魅力の一つはリアクティビティです。アプリの状態に基づいてファビコンを動的に変更することができます。例えば、GitHub は未読の通知があるときにファビコンに小さな青いドットを追加します。Vue でもシンプルなユーティリティ関数でこれを実現できます。

export function setDynamicFavicon(iconPath) {
  const link = document.querySelector("link[rel*='icon']");
  if (link) {
    link.href = iconPath;
  }
}

この関数を App.vue の watch 内で呼び出します。未読メッセージがある場合に /favicon.svg を /favicon-notification.svg に切り替えるだけで、Web アプリがネイティブのデスクトップアプリのような高級感を持ち始めます。

よくある落とし穴

最も多い間違いは、./favicon.ico のような相対パスを使用することです。Vue Router で /user/settings/profile のような深い階層のパスを使用している場合、相対パスだとブラウザは /user/settings/favicon.ico を探しに行ってしまい、エラーになります。必ずスラッシュから始まる絶対パス (/favicon.ico) を使用してください。

また、Android の「ホーム画面に追加」を考慮するなら manifest.json も忘れてはいけません。これがないと、Android ではサイトの汎用的なスクリーンショットがアイコンとして表示されてしまい、非常に素人っぽく見えてしまいます。

結局のところ、ファビコンはあなたのブランドの最小の大使です。Vue で正しく設定するのに 5 分もかかりませんが、ユーザーが混雑したブラウザタブを見たときにその効果は発揮されます。シンプルに保ち、public フォルダを活用し、2026 年のベストプラクティスである SVG を常に提供しましょう。