HTMLでfaviconを追加する方法(使用するrelタグについて)

ウェブサイトにfaviconを追加することは、ウェブ開発で最も単純なタスクの1つであるはずですが、予想以上に頻繁に開発者をつまずかせます。どの<link>タグを使用するかについての矛盾するアドバイス、混乱するrel属性値、古いアイコンを頑固にキャッシュするブラウザの間で、faviconを実際に表示させることは推測ゲームのように感じることがあります。

真実は、ほとんどのウェブサイトのfaviconセットアップは、単一のファイルと単一のHTMLタグに削減できるということです。このガイドはノイズをカットし、必要なものを正確に提供します。最小限の実用的なセットアップ、最も有用なrelタグのバリエーション、新しいfaviconを見えなくするキャッシング問題に対処するための明確な指示。

まだfavicon.icoファイルがない場合は、1分以内にAny2ICOで作成してください。PNG、SVG、JPG、WebP、その他の形式を受け付け、どこでも機能するマルチサイズICOファイルを生成します。次に、ここに戻ってHTMLに配線します。

最もシンプルなfaviconセットアップ

タグのバリエーションとエッジケースに飛び込む前に、圧倒的多数のウェブサイトで機能するアプローチがあります。1つのファイルと1行のHTMLが必要です。

ドメインのルートにfavicon.icoを配置します。favicon.icoファイルをアップロードまたは展開して、https://yourdomain.com/favicon.icoでアクセスできるようにします。これは、1990年代後半以来、ブラウザがデフォルトでチェックしているパスです。それを指すHTMLタグがなくても、ほとんどのブラウザはこの場所でfaviconを自動的に見つけて表示します。この慣例はブラウザの動作に焼き付けられており、消えることはありません。

HTMLヘッドに1つのリンクタグを追加します。ルートパス慣例は単独で機能しますが、明示的なタグを追加するとすべての曖昧さが削除され、ドキュメントルートがサーバールートに直接マップされない可能性があるブラウザ、サブドメイン、シングルページアプリケーション全体で一貫した動作が保証されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル</title>
  <link rel="icon" href="/ja/favicon.ico" sizes="any">
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

その単一の<link>タグは、すべての主要なブラウザに十分です:Chrome、Firefox、Safari、Edge、さらにはInternet Explorerのレガシーバージョン。sizes="any"属性は、ICOファイルに複数の解像度が含まれており、16x16タブアイコンであろうと32x32ブックマークアイコンであろうと、現在のコンテキストに最も適切なものを選択する必要があることをブラウザに伝えます。

これは、ほとんどのウェブサイトに推奨するセットアップです。シンプルで、信頼性が高く、普遍的にサポートされています。ここで停止でき、faviconはほぼすべてのシナリオで正しく機能します。

キャッシングと「faviconが表示されない」

新しいfaviconを展開し、ページを更新しましたが、古いアイコンがまだブラウザタブから見つめ返しています。これはコードのバグではありません。ほぼ確実にキャッシングの問題であり、開発者がfaviconセットアップが壊れていると考える最も一般的な理由ですが、実際には完璧に機能しています。

ブラウザはfaviconを積極的にキャッシュします。通常のページアセットとは異なり、faviconは多くの場合、個別にキャッシュされ、はるかに長い期間キャッシュされます。たとえば、Chromeは、通常のページリフレッシュに常に応答するとは限らない専用データベースにfaviconを保存します。FirefoxとSafariにも同様の動作があります。これは、サーバー上のファイルを置き換えた後でも、ブラウザが何時間、場合によっては何日も古いアイコンを表示し続ける可能性があることを意味します。

ハードリフレッシュ: Ctrl+Shift+R(Windows/Linux)またはCmd+Shift+R(macOS)を押して、キャッシュをバイパスし、サーバーからすべてのアセットをリロードします。これはほとんどのページリソースで機能しますが、favicon キャッシュを特に常にクリアするとは限りません。

シークレットウィンドウ:プライベートまたはシークレットブラウジングウィンドウでサイトを開きます。これは完全に空のキャッシュで開始し、サーバーからfaviconを新しくロードします。シークレットモードで正しいfaviconが表示される場合、セットアップは正しく、通常のブラウジングセッションは変更を取得するために時間が必要なだけです。

ブラウザキャッシュを手動でクリア:シークレットが新しいfaviconを確認したが、通常のセッションがまだ古いものを表示している場合は、ブラウザのキャッシュされた画像とファイルをクリアします。Chromeでは、設定、プライバシーとセキュリティ、閲覧データのクリアに移動し、キャッシュされた画像とファイルを選択します。クリア後、サイトをリロードします。

キャッシュバスティングクエリ文字列を追加:開発中の一時的な手段として、クエリ文字列を追加してブラウザにfaviconを新しいリソースとして扱わせることができます:<link rel="icon" href="/ja/favicon.ico?v=2" sizes="any">。faviconを更新するたびにバージョン番号を増やします。アイコンに満足したらクエリ文字列を削除するか、永続的なバージョン管理戦略として保持します。

サイズとファイルの選択:ICO vs PNG

ICOファイル、PNGファイル、またはその両方を使用する必要がありますか?答えは、セットアップでどれだけの複雑さを望むか、サポートする必要があるブラウザによって異なります。

ICOは普遍的な選択です。ICO形式は、1999年にInternet Explorer 5がfaviconを導入して以来、標準のfavicon形式でした。faviconをサポートするすべてのブラウザはICOをサポートします。単一のICOファイルには複数のサイズ(16x16、32x32、48x48など)を含めることができるため、ブラウザは各サイズの個別のファイルを維持することなく、常に適切な解像度を利用できます。シンプルさと最大の互換性のために、ICOは最も安全な選択です。

PNGは最新の代替案です。Chrome、Firefox、Safari、Edgeの現在のすべてのバージョンは、<link rel="icon" type="image/png">タグを介してPNG faviconをサポートしています。PNG faviconは作成がわずかに簡単です(1つのサイズで単一のPNGファイル)が、提供したい各サイズに個別のファイルとタグが必要です。これは、HTMLヘッドに2つまたは3つの追加のリンクタグを意味する場合があります。

SVGは最新のオプションです。SVG faviconはChrome、Firefox、Edgeでサポートされていますが、2025年初頭の時点ではSafariではサポートされていません。SVG faviconは任意のサイズに完璧にスケーリングされ、高DPIディスプレイに魅力的です。ただし、Safariのサポートの欠如は、ICOまたはPNGフォールバックが依然として必要であることを意味します。

ほとんどのウェブサイトでは、実用的なアプローチをお勧めします:主要なfaviconとしてマルチサイズICOファイルを使用し、オプションで拡張としてPNGまたはSVGアイコンを追加します。これにより、ICOファイルを通じて普遍的な互換性が得られ、追加の形式を通じて最新の最適化が得られます。含めるサイズとその理由の詳細については、faviconサイズ説明ガイドをご覧ください。