ファビコンの作り方とサイズ｜ロゴをサイトのアイコンにする
ファビコンは、ブラウザのタブ、ブックマーク、検索結果のサイト名の横などに表示される、サイトの小さなアイコンです。タブをたくさん開いている人が自社のサイトを見つける目印になり、検索結果でも会社名の横に出ます。設定していないと、ブラウザの既定のアイコンや空白になり、作りかけのサイトのように見えることがあります。
この記事では、ロゴからファビコンを作るときのサイズと形式、用意するファイルの一覧（apple-touch-icon など）、小さくても読める形にする工夫、表示されないときの確かめ方をまとめます。Google 検索の決まりは、2026年10月時点で Google 検索セントラルが公開しているガイドラインによります。
ファビコンが表示される場所
ファビコンは、1つの画像がさまざまな大きさで使われます。
| 表示される場所 | 表示の大きさの目安 | 使われるファイル |
|---|---|---|
| ブラウザのタブ・ブックマーク | 16〜32px 前後 | favicon（ICO・PNG・SVG） |
| Google の検索結果 | 小さな丸や四角の枠 | ホームページで指定した favicon |
| iPhone・iPad のホーム画面に追加したとき | 60〜180px 前後 | apple-touch-icon |
| Android のホーム画面・アプリのように使うとき | 48〜512px 前後 | マニフェスト（サイトの設定ファイル）の icons |
一番小さい場面では16ピクセル前後、つまり米粒ほどの大きさです。この大きさで見分けがつく形かどうかが、ファビコンの作りやすさを決めます。
ロゴから小さくても読める形を作る
横長のロゴや、社名の文字が入ったロゴを正方形に縮めると、文字が潰れて読めません。ファビコンでは、次のように形を作り直すのが一般的です。
| ロゴの形 | ファビコンの作り方 |
|---|---|
| 印（シンボル）＋社名の文字 | 印の部分だけを使う |
| 社名の文字だけ（ロゴタイプ） | 頭文字1〜2文字を、ロゴと同じ書体と色で |
| 細い線や細かい模様がある | 線を太くし、細部を省いた小さいサイズ用の形を作る |
| 背景が透明で色が薄い | 色のついた正方形や丸の背景を敷く |
どの場合も、会社のロゴと同じ色と形の印象を保つことが大切です。Google のガイドラインでも、ファビコンはウェブサイトのブランドを視覚的に表すものであることが求められています。ロゴを作るときに、小さいサイズ用の形（ファビコンや SNS のアイコン）もあわせて作っておくと、あとで困りません。ロゴの使い方の決まりはブランドガイドラインとは、データの形式はロゴのデータ形式にまとめています。
ダークモード（画面の背景を暗くする設定）のブラウザでは、タブの背景が黒に近くなります。黒い印を透明の背景で置くと見えなくなるので、背景を敷くか、暗い背景でも見える色にします。
サイズと形式
Google 検索の条件
Google 検索セントラルのガイドライン（2026年10月時点）では、検索結果に表示されるファビコンについて次のように定められています。
- 形：正方形（縦横の比が1:1）
- 大きさ：8×8ピクセル以上が条件。いろいろな場所できれいに見えるよう、48×48ピクセルより大きいものを推奨
- 形式：BMP・GIF・ICO・PNG・JPEG・PPM・TIFF に対応
- 置き場所：ホームページに指定する。ホスト名（例：
www.example.co.jp）ごとに1つ - URL：頻繁に変えない、固定の URL にする
- 中身：サイトのブランドを表すもの。不適切な画像は表示されない
用意するファイルの一覧
元の画像を正方形で512×512ピクセル程度の大きさで作り、そこから次のファイルを書き出すのが扱いやすい方法です。
| ファイル | 大きさ | 用途 |
|---|---|---|
| favicon.ico | 16・32・48px をまとめたもの | 古いブラウザも含めたタブの表示。サイトの一番上の階層に置くと、指定が無くても読み込まれることが多い |
| favicon.svg または PNG | SVG は大きさ自由、PNG なら 48px 以上 | いまのブラウザのタブの表示。SVG ならどの大きさでもくっきり |
| apple-touch-icon.png | 180×180px で用意されることが多い | iPhone・iPad のホーム画面に追加したとき |
| マニフェストの icons | 192×192px と 512×512px | Android のホーム画面など。web.dev の案内では、Chromium 系のブラウザ向けに少なくともこの2つを用意するとされている |
apple-touch-icon は、iPhone 側で角が丸く切り取られます。四隅に大事な要素を置かず、背景は透明ではなく色で塗りつぶしておきます。
これらのファイルは、ページの見出し部分（head）に、どのファイルを使うかを指定して読み込ませます。指定の書き方（rel の値に icon や apple-touch-icon を使う）は、制作会社や CMS に任せてかまいません。WordPress では、管理画面の「サイトアイコン」から1枚の画像を登録すると、必要な大きさを自動で作る仕組みがあります。
ファビコンが表示されないとき
ファビコンを設定したのに表示されないときは、次の順で確かめます。
- ブラウザの記憶（キャッシュ）：ブラウザは古いファビコンを長く覚えています。別のブラウザや、シークレットウィンドウで開いて確かめる
- 画像の URL が開けるか：指定したファイルの URL を直接開き、画像が表示されるかを見る。ファイル名の綴りや置き場所の間違いが多い
- ホームページに指定があるか：下層のページだけでなく、ホームページ（トップページ）に指定があるか。Google 検索はホームページの指定を見ます
- Google の読み込みを拒否していないか：画像のフォルダやサイト全体を、検索エンジンに読み込ませない設定にしていないか
- 反映を待つ：Google のガイドラインでは、検索結果のファビコンは Google がホームページを読み込んだときに更新され、反映まで数日から数週間かかることがあるとされています。指定が正しければ、慌てて何度も差し替えず、反映を待ちます
ファビコンを差し替えたときは、ファイル名を変える（例：favicon-2026.svg）と、ブラウザや配信の仕組みが古い画像を覚えていても新しい画像に切り替わりやすくなります。
作る前のチェックリスト
- 16ピクセル前後に縮めても、何の印か見分けがつく
- ロゴと同じ色・形の印象を保っている
- 暗い背景のタブでも見える
- 正方形で、元の画像は512×512ピクセル程度ある
- favicon.ico・SVG または PNG・apple-touch-icon・マニフェスト用の2つの大きさをそろえた
- apple-touch-icon は背景を色で塗り、四隅に大事な要素を置いていない
- ホームページに指定があり、画像の URL が開ける
まとめ
ファビコンは、ロゴの印や頭文字を、16ピクセル前後でも見分けられる形に作り直して用意します。元の画像は正方形で大きめに作り、favicon.ico・SVG または PNG・apple-touch-icon（180×180px が多い）・マニフェスト用（192px と 512px）を書き出します。Google 検索では正方形で48×48ピクセルより大きいものが推奨で、反映には数日から数週間かかることがあります。
Lapisデザインラボのロゴの制作では、納品のデータとあわせてロゴの使い方のガイドをお渡ししています。内容は料金プランをご覧ください。
よくある質問
ファビコンは何ピクセルで作ればよいですか。
元の画像は正方形で、512×512ピクセル程度の大きなものを1つ作り、そこから必要な大きさを書き出すのが扱いやすい方法です。Google検索のガイドラインでは、正方形で8×8ピクセル以上が条件、48×48ピクセルより大きいものが推奨とされています。スマートフォンのホーム画面用（apple-touch-icon）は180×180ピクセルで用意されることが多いです。
ファビコンを設定したのに、検索結果に表示されません。
Google検索のファビコンは、Googleがホームページを読み込んだときに更新されるため、反映まで数日から数週間かかることがあります。ホームページに指定の記述があるか、画像のURLが開けるか、Googleの読み込みを拒否する設定になっていないかを確かめたうえで、反映を待ちます。
ロゴをそのまま縮めてファビコンにしてもよいですか。
横長のロゴや、社名の文字が入ったロゴをそのまま縮めると、16ピクセル前後の大きさでは潰れて読めません。ロゴの中の印（シンボル）の部分だけを使う、頭文字1文字にする、線を太くするなど、小さく表示されることを前提にした形にします。