ファビコンのサイズと形式、SVG だけで足りる？ Google 検索・タブ・ホーム画面で崩れない作り方と、渡すファイルのセット

結論：場所ごとに7つのファイルを渡す

先に結論です。ファビコンは1枚の画像ではなく、表示される場所ごとのファイルのセットとして渡します。

Google はファビコンをホームページの head の link 要素から探しますが、複数あるときにどれを使うかはドキュメントに書かれていません。そこで、対応形式で 48×48px より大きい PNG を1つ入れておきます。

この7つに、HTML の head の記述と manifest（ウェブアプリ マニフェスト）のファイルを添えます。ico・SVG・PNG を「どれか1つ」ではなく「全部」用意するのは、場所ごとに読む形式が違うからです。

表示される場所ごとの要件

Google 検索の結果

検索結果のファビコンについて、Google のドキュメントは次の要件を挙げています。

• 形式は BMP、GIF、ICO、PNG、JPEG、PPM、TIFF のどれか。
• 正方形（縦横比 1:1）で、8×8px 以上。いろいろな場所できれいに見えるよう、48×48px より大きいものを推奨。
• ファビコンはサイト（ホスト名）ごとに1つ。https://example.com/news のようなサブディレクトリだけのファビコンには対応しない（サブドメインは対応）。
• link 要素はホームページの head に書く。Googlebot がホームページをクロールでき、そこからのリダイレクトもたどれること。Googlebot-Image がファビコンのファイルをクロールできること。robots.txt などで塞がないこと。
• ファビコンの URL は頻繁に変えない。
• サイトのブランドを表すものにする。不適切と判断された画像は、既定のアイコンに置き換えられる。

そして、要件をすべて満たしても検索結果に表示されるとは限らない、とも書かれています。

以前は「48px の倍数」という言い方の要件がありましたが、2024年10月の更新で「1:1・8×8px 以上」に変わっています。今も「48 の倍数で作る」と書いている解説記事が多いので、Google の要件として伝えるときは今の言い方にそろえましょう。48 の倍数で作ること自体は問題ありません。

ブラウザのタブ

タブでは 16px 前後の小さな大きさで表示されます。SVG のファビコンは Chrome・Edge・Firefox が以前から対応し、Safari は Safari 26 で対応しました。SVG に対応していない古い環境のために、ico を一緒に置いておきます。

SVG の中に @media (prefers-color-scheme: dark) を書くと、ダークモードで色を変えられます。web.dev の記事では、執筆時点で Firefox と Chromium 系のブラウザで動くとされています。Safari での動きは、今回は確かめていません。

iPhone・iPad のホーム画面

ホーム画面に追加したときのアイコンは apple-touch-icon で指定します。広く使われている大きさは 180×180px です（Apple の旧ドキュメントのコード例の大きさ）。iOS は角を丸めて表示するので、角は丸めず、透過させずに背景まで塗った正方形で書き出すのが一般的です。

Android・インストールできるサイト

Android のホーム画面や、インストールできるサイトのアイコンは manifest の icons で指定します。web.dev は、Chromium 向けに少なくとも 192×192px と 512×512px のアイコンを用意するよう書いています。

端末によって丸や角丸に切り抜かれるので、purpose: "maskable" のアイコンを別に用意します。MDN によると、切り抜かれても必ず見える範囲（セーフゾーン）は、アイコンの短い辺の 80% を直径とする円です。主役の形はこの円の中に収め、背景は透過させずに塗ります。

小さい大きさのためにデザインを分ける

ファビコンで一番崩れやすいのは、ロゴをそのまま縮小したときです。16px のタブでは、細い線、文字、こまかい切り欠きはほとんど見えません。

• 16・32px 用の簡略版を作る：ロゴの中から1つの形や頭文字を選び、線を太く、すき間を広くした版を作ります。180px 以上は元のマークでも構いません。
• ピクセルに合わせる：16px と 32px は、縦横の線がピクセルの境目にそろうように調整してから書き出します。半端な位置の線はにじんで見えます。
• 明るい地と暗い地の両方で確かめる：タブや検索結果は、ライトとダークのどちらの背景にも置かれます。透過の ico・SVG は、どちらの地でも形が残る色にするか、背景の面を付けます。
• 文字だけのファビコンは避ける：社名の文字を並べたファビコンは、16px ではまず読めません。

エンジニアへの渡し方

ファイルと一緒に、次の head の記述と manifest を渡すと、受け取る側が迷いません。ファイルはサイトのルート（一番上の階層）に置く前提です。

<!-- ホームページを含む全ページの head -->
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<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">

{
  "name": "Example Studio",
  "short_name": "Example",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-maskable-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

この記述は、手元の Chromium（Playwright 経由）で読み込ませ、link 要素5つと manifest の icons が上のとおり読めることを確かめています（ブラウザがどのアイコンを選ぶかまでは調べていません）。ico の sizes には、ico の中に入れた大きさを並べます。

あわせて、次のことをメモで伝えます。

• ファイル名と URL は、デザインを直しても変えない（Google は URL の安定を求めている）。差し替えはファイルの中身だけにする。
• ルートの /favicon.ico は消さない。HTML の仕様には、icon の link がないときにブラウザが /favicon.ico を取りにいってよい、という決まりがあります。
• ホームページから別の URL へリダイレクトしている場合（言語ごとのページへ飛ばすなど）は、行き先のページの head にも同じ記述を入れる。
• ファビコンのファイルや置き場所を robots.txt で塞がない。認証のかかった場所に置かない。

公開後の確かめ方

公開したら、次の順に確かめます。

1. ブラウザで /favicon.ico・/favicon-96x96.png・/icon.svg・/apple-touch-icon.png を直接開き、表示されるか。
2. ホームページのソースを開き、head に link 要素があるか（リダイレクト先のページも）。
3. robots.txt にファビコンの置き場所を塞ぐ記述がないか。
4. Search Console の URL 検査でホームページを調べ、インデックス登録をリクエストする。
5. スマホでホーム画面に追加し、ぼやけや切れがないか。

Google のドキュメントによると、クロールには数日から数週間かかることがあります。リクエストのあとすぐに検索結果が変わらなくても、ファイル名を変えて出し直すのはやめましょう。URL が変わると、かえって安定しなくなります。

2026年11月時点の対応状況

ここに書いたことのうち、変わりやすいものをまとめます（2026年11月時点。出典は記事の最後）。

まとめ：確認リスト

• favicon.ico（16・32・48px）、favicon-96x96.png、icon.svg、apple-touch-icon.png（180px）、icon-192/512.png、maskable の 512px をそろえた。
• 16・32px 用の簡略版を作り、ピクセルに合わせた。明るい地と暗い地で確かめた。
• apple-touch-icon と maskable は背景まで塗り、主役はセーフゾーン（直径 80% の円）の中。
• head の記述と manifest を渡し、ファイル名と URL を変えないことを伝えた。
• 公開後に直接開く・ソース・robots.txt・URL 検査・ホーム画面の順に確かめた。

ファビコンは、検索結果でもタブでもホーム画面でも、サイトの名前より先に目に入る小さな看板です。ロゴの制作とあわせて「場所ごとのセット」で用意しておくと、公開後の手戻りが減ります。MODS BASE でも、ブランドの制作からサイトの公開まで、こうした細部も含めてお手伝いしています。

参考

• Define a favicon to show in search results（Google 検索セントラル）
• Latest documentation updates（Google 検索セントラル）
• Safari 26.0 Release Notes（Apple Developer）
• SVG favicons（Can I use）
• Building an adaptive favicon（web.dev）
• Add a web app manifest（web.dev）
• Define your app icons（MDN）
• Configuring Web Applications（Apple Developer Documentation Archive）
• HTML Standard: Link type "icon"（WHATWG）