2026/04/19·39 分 (更新: 2026/05/14)

ファビコン完全ガイド 2026 — サイズ・形式・HTML 設置まで全部入り

ファビコンのサイズは結局どれが必要? ICO と SVG の使い分けは? 2026 年時点で本当に必要なアイコンセットと、1 枚の画像からブラウザ内で一式生成できる方法を解説します。

ファビコン (favicon) は地味なアセットですが、種類・サイズ・形式の選択肢が多く、毎回「結局どれが必要なんだっけ?」となる人も多いはずです。本記事では 2026 年時点で本当に必要なアイコン一式と、HTML への組み込み、Zerosend のファビコン生成ツールの活用法を整理します。

ファビコンとは何か (1 分で復習)

`<link>` タグで参照される機能の総称

ファビコンはブラウザのタブ表示に使われるアイコン、だけではなくタブ / ブックマーク / PWA ホーム画面 / 検索結果など複数の文脈で使われる画像の総称です。<head> 内の <link rel="icon"> / <link rel="apple-touch-icon"> / <link rel="manifest"> で参照されるアセット群です。

表示場所によって最適なサイズ・形式が違う

タブ用には 16×16 / 32×32 の小さいアイコンが必要ですが、iPhone のホーム画面には 180×180 の PNG、Android の PWA には 192×192 と 512×512 の PNG が必要です。場所ごとに要件が違います。

2026 年時点で本当に必要なアイコン

必須 3 つ

favicon.ico — デスクトップブラウザのタブ / ブックマーク (16/32/48px のマルチサイズ)
apple-touch-icon.png (180×180) — iOS のホーム画面
icon-192.png / icon-512.png — Android / PWA 対応

推奨: `favicon.svg`

モダンブラウザ (Chrome / Firefox / Safari の最新版) は SVG ファビコンに対応済みです。ベクターなのでどのサイズでもシャープに表示されます。ダークモード切替にも対応できるので、2026 年は SVG を第一選択にして ICO をフォールバックにする運用がおすすめです。

不要になったもの

browserconfig.xml (Windows 8/10 タイル用) — IE 系と一緒に役目を終えています
*.png の 70×70 / 150×150 / 310×310 (IE/Edge Legacy 向け)

SVG ファビコンのメリットと対応ブラウザ

ダークモード自動切替

SVG 内に @media (prefers-color-scheme: dark) のスタイルを書くだけで、OS のダークモードに合わせて色を切り替えられます。Chrome / Firefox の最新版は対応済みです。

<svg>
  <style>
    @media (prefers-color-scheme: dark) {
      .logo { fill: #fff; }
    }
  </style>
  <rect class="logo" />
</svg>

アニメーション (限定的)

SMIL / CSS アニメーションは技術的には可能ですが、ブラウザがアイドル時には動かさない等の最適化を入れるケースが多く、過信は禁物です。原則は静止画として設計しましょう。

非対応ブラウザへのフォールバック

<link rel="icon" type="image/svg+xml"> と <link rel="alternate icon" type="image/x-icon"> を並べておけば、対応ブラウザは SVG、非対応は ICO を使います。

site.webmanifest と PWA

必須プロパティ

PWA 対応を見据えると site.webmanifest を用意します。最低限の中身はこうなります。

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

iOS の癖

iOS は apple-touch-icon.png を優先するため、webmanifest 側に icon を書いても iOS ホーム画面には適用されません。Android と iOS で別々のファイルを用意する前提で運用しましょう。

HTML に設置する正しい書き方

<head> に並べる順序のお手本:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a0a0a">

`sizes="any"` の罠

sizes="any" を SVG に付けると、ブラウザが SVG を ICO より優先するようになります。基本的に意図通りですが、古い iOS で誤解される例があったため、2026 年時点では書かないのが無難です。

ファビコン生成アプローチの 3 類型と向き不向き

アップロード型のオンライン SaaS

高機能で一発生成。ただしロゴ画像を一度サーバーに送ります。公開済みのロゴなら気にならないケースが多いです。

デスクトップ / ローカルアプリ

ImageMagick / Sketch / Figma 等。CLI や GUI で手元だけで生成できますが、セットアップが必要です。

ブラウザ内完結型

Zerosend のファビコン生成ツールがこの型。インストール不要 + 手元完結で、NDA 下の未公開ロゴでも気兼ねなく使えます。

NDA 下・未公開ブランド・社内案件での選び方

受託案件や新規ブランドの立ち上げでは、ロゴ画像の取り扱いに神経を使います。この場合はブラウザ内完結型を選ぶか、デスクトップアプリで手元処理するのが安心です。

Zerosend でブラウザ内完結で作る手順

1 枚の PNG または SVG から、必要なファイル一式 (ICO / PNG 複数サイズ / apple-touch-icon / site.webmanifest / HTML スニペット) を ZIP で一気に生成できます。

/tools/favicon-generator にアクセス
ロゴ画像をドラッグ&ドロップ (推奨: 512×512 以上の正方形)
アプリ名 / theme_color / background_color を入力
「ファビコン一式を生成する」
生成されたプレビューを確認し、ZIP をダウンロード
ZIP に同梱の snippet.html の内容を <head> に貼り付け、各ファイルをサイトのルート (/) に配置

ブラウザ内完結なので、ロゴ画像が外部に送られることはありません。

よくある失敗

Retina で滲む

タブで綺麗に見せるには 32×32 や 48×48 も用意する必要があります。Zerosend は 16/32/48 のマルチサイズ ICO を自動で作ります。

iOS ホーム画面で余白が出る

apple-touch-icon.png は背景透過に対応していません。透過 PNG を渡すと iOS が黒背景で埋めてしまうので、背景色を明示的に塗った PNG を用意しましょう。

`favicon.ico` だけしか指定していない

モダンブラウザで SVG を使うメリットを取りこぼします。少なくとも favicon.svg は併用するのが 2026 年の標準です。

ブラウザキャッシュが残って古いアイコンが表示される

ブラウザはファビコンを積極的にキャッシュします。差し替え後に古いアイコンのままになる時は次を試します。

強制リロード (Ctrl+Shift+R / Cmd+Shift+R) で再取得
プライベート / シークレットウィンドウ で確認 (キャッシュを噛まない)
本番では <link rel="icon" href="/favicon.ico?v=2"> のようにバージョンクエリを付けて即時反映を促す
Chrome は chrome://favicon/https://your-site.com/ でブラウザが認識しているファビコンを直接確認できる

Google 検索結果にファビコンが出ない

Google モバイル SERP に表示されるには 48×48 以上のアイコンがクロール可能であること、かつ「サイト全体を代表するアイコン」というガイドラインに沿っていることが求められます。Zerosend のファビコン生成ツールは 16/32/48 のマルチサイズ ICO を自動で書き出すため、この要件は満たせます。サブドメインごとに別のファビコンを設定することも可能です。

まとめ

2026 年のファビコン運用は「SVG を第一選択 + ICO / apple-touch-icon / PWA アイコン + webmanifest」の組み合わせで完成します。1 枚の画像から一式を生成するなら、ブラウザ内で完結する Zerosend のファビコン生成ツールが手早くておすすめです。

関連: ファビコン生成ツールの舞台裏

著者

Zerosend Editorial

Zerosend の制作チームによる記事です。ファイルがデバイスの外に出ないことを設計の中心に置き、WASM・Web Worker をベースとするブラウザ完結ツールを開発しています。

Zerosend Editorial について →

2026/05/28·25 分