実行できるHTMLドキュメント: ファビコン

Q: HTML でファビコンを追加するにはどうすればいいですか？

アイコンのファイルをサイトに置き、 の中に (または PNG や SVG のパス) を追加します。するとブラウザが、タブ、ブックマーク、履歴の一覧にアイコンを表示します。

Q: ファビコンのサイズはどれくらいにすればいいですか？

タブ用に 32×32 の favicon.ico (または PNG)、どのサイズにも拡大縮小できる SVG、iPhone のホーム画面用に 180×180 の PNG の apple-touch-icon を用意します。マニフェストのある Web アプリは、192×192 と 512×512 の PNG も指定します。

Q: ファビコンが表示されないのはなぜですか？

よくある原因は、href のパスの間違い、 が の外にあること、ブラウザが古いアイコンのキャッシュを表示し続けていることです。アイコンの URL を直接開いてパスを確認し、キャッシュを消して再読み込みするか、URL に ?v=2 のようなバージョンを付けましょう。

Q: SVG や PNG をファビコンに使えますか？

使えます。 や と書きます。SVG は Chrome、Edge、Firefox で動きます。対応していないブラウザのために ICO や PNG も残しておきましょう。

Q: rel="shortcut icon" は必要ですか？

不要です。標準の値は rel="icon" です。shortcut という語は古い Internet Explorer の名残で、現在のブラウザでは何もしません。

Q: 絵文字をファビコンにできますか？

できます。SVG で包みます。絵文字を入れた 要素を含む SVG の data URI です。試作品には便利ですが、絵文字の見た目は OS ごとに違います。

ファビコンを追加する方法

アイコンをサイトに保存し、<head> の中の <link rel="icon"> タグからそれを指定します。

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

基本的なサイトなら、答えはこれで全部です。href には .ico、.png、.svg のファイルを指定できます。下の例では、SVG を data URI として href に直接書いているので、別のファイルは不要です。別のページの中にあるプレビューはブラウザのタブを変えられないので、スクリプトが同じアイコンをタブの模型と 3 つのサイズで描いています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

16 ピクセルでは、太い文字 1 つか単純な形しか入らず、細かい部分は消えてしまいます。アイコンはいちばん小さいサイズから先にデザインしましょう。fill='%232563eb' を別の色に変えると (%23 は URL エンコードした # です)、すべてのコピーが更新されます。

用意するファイル

ブラウザ、スマートフォン、アプリのランチャーは、それぞれ別のアイコンを探します。小さなセットですべてをカバーできます。

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

ファイル	サイズ	用途
`favicon.ico`	32×32	ブラウザのタブ、`/favicon.ico` しか探さないツール
`icon.svg`	任意 (ベクター)	Chrome、Edge、Firefox で、どの画面密度でもくっきりしたタブ
`apple-touch-icon.png`	180×180	サイトを iPhone や iPad のホーム画面に追加したときのアイコン
マニフェストのアイコン	192×192 と 512×512 の PNG	Android のホーム画面とインストールされた Web アプリ

ほとんどのブラウザは、ページにアイコンのリンクがないと、自分でサイトのルートの /favicon.ico を取りに行きます。そのため、そこに favicon.ico を置いておくと初期値として役に立ちます。sizes 属性は各ファイルのサイズをブラウザに伝え、いちばん合うものを選べるようにします。rel="icon" を使いましょう。古い rel="shortcut icon" が動くのは、ブラウザが余分な語を無視しているからにすぎません。

絵文字のファビコン

試作品や個人のページなら、絵文字で手軽にファビコンを作れます。SVG の <text> 要素の中に入れます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA は URL エンコードしたクッキーの絵文字です。絵文字は OS の絵文字フォントで描かれるので、Windows、macOS、Android で見た目が違います。本格的なプロダクトには、デザインしたアイコンのほうが適しています。

ダークモードに合わせて変わるアイコン

SVG のファビコンは、prefers-color-scheme のメディアクエリを含む独自の CSS を持てるので、ブラウザがダークテーマのときに暗いアイコンを明るくできます。

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

JavaScript でファビコンを変更する

通知のドットや状態を表す色のために、ファビコンを変えるサイトもあります。新しいアイコンを <canvas> に描き、link の href を canvas の画像にします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Chrome や Firefox の実際のページでは、href を設定するたびにタブのアイコンが変わります。ここでプレビューの画像が変わるのと同じタイミングです。

よくある間違い

パスの間違い。 href="favicon.ico" は現在のページからの相対パスなので、/blog/post では壊れます。ルートからのパスを使いましょう: href="/favicon.ico"。
更新がすぐ反映されると思う。 ブラウザはファビコンを強くキャッシュします。アイコンを差し替えたら、キャッシュを消して再読み込みするか、URL を変えましょう (/favicon.ico?v=2)。
細かいロゴを 16 ピクセルに縮める。 単純にしましょう。コントラストの強い文字 1 つか形 1 つです。
SVG しか用意しない。 SVG のファビコンに対応していないブラウザのために ICO や PNG も残し、iOS 用に apple-touch-icon も追加しましょう。
link を <body> に書く。 title タグなどのメタデータと一緒に <head> に置きましょう。

よくある質問

HTML でファビコンを追加するにはどうすればいいですか？

アイコンのファイルをサイトに置き、<head> の中に <link rel="icon" href="/favicon.ico"> (または PNG や SVG のパス) を追加します。するとブラウザが、タブ、ブックマーク、履歴の一覧にアイコンを表示します。

ファビコンのサイズはどれくらいにすればいいですか？

タブ用に 32×32 の favicon.ico (または PNG)、どのサイズにも拡大縮小できる SVG、iPhone のホーム画面用に 180×180 の PNG の apple-touch-icon を用意します。マニフェストのある Web アプリは、192×192 と 512×512 の PNG も指定します。

ファビコンが表示されないのはなぜですか？

よくある原因は、href のパスの間違い、<link> が <head> の外にあること、ブラウザが古いアイコンのキャッシュを表示し続けていることです。アイコンの URL を直接開いてパスを確認し、キャッシュを消して再読み込みするか、URL に ?v=2 のようなバージョンを付けましょう。

SVG や PNG をファビコンに使えますか？

使えます。<link rel="icon" href="/icon.svg" type="image/svg+xml"> や <link rel="icon" href="/icon.png" type="image/png"> と書きます。SVG は Chrome、Edge、Firefox で動きます。対応していないブラウザのために ICO や PNG も残しておきましょう。

rel="shortcut icon" は必要ですか？

不要です。標準の値は rel="icon" です。shortcut という語は古い Internet Explorer の名残で、現在のブラウザでは何もしません。

絵文字をファビコンにできますか？

できます。SVG で包みます。絵文字を入れた <text> 要素を含む SVG の data URI です。試作品には便利ですが、絵文字の見た目は OS ごとに違います。