ファビコンの作り方と必要なサイズ一覧｜検索結果に表示させる設定

公開: 2026-08-30

ファビコンfaviconWebサイト制作SEO

ファビコンはブラウザのタブに表示される小さなアイコンですが、現在ではGoogle検索結果のスマートフォン表示にも出るため、クリック率に影響する要素になっています。この記事では、必要なサイズと設定方法を整理します。

必要なサイズ

用途ごとに必要なサイズが異なります。すべてを用意する必要はありませんが、最低限どれが要るかを押さえておきます。

用途	サイズ	形式	優先度
ブラウザのタブ	16×16、32×32	ICO / PNG	必須
Google検索結果	48×48 以上の正方形	PNG など	推奨
iOSのホーム画面	180×180	PNG	推奨
Android・PWA	192×192、512×512	PNG	PWA化する場合
Windowsのタイル等	128×128、256×256	PNG	任意

Google検索結果に出すための条件

Googleはファビコンについて、48pxの倍数の正方形（48×48、96×96、144×144 など）を推奨しています。極端に小さい画像は使われません。

さらに、次の条件を満たす必要があります。

ファビコンとページの両方がクロール可能であること（robots.txtでブロックしない）
正方形であること
サイト全体で同じファビコンを使うこと

16×16 しか用意していないサイトは、検索結果でファビコンが表示されない可能性があります。 大きめのサイズも併せて用意してください。

形式は ICO か PNG か

かつては favicon.ico 一択でしたが、現在は状況が変わっています。

形式	特徴
ICO	複数サイズを1ファイルに格納できる。古い環境も含めて最も互換性が高い
PNG	現代のブラウザはすべて対応。サイズごとにファイルを分ける
SVG	拡大しても劣化しない。ダークモードで色を変えることも可能。ただし非対応環境あり

実務上は「ICOをルートに置きつつ、PNGも指定する」のが最も安全です。 ルートの /favicon.ico は、HTMLに記述がなくてもブラウザが自動的に探しに行くため、置いておくだけで効果があります。

HTMLへの記述

<head> 内に次のように記述します。

<!-- 基本（ルートに置けば省略も可能） -->
<link rel="icon" href="/favicon.ico" sizes="any" />

<!-- PNG版 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />

<!-- iOS ホーム画面用 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

apple-touch-icon には注意点があります。iOSは角丸と余白を自動で適用するため、画像自体は角丸にせず、正方形のまま作ってください。 自分で角丸にすると、二重に処理されて不格好になります。

また、apple-touch-icon は透過に対応していません。 透過部分は黒く塗りつぶされるため、必ず背景色を付けた状態で書き出してください。

作り方

デザインの原則

ファビコンは16×16pxで表示される可能性があることを前提に設計します。この大きさでは、次のものはすべて判別できません。

細い線
複数の色のグラデーション
2文字以上の文字
複雑なロゴの縮小版

実用的な選択肢は次のとおりです。

1文字（サービス名の頭文字）
シンプルな図形（丸、四角と1本の線程度）
絵文字

ロゴをそのまま縮小するのは、ほとんどの場合失敗します。 ロゴから要素を1つだけ抜き出すか、専用に作り直してください。

色のコントラスト

ブラウザのタブは、ライトモードでは白、ダークモードでは濃いグレーが背景になります。どちらでも視認できる配色を選んでください。

白背景に薄いグレーの図形、あるいは黒背景に黒い図形は、片方の環境で消えます。中間的な彩度の色（青、赤、緑など）が無難です。配色を検討する際はカラーコード変換ツールでHEX・RGB・HSLを相互に確認できます。

生成する

ファビコン生成ツールでは、テキストや絵文字を入力するだけで、16・32・48・64・128・256pxの各サイズをPNGで書き出せます。背景色と文字色を指定でき、実際の表示サイズでのプレビューも確認できます。

デザインツールで1枚ずつ書き出す作業が不要になるため、まず動くものを置いてから、必要なら後で作り込むという進め方ができます。

既存の画像をファビコンにする場合は、画像リサイズツールで正方形にトリミング・縮小してから使ってください。

反映されないときの原因

ファビコンはブラウザのキャッシュが特に強く効く要素です。設定したのに変わらない場合、次の順で確認してください。

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

まず、ファビコンのURLを直接開いてみてください。

https://example.com/favicon.ico

ここで新しい画像が表示されるなら、サーバー側は正しく更新されており、原因はブラウザのキャッシュです。 スーパーリロード（Ctrl+Shift+R / Cmd+Shift+R）を試し、それでも変わらなければシークレットウィンドウで確認します。

2. ファイル名を変える

最も確実な方法です。

<link rel="icon" href="/favicon-v2.png" />

URLが変われば別のリソースとして扱われるため、キャッシュを確実に回避できます。更新のたびにファイル名を変える運用にしておくと、この問題自体が起きなくなります。

3. 検索結果への反映は時間がかかる

Google検索結果のファビコンは、再クロールされるまで更新されません。 サイトの更新頻度によっては数日から数週間かかります。ブラウザのタブでは新しいファビコンが出ているのに検索結果が古い、という状態は正常です。

この場合、Search Consoleでインデックス登録をリクエストすると、再クロールが早まる可能性があります。

4. robots.txt でブロックしていないか

ファビコンの画像がクロールできない場所にあると、検索結果には表示されません。画像ディレクトリ全体を Disallow している場合は要注意です。

まとめ

最低限 16×16 と 32×32、検索結果を狙うなら 48の倍数も用意する
ルートに /favicon.ico を置いておくと、記述がなくても機能する
apple-touch-icon は 180×180・角丸なし・透過なし
16pxで判別できるデザインにする。ロゴの縮小は失敗しやすい
反映されないときはファイル名を変えるのが最も確実
検索結果への反映には時間がかかる

小さな要素ですが、タブが多数開かれた状態での識別性と、検索結果での視認性に効きます。未設定なら優先度は高くありません。まず何かを置くことから始めてください。