Vue.js のファビコン
Vue アプリは、静的アセットを /public (Vite) または /public (Vue CLI) から配布します。そこに favicon.ico を配置し、index.html で参照します。開発サーバーと運用ビルドはサイト ルートでそれを提供します。
Vite: favicon.ico を /public/favicon.ico に置きます。 <head>内のindex.htmlに<link rel="icon" href="/favicon.ico">を追加します。
ハッシュされたビルドの場合、ルートレベルの /favicon.ico はコンテンツ ハッシュを取得しません。これは安定したブラウザー リクエストに最適です。
Vue CLI は同じ public/ 規則を使用します。デフォルトの public/favicon.ico をマルチサイズ ファイルに置き換えます。
モバイル用に PNG および apple-touch-icon リンクを追加します。 vue-router 履歴モードがネストされたルートを破壊しないように、絶対パス (/apple-touch-icon.png) を維持します。
Netlify または Vercel にデプロイする場合は、favicon ファイルが dist 出力に含まれていることを確認してください。ファイルは public/ から自動的にコピーされます。
vite-plugin-pwa の場合、vite.config.ts (192×192 および 512×512 PNG エントリ) のマニフェスト セクションでアイコンを宣言します。
使い方
- 1
アイコンをパブリックにコピー/
favicon.ico、apple-touch-icon.png、オプションの favicon.svg。
- 2
index.htmlを編集
<link rel="icon"> タグと apple-touch-icon タグを追加します。
- 3
構築と展開
本番環境で /favicon.ico が 200 を返すことを確認します。
今すぐ試す
Vue ファビコン アセットを生成する
ファビコンジェネレーターよくある質問
Vue 開発サーバーに Vite ロゴが表示されるのはなぜですか?+
public/favicon.ico を置き換えて、開発サーバーを再起動します。
SVG のファビコンは Vue のどこに行きますか?+
public/favicon.svg と index.html の <link rel="icon" type="image/svg+xml" href="/favicon.svg">。
vue-router は favicon パスに影響しますか?+
相対 href を使用する場合のみ、常にルート相対 / パスを使用してください。