HTML にファビコンを追加する方法
3 つのタグがほとんどのサイトをカバーします。 5 つのタグにより、PWA グレードのセットアップが可能になります。このチュートリアルでは、各属性について説明し、一般的なスタックのコピー＆ペースト スニペットを示し、FAQ に回答し、アイコンがスタックして表示されるキャッシュの問題を修正します。
最低限のタグ
有効な宣言の最小値は、<head> 内の 1 行です。
<link rel="icon" href="/favicon.ico">
ブラウザは、rel="icon" をタブ表示用の URL を取得するためのヒントとして扱います。 / で始まるルート相対パスは、現在のページのパスに関係なく存続します。
このタグを使用しても、多くのクライアントは依然として /favicon.ico を自動的にプローブします。暗黙的なリクエストに備えて、ファイルをサイトのルートに保持します。
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
今どきのおすすめセット
デスクトップ、iOS、およびダークモードのタブ全体で鮮明なレンダリングを行うには、次を使用します。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
順序は完全性よりも重要です。ブラウザはサポートされている最適なタイプを選択します。利用可能な場合は SVG、それ以外の場合は一致する PNG または ICO フレームです。
MIME スニッフィングでファイルに誤ったラベルが付けられないように、SVG 行に type="image/svg+xml" を追加します。
PWA インストール プロンプト
マニフェストをリンクします: <link rel="manifest" href="/site.webmanifest">。
site.webmanifest 内で、ソース、サイズ、タイプ、目的を含むアイコンを宣言します。有効な最小エントリは、192×192 および 512×512 PNG ファイルです。
オプションのテーマの洗練: <meta name="theme-color" content="#0f172a"> は、インストール フロー中に Android ステータス バーをブランドに合わせて配置します。
コピー＆ペーストの例
プレーン HTML サイト — <head> 内に貼り付けます:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Next.js App Router — 同じ行をメタデータ内の app/layout.tsx または手動の <head> ブロックに追加します。ファイルは /public に存在します。
Create React App — アイコンを /public に配置し、public/index.html を編集します。 CRA は、運用ビルドのドメイン ルートで /public を提供します。
それぞれの属性を理解する
rel="icon" は favicon 候補をマークします。 rel="apple-touch-icon" は、iOS 固有のホーム画面アイコンです。 rel="manifest" は、PWA メタデータを含む JSON を指します。
サイズは、PNG がどの解像度を表すかをブラウザーに伝えます。複数のサイズを明示的に宣言する場合、PNG アイコンに必要です。
href は本番環境で到達可能である必要があります。 favicon のサードパーティ CDN へのホットリンクは避けてください。ブランド変更中は完全な制御が必要です。
よくある質問
href で絶対 URL を使用できますか?はい、ただしルート相対 /favicon.ico はステージング ドメインと実稼働ドメイン間でより単純です。
rel="ショートカットアイコン" と rel="アイコン" の両方が必要ですか?いいえ。rel="icon" が標準です。ショートカットは廃止されました。
<head> は一体どこにあるのでしょうか? <html> の直接の子、<body> の前。一部のフレームワークは、レイアウト コンポーネントを介してこれを挿入します。
favicon は CDN 上に存在する必要がありますか?可能ですが、移行時にすべての <link> URL をまとめて更新します。ルート相対パスを使用すると、この問題が回避されます。
トラブルシューティング
アイコンはホームページでは機能しますが、/blog/slug では機能しません。先頭のスラッシュなしで favicon.ico のような相対 href を使用しました。代わりに /favicon.ico を使用してください。
Safari には古いアイコンが表示されます。Web サイトのデータを消去するか、ファイル名を一度変更してください。 Safari は、HTML よりも長く favicon をキャッシュします。
有効な HTML ですが、[ネットワーク] タブの 404: ファイルがサーバー ルートにデプロイされていないか、ケースが間違っています (Linux では Favicon.ico と favicon.ico)。
SVG は無視されました: type="image/svg+xml" が欠落しているか、サーバーが間違った Content-Type を送信します。 nginx または Apache の MIME マッピングを修正します。
フレームワーク固有の配置
Vite / Vue / React SPA: アイコンを /public に配置し、index.html で /favicon.ico を参照します。開発サーバーと運用ビルドはどちらもドメイン ルートで /public を提供します。
Next.js App Router: メタデータ API を介してアイコンを /app に追加するか、静的ファイルを /public に配置します。両方の場所でタグが重複することは避けてください。
Nuxt: /public を使用するか、nuxt.config.ts で app.head.link を構成して、ルート全体でタグを集中管理します。
SvelteKit: static/ フォルダー内の静的アセットは / にマップされます。アプリ全体に対して app.html <head> を 1 回更新します。
Astro: public/ ディレクトリとレイアウト内の共有 Head コンポーネントにより、すべてのページにコピー＆ペーストのずれがなく、同一のアイコン タグが含まれるようになります。
WordPress およびその他の CMS ユーザーは手動タグをまったく必要としない場合があります。コアが Site Icon マークアップを生成する場合は、WordPress チュートリアルを参照してください。
HTML セットアップを検証しています
ローカルホストではなく本番環境でページのソースを表示し、デプロイされた HTML がリポジトリと一致することを確認します。 CI パイプラインは、環境ごとに異なるレイアウトを挿入することがあります。
<link href> で返された各アイコンの URL を取得するには、curl を使用します。 Content-Length が正しい 200 ステータスは、パスが単に宣言されているだけではなく、実際であることを意味します。
W3C マークアップ検証は favicon ではオプションですが、無効な <head> ネスト (<body> 内のタグ) によりブラウザがアイコンを完全に無視する可能性があります。
インストールが重要な場合は、Lighthouse PWA 監査を実行します。タブが正常に見える場合でも、マニフェスト アイコンが欠落しているとフラグが立てられます。
ページをブックマークし、ブラウザを完全に閉じてから再度開き、ブックマーク バーにマークがまだ表示されていることを確認します。これは、永続的な favicon キャッシュの動作をテストします。
セキュリティヘッダーとアイコンパス
Content-Security-Policydefault-src は、同じオリジンからの favicon ロードをブロックしません。クロスオリジン アイコン URL には、明示的な img-src またはdefault-src の許可が必要です。
サブリソースの整合性が favicon に適用されることはほとんどありません。同一オリジン ホスティングは、依然として最もシンプルで安全なデフォルトです。
アイコンが CDN サブドメインに存在する場合は、href で絶対 https:// URL を使用し、CORS が無関係であることを確認します。favicon はフェッチではなくイメージとしてロードされます。
データを回避します: 本番環境 HTML の URI favicon。これらは HTML キャッシュを肥大化し、CDN キャッシュをバイパスし、CSP を複雑にします。
タグの順序と重複
同じ href を持つ重複した rel=icon タグはバイトを無駄にしますが、レンダリングが中断されることはほとんどありません。競合する href が重複するとデバッグが混乱します。古いタグを削除してください。
一部の WordPress テーマは Site Icon タグを印刷しますが、プラグインは別のセットを追加します。プラグインのインストール後に重複を検出するには、ソースの表示を使用します。
head 内の大きなスクリプト ブロックの前にアイコン リンクを配置します。アイコンのダウンロードの優先順位が低い場合でも、早期に検出すると、最初にペイントするのに役立ちます。
HTML5 では、void 要素に閉じスラッシュは必要ありません。 <link ...> と <link ... /> の両方が検証されます。
レガシーケースとエッジケース
IEの条件付きコメントは廃止されました。古いブラウザのアイコン タグをラップしないでください。
head 内のベースタグは相対的な href 解像度を変更します。 / で始まるアイコン パスは影響を受けません。相対 favicon.ico は、base が設定されている場合、ネストされたルートで中断されます。
Shadow DOM および Web コンポーネントはページ favicon をシャドウ ルートに継承しません。ドキュメント レベルのアイコンは引き続きタブに適用されます。
iframe の埋め込みでは、親ではなく、埋め込まれたドキュメント favicon が表示されます。両方を制御する場合、各フレームには独自のタグが必要です。
ローカル file:// テストでは /favicon.ico が解決されない可能性があります。現実的なアイコンの動作を実現するには、ローカルの開発サーバーを使用します。
ブックマークレットとブラウザ拡張機能は、他のユーザー向けにサイト favicon を変更することはできません。ローカル Chrome のみを変更できます。正しいタグをサーバー側に送信します。