HTMLでファビコンを追加する方法（2026年完全ガイド）

プレーンなHTMLウェブサイトにファビコンを追加するにはコード1行で済みますが、すべてのブラウザ・スマートフォン・PWAインストールで正しいアイコンが表示されるように正しく行うには、あと数行必要です。これは2026年版の完全ガイドです。正確なタグ、ファイルの配置場所、あらゆるフォーマットを網羅したコピペ用ブロックを紹介します。

最小構成：HTML 1行

最もシンプルな形では、ファビコンは <head> 内で参照される1つのファイルにすぎません。

<link rel="icon" href="/favicon.ico">

favicon.ico をウェブサイトのルート（index.html と同じフォルダ）に置き、そのタグを <head> 内に追加すれば、基本は完了です。

完全なHTMLファビコンセットアップ

上の1行でも動作しますが、モダンブラウザ、iOS、Androidはそれぞれ異なるフォーマットとサイズを好みます。推奨される完全なブロックはこちらです。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

各行の役割は次のとおりです。

favicon.ico — 古いブラウザを含む、すべてのブラウザで使える万能フォールバック
favicon-32x32.png / favicon-16x16.png — モダンブラウザのタブ用の鮮明なPNGアイコン
favicon.svg — モダンブラウザ用のベクターアイコン。どんなサイズでもシャープ
apple-touch-icon.png — iOSがホーム画面アプリに使う180×180アイコン
site.webmanifest — Android/Chrome向けにアイコンを紐付けるPWAマニフェスト

これらのファイルを手作業で作成したくないですか？Favicon.one に画像を1枚アップロードすれば、上記の全ファイルとコピペ済みHTML入りのZIPをダウンロードできます。

ファビコンファイルの配置場所

サイトルート（index.html と同じディレクトリ）に置いてください。上のhrefの先頭の / は「サイトルートから」を意味するため、どのページにいてもブラウザは必ずファイルを見つけられます。

your-website/
├── index.html
├── about.html
├── favicon.ico            ← here
├── favicon-32x32.png
├── favicon-16x16.png
├── favicon.svg
├── apple-touch-icon.png
└── site.webmanifest

linkタグの解説

<link rel="icon"> 要素はブラウザにファビコンの場所を伝えます。主な属性は次のとおりです。

rel="icon" — 「これはファビコンである」ことを示します
type — MIMEタイプ（image/x-icon、image/png、image/svg+xml）
sizes — ピクセル寸法。ブラウザが最適なものを選べるようにします
href — ファイルのパス

異なる sizes の複数の <link rel="icon"> タグを宣言すると、ブラウザは現在のディスプレイに合ったものを選択します（例：通常画面では16×16、 Retina画面では32×32）。

Webマニフェスト

site.webmanifest ファイルは、Android Chromeとインストール可能なPWA向けにアイコンを紐付けます。最小限の例はこちらです。

{
  "name": "My Website",
  "short_name": "MySite",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

よくある間違い

1. 正方形でない画像を使う

ファビコンは正方形（1:1）でなければなりません。長方形の画像は引き伸ばされたり空白になったりします。

2. type属性を忘れる

type がないと、一部のブラウザは誤って判断し、image/png として配信された .ico の描画を拒否します。

3. ファイルをサブフォルダに置いたままルートパスを使う

ファイルが /assets/ にあるなら、hrefは /assets/favicon.ico でなければならず、/favicon.ico ではありません。

4. ブラウザのキャッシュ

ブラウザはファビコンを強力にキャッシュします。新しいアイコンが表示されない場合は、シークレットウィンドウでテストしてください。詳しくは「ファビコンが表示されない」トラブルシューティングガイドをご覧ください。

ファビコンサイズ早見表

ファイル	サイズ	用途
`favicon.ico`	16/32/48	万能フォールバック
`favicon-32x32.png`	32×32	モダンブラウザのタブ
`favicon-16x16.png`	16×16	レガシーなタブ
`favicon.svg`	ベクター	モダンブラウザ、ダークモード
`apple-touch-icon.png`	180×180	iOSホーム画面

詳細はファビコンサイズガイドをご覧ください。

準備はできましたか？1枚の画像から完全なファビコンパッケージを生成し、上のHTMLを貼り付ければ、1分以内に完了します。