Favicon HTMLコード例：2026年版開発者向けチートシート

<head>タグに<link rel='icon'>を1行追加して、それで終わった気になっていませんか？私も長年そうしていましたが、ある日iOSで自分のサイトのアイコンがぼやけていたり、Androidのアプリドロワーで完全に消えていたりするのに気づきました。ブラウザのエコシステムは複雑化しており、もはや1行のコードでは通用しません。

GitHubやStripeのヘッダーを見てみてください。単一の.icoファイルをブラウザに投げつけるようなことはしていません。OS、ダークモードの設定、デバイスの解像度に合わせて、特定のタグのスタックを使用しています。

歴史の授業は飛ばしましょう。あなたに必要なのは、2026年に実際に機能するfavicon HTMLコード例です。これらのスニペットをコピーしてプロジェクトに貼り付け、実際の機能開発に進んでください。

ミニマリスト vs リアリストのアプローチ

ルートディレクトリにfavicon.icoを置くだけで、HTMLを一切書かないという誘惑に駆られるかもしれません。確かにブラウザは自動的にそれを探します。しかし、この暗黙の動作に依存するのは最悪のアイデアです。キャッシュの制御ができず、サイトをサブディレクトリに移動すると壊れ、最新の高DPIディスプレイを完全に無視することになります。

代わりに、ターゲットを絞ったアプローチを採用します。最新のブラウザには軽量なSVGを、古いブラウザにはレガシーなICOを、モバイルOSには特定のPNGを提供します。

2026年必須のFavicon HTMLコード例

1. モダンなベースライン（SVG + フォールバック）

これは今日使用すべき最低限の基準です。SVGファビコンは無限にスケーラブルで、容量はほぼゼロです。最初にSVGを提供し、まだ対応していないブラウザのためにICOのフォールバックを用意します。

<!-- モダンなSVGアイコン -->
<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<!-- レガシーICOフォールバック -->
<link rel='icon' href='/favicon.ico' sizes='any'>

ICOファイルのsizes='any'属性に注目してください。これは非常に重要なハックです。これがないと、Chromeは鮮明なSVGよりも低解像度のICOを勝手に選んでしまうことがあります。sizes='any'を強制することで、このバグを修正できます。

2. Apple Touch Icon（iOS & iPadOS）

ユーザーがサイトをホーム画面に保存する際、Appleデバイスは標準のファビコンタグを完全に無視します。特定の高解像度PNGを求めてくるのです。2015年頃に推奨されていたような何十種類ものサイズはもう必要ありません。180x180ピクセルの画像1つですべて対応できます。

<!-- iOS向けApple Touch Icon -->
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

このPNGには必ず単色の背景を設定してください。iOSはホーム画面アイコンの透明度をサポートしておらず、透明な部分は醜い黒い四角で塗りつぶされます。

3. AndroidとPWAのマニフェスト

Androidデバイスとプログレッシブウェブアプリ（PWA）は、アプリアイコンの表示方法をウェブマニフェストファイルから探します。HTMLに複数のPNGをリンクする代わりに、単一のJSONファイルをリンクします。

<!-- Android向けWeb App Manifest -->
<link rel='manifest' href='/site.webmanifest'>

そのsite.webmanifestファイル内で、192x192と512x512のアイコンを定義します。JSONの構造について詳しくは、ウェブサイトアイコン完全ガイドをご覧ください。

4. ダークモード対応（SVGのトリック）

ロゴが黒い場合、ユーザーがブラウザをダークモードに切り替えると見えなくなってしまいます。メインアイコンにSVGを使用しているため、画像ファイル自体にCSSメディアクエリを直接埋め込むことができます。HTMLは変更しませんが、SVGコードは次のようになります。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d='...' />
</svg>

「コピペでOK」な究極のスニペット

もう情報を継ぎ接ぎする必要はありません。これが2026年版の、実戦でテストされた決定版スタックです。わずか4行のコードで、ユースケースの99%をカバーします。

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/site.webmanifest'>

WindowsのタイルアイコンやSafariのピン留めタブ用マスクはどうするのかって？捨ててください。Microsoftは数年前にタイルアイコンを非推奨にし、AppleもついにSafariのタブで標準のSVGを採用しました。コードが少ないほど、解析は速くなります。

よくある落とし穴（コードが機能しない理由）

絶対パス vs 相対パス： サイトがサブフォルダ（/blog/など）にある場合、相対パス（href='favicon.svg'）は機能しません。常にルート相対パス（href='/favicon.svg'）または絶対URLを使用してください。
強力なキャッシュ： ブラウザは他のどのアセットよりも強力にファビコンをキャッシュします。アイコンを変更しても反映されない場合は、href='/favicon.svg?v=2'のようにキャッシュバスティングのクエリ文字列を追加する必要があります。
ファイルの欠落： HTMLをリンクしただけでは半分しか終わっていません。サーバーがこれらのファイルに対して404を返した場合、ブラウザは諦めます。サーバー側の問題をデバッグするには、ファビコンが表示されない理由のガイドをお読みください。

HTMLを書くのは簡単ですが、完璧なサイズに最適化された画像ファイルを生成するのは面倒です。だからこそ、私たちはMzu favicondlを作りました。高解像度のロゴを一度アップロードするだけで、これらのコードスニペットを完璧に機能させるために必要な正確なSVG、ICO、PNG、マニフェストファイルを生成します。