ファビコンとは？サイズ・作り方・設定と、検索結果に出ないときの確認順

ファビコンとは、ブラウザのタブやブックマーク、Googleの検索結果でサイト名の横に出る、そのサイトを表す小さなアイコンのことです。英語の favorite icon（お気に入りのアイコン）を縮めた言葉で、favicon と書きます。

「タブに自社のマークが出ない」「Googleの検索結果で、うちのサイトだけ印のないアイコンになっている」「ロゴを変えたのに、検索結果では古いアイコンのまま」。ファビコンを調べ始めるきっかけは、たいていこのどれかだと思います。

先に結論を言うと、やることは3つです。正方形の画像を1枚用意する。使っているサービスの設定画面で登録するか、自分でHTMLを書いているならトップページに1行足す。あとはGoogleが読み直すのを数日から数週間待つ。多くのサイトは、これで足ります。

ただし、ファビコンの解説には、今のGoogleの文書と合わない古い説明が残っています。この記事では、本業の合間に自社のホームページやブログを運営している方に向けて、ファビコンが出る場所、用意する画像のサイズと形式、作り方、サービスごとの設定場所、Googleの検索結果に出るための条件、出ないときの確認順を、Google検索セントラルや各サービスの公式ヘルプをもとに順番に説明します。仕様は2026年11月5日に確認した内容です。

ファビコンとは、サイトを見分けるための小さな印

ファビコンは、たくさん開いたタブや検索結果の中から、自社のサイトを一目で見分けてもらうための印です。WordPress.orgの説明（外部サイト・新しいタブで開きます）でも、ブラウザがアドレスバーやタブなどでサイトを見分けやすくするために使い、スマートフォンではアプリのアイコンとしても使われる、とされています。

出る場所は、主に次の3つです。場所ごとに、読み取られる画像の指定が少しずつ違います。

<head> は、ページの画面には出ない情報を書く場所です。ホームページ作成サービスやWordPressの設定画面で画像を登録すると、この部分の記述は自動で入ります。

設定していないと何が起きるか

ファビコンを設定しなくても、サイトは問題なく見られます。困るのは、見分けにくくなることです。

ブラウザのタブでは、ほかのサイトと同じ汎用の印になり、タブを何枚も開いている人には、どれが自社のサイトか分かりません。Googleの検索結果でも、サイト独自の印は出せません。Googleの文書（外部サイト・新しいタブで開きます）には、不適切な画像のファビコンは既定のアイコンに置き換える、という説明もあります。

検索結果では、サイト名とアイコンが並んで表示されます。同じ言葉で検索した人が、見覚えのある会社やお店のマークに気づけるかどうかは、小さいながらも差になります。

OGP画像やロゴとは、役割が違う

よく混ざるのが、SNSで共有したときに出る画像（OGP画像）と、ページの中に置くロゴです。

同じロゴから作ることはあっても、別々に用意するものです。共有カードの画像の作り方はOGPの記事にまとめています。

状況別の読み分け早見表

今の状況に近い行から読むと、必要なところにすぐたどり着けます。

用意する画像のサイズと形式

迷ったら、まず512×512ピクセルの正方形のPNGを1枚作り、そこから必要な大きさを書き出すのが手堅い方法です。サービスの設定画面に登録するだけなら、多くの場合はこの1枚で足ります。

Googleの検索結果向けの条件

Google検索セントラルの文書（外部サイト・新しいタブで開きます）（2026年10月28日更新の日本語版）は、検索結果に出すファビコンについて次のように定めています。

「48ピクセルの倍数」は以前の決まり

他の解説記事には、「Googleの検索結果に出すには48ピクセルの倍数（48×48、96×96、144×144）にする」と書かれていることがあります。これは以前の文書の決まりです。2024年6月時点の文書の保存版（外部サイト・新しいタブで開きます）には、確かに48ピクセルの倍数（または正方形のSVG）と書かれていました。

その後、Googleは2024年10月24日の更新（外部サイト・新しいタブで開きます）で、実際の条件に合わせて「正方形で8×8ピクセル以上」に改め、48×48ピクセル以上の高い解像度をすすめる形にしています。今から作るなら、96×96や192×192のように48の倍数にしておいても困ることはありません。ただ、倍数でないと出ない、ということではありません。

SVGだけで済ませない

形式でも、古い情報と今の文書に差があります。以前の文書は正方形のSVGに触れていましたが、今の文書の対応形式の一覧にSVGは入っていません。

Googleは2026年8月28日の更新（外部サイト・新しいタブで開きます）で、対応形式を文書に一つずつ書き出しました。それまでは外部の資料を参照する書き方で、どの形式に対応しているか分かりにくくなっていたためで、対応形式そのものは変えていない、と説明しています。そのため、SVGのファビコンが検索結果に出なくなったと言い切ることはできません。それでも、確実に出したいなら、一覧にある形式を用意するのが安全です。SVGを使う場合も、ICOかPNGのファビコンを一緒に指定しておきます。

場所ごとに用意しておくと安心な画像

自分でHTMLを書く場合や、サービスが複数のサイズを登録できる場合は、次の組み合わせにしておくと、主な場所をまかなえます。

180×180ピクセルは、Appleの文書（外部サイト・新しいタブで開きます）の記述例に出てくる大きさです。同じ文書は、端末に合う大きさの画像が無ければ、それより大きいもののうち一番小さい画像を使うとしています。迷ったら大きめを1枚用意しておけば、足りなくなることは少なくなります。

ロゴからファビコンを作る

ファビコンは、検索結果でもタブでも、親指の爪よりずっと小さく表示されます。ロゴをそのまま縮めると、文字がつぶれて何か分からなくなることがよくあります。作るときは、次の順で考えると手が止まりません。

1. ロゴの中から、一番特徴のある部分を選ぶ。 社名の頭文字、マークの部分、お店の看板の形など、それだけで自社と分かるものを選びます。横長のロゴ全体を入れようとしないことが大切です。
2. 正方形の中に、余白を残して配置する。 上下左右の端ぎりぎりまで描くと、角を丸く切り取って表示する場所で欠けることがあります。
3. 背景の色を決める。 透明な背景にすると、黒い背景の画面では黒いマークが見えなくなります。迷ったら、ブランドの色で背景を塗っておきます。
4. 実際の大きさで確かめる。 作った画像を16×16ピクセルほどまで縮めて表示し、何の印か分かるかを見ます。分からなければ、線を太くするか、要素を減らします。
5. 必要な大きさを書き出す。 512×512の元の画像から、使う場所に合わせて書き出します。

Googleの文書（外部サイト・新しいタブで開きます）は、検索結果を見た人が一目でサイトを見分けられるように、ブランドを表すファビコンにするよう求めています。ロゴと関係のない絵や、ほかの会社と区別のつかない汎用のマークは避けます。

無料の変換ツールを使うときの注意

画像からICOファイルや複数のサイズを書き出してくれる、無料の変換サービスはたくさんあります。使うときは、次の3点を確かめます。

• 書き出されたファイルの大きさが、上の表のとおりになっているか。
• 一緒に出てくるHTMLの記述を、そのまま貼る前に読んで、自分が置いたファイルの場所と合っているか。
• 社外に出していないロゴの案などを、利用条件を確かめないまま預けていないか。

ホームページ作成サービスやWordPressを使っているなら、ICOファイルを自分で作る必要はほとんどありません。次の章のとおり、どのサービスもPNGなどの画像を1枚登録する形で設定できます。

使っているサービスごとの設定場所

ホームページ作成サービスやWordPressを使っているなら、HTMLを触らずに設定できます。

WordPressの場合

WordPress.orgの文書（外部サイト・新しいタブで開きます）によると、バージョン6.5からサイトアイコンの設定は一般設定に移りました。管理画面の「設定」→「一般」を開き、サイトアイコンの欄から画像を選びます。画像は正方形で、縦横とも512ピクセル以上が必要で、形式はPNGがすすめられています。6.4以前のバージョンでは、「外観」→「カスタマイズ」→「サイト基本情報」から登録します。

同じ文書は、favicon.ico を自分で用意したり、テーマのファイルを書き換えたりするより、この標準の機能を使うよう強くすすめています。古い解説にある「テーマの header.php に link タグを書く」方法は、テーマを更新したときに消えることもあるので、今から選ぶ理由はあまりありません。テーマやプラグインによっては独自のファビコン設定を持つものもあり、両方に別の画像を入れると、どちらが使われているか分からなくなります。使うのは片方だけにします。

Wixの場合

Wixのヘルプ（外部サイト・新しいタブで開きます）によると、ファビコンを追加するにはプレミアムプランと接続されたドメインが必要です。ダッシュボードの「設定」から「サイトの設定」を開き、「ファビコン」の欄で画像をアップロードして保存します。画像は .jpg か .png の正方形で、48×48、96×96、144×144のように48ピクセルの倍数がすすめられています。サイトを公開していないと追加できません。

Wixのヘルプは、Googleがファビコンをいつ読み取り、検索結果に表示するかは保証できない、とも書いています。登録したあとは、次の章の確かめ方で、ページに入っているかを見ておきます。

Studioの場合

Studioのヘルプ（外部サイト・新しいタブで開きます）によると、ボックスを何も選んでいない状態で右パネルを開き、サイト全体の設定は「サイト」タブ、ページごとの設定は「ページ」タブで行います。「ファビコン」の項目で画像をアップロードし、サイトを公開または更新すると反映されます。大きさはGoogleの案内に合わせて48×48ピクセル以上がすすめられ、ファイルが重すぎると正しく読み込まれないことがある、とされています。

Studioではページごとに違うファビコンを設定できますが、Googleの検索結果で使われるのはサイトに1つだけで、ホームページで指定したものです。ページごとに変えても、検索結果のアイコンは変わらない点に注意してください。

Shopifyの場合

Shopifyのヘルプ（外部サイト・新しいタブで開きます）によると、管理画面の「オンラインストア」を開き、ファビコンを付けるテーマの「テーマを編集」を選びます。歯車のアイコンから「テーマ設定」に進み、テーマのバージョンに応じて「ロゴ」か「ファビコン」を選んで画像を登録し、保存します。

同じヘルプは、16×16か32×32ピクセルの画像が理想で、それより大きい画像はアップロード時に32×32ピクセルに縮小されるとしています。設定できるのはBasicプラン以上で、Starterプランでは追加できません。検索結果に出ない場合は、サイトマップをGoogleに送るよう案内しつつ、ガイドラインを満たしていても表示は保証されない、とも書いています。

HTMLを自分で書く場合

自分でサイトのコードを管理しているなら、ファイルをサイトに置き、ホームページを含む各ページの <head> に次のような記述を足します。ファイル名と場所は、自分のサイトに合わせて書き換えてください。

<head>
  <link rel="icon" href="/favicon.ico" />
  <link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
</head>

rel="icon" を複数書いた場合、MDN（外部サイト・新しいタブで開きます）によると、ブラウザは type や sizes の情報から最も合うものを選び、同じくらい合うものが複数あれば最後のものを使います。

古い解説には rel="shortcut icon" と書く例もあります。Googleの文書（外部サイト・新しいタブで開きます）は過去の経緯からこの書き方にも対応していますが、MDNは shortcut は標準に沿わないので使わないよう案内しています。新しく書くなら rel="icon" だけで足ります。

href には、/favicon.ico のような相対パスも、https:// から始まる完全なアドレスも書けます。Googleの文書によると、画像は自分のサイトの中に置かなくてもよく、CDN（画像などを配信する外部の仕組み）に置いたものでも使えます。

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

ブラウザのタブには出ているのに、検索結果に出ないことはよくあります。Googleの検索結果には、タブとは別の条件があるからです。Googleの文書（外部サイト・新しいタブで開きます）の条件を、小さな会社やお店のサイトでつまずきやすい順に並べると、次のようになります。

指定するのはホームページ、ファビコンはサイトに1つ

Googleは、ファビコンをホームページの <head> から読み取ります。そして、検索結果に出せるファビコンは、サイトごとに1つだけです。ここでいうサイトは、ホスト名（アドレスの https:// のあと、最初の / までの部分）で区切られます。

図のとおり、https://example.com と https://news.example.com は別々のファビコンを持てます。一方、https://example.com/news のようなフォルダの形のアドレスは、example.com の一部として扱われ、独自のファビコンは出せません。

ここで気をつけたいのが、ブログサービスやホームページ作成サービスの中に、サービスのアドレス/自分の名前 という形でサイトを作っている場合です。この形だと、検索結果に出るのはサービス側のファビコンになり、自分で画像を登録しても検索結果のアイコンは変わらないと考えられます。検索結果に自社の印を出したいなら、独自ドメインか、自分の名前.サービスのアドレス という形のアドレスで運営する必要があります。

Googleのプログラムが読めること

Googleの文書（外部サイト・新しいタブで開きます）は、Googlebot（ページを読むGoogleのプログラム）がホームページを読めて、そこから転送されている場合はその先までたどれること、さらにGooglebot-Image（画像を読むプログラム）がファビコンの画像を読めることを求めています。どちらも、robots.txtなどで読み取りを止めてはいけません。

robots.txtは、サイトのどこを読んでよいかをプログラムに伝えるファイルです。画像のフォルダをまとめて読み取り禁止にしている場合、ファビコンも巻き込まれます。中身の読み方はrobots.txtの記事で確かめられます。公開前のサイトに付けたパスワードの制限が残っている場合も、Googleは画像を読めません。

www の有無や、アドレスを引っ越したとき

ホスト名で区切るということは、https://www.example.com と https://example.com も、厳密には別のホスト名だということです。多くのサイトは、どちらかに転送する設定になっています。Googleの文書が「ホームページから、ファビコンが指定されているページへの転送をたどれること」を条件にしているのは、このためです。

確かめ方は簡単です。ブラウザのアドレス欄に、www を付けた形と付けない形の両方を入れて、どちらも同じアドレスに落ち着くかを見ます。落ち着いた先のホームページに rel="icon" の記述があれば、条件は満たしています。

ホームページ作成サービスから独自ドメインに移った場合や、会社名の変更でドメインを変えた場合も、新しいアドレスのホームページで改めて読み取られるまで、検索結果のアイコンは整いません。古いアドレスから新しいアドレスへの転送を設定したうえで、新しいホームページにファビコンが入っているかを確かめておきます。

画像のアドレスを頻繁に変えない

Googleの文書は、ファビコンのアドレスを頻繁に変えないよう求めています。ファイル名に日付を付けて毎月差し替える、といった運用は避けます。デザインを変えるときは、ファイル名を変えずに中身だけ差し替えるか、変えるのは一度だけにします。

反映には数日から数週間かかる

設定してもすぐには出ません。Googleの文書によると、ホームページを読み直して処理するまでに、数日から数週間かかることがあります。急ぐ場合は、サーチコンソールのURL検査ツールで、ホームページのインデックス登録をリクエストできます。

それでも、条件をすべて満たしていても表示されるとは限らない、とGoogleの文書ははっきり書いています。次の章の確認をひととおり終えたら、あとは待つのが基本です。

設定できたかの確かめ方

登録したあとは、次の順に確かめると、どこで止まっているかが分かります。

ホームページ作成サービスの場合、ソースの中のファイル名はサービスが自動で付けたものになっていることがあります。名前が分からなくても、rel="icon" の行を見つければ十分です。

会社名で検索しても自社のサイトそのものが出てこない場合は、ファビコンより前の問題です。ホームページが検索に出てこないときの記事から確かめてください。

表示されない・古いままのときの確認順

原因は、反映待ち、指定する場所、画像そのもの、読み取りの妨げ、ブラウザに残った古い情報に分かれます。次の順に確かめると、無駄な作り直しを避けられます。

1. 設定してからの日数を確かめる。 検索結果のアイコンは、Googleがホームページを読み直すまで変わりません。数日から数週間かかることがあるので、設定した日を控えておきます。
2. アドレスの形を確かめる。 サイトが example.com/自分の名前 のようなフォルダの形なら、検索結果には上の階層のファビコンが出ます。自分の設定では変えられません。
3. ホームページに指定があるかを確かめる。 記事のページには入っていても、ホームページに入っていなければ、検索結果には出ません。ページのソースで rel="icon" を探します。
4. 画像のアドレスを開く。 シークレットウィンドウで開いて、画像が出るかを見ます。エラーやログイン画面になるなら、置き場所か公開の設定が原因です。
5. 読み取りを止めていないかを確かめる。 robots.txtで画像やそのフォルダを読み取り禁止にしていないか、ホームページからの転送先が読めるかを確かめます。
6. 画像の形と形式を確かめる。 正方形か、8×8ピクセル以上か（できれば48×48ピクセルより大きいか）、BMP、GIF、ICO、PNG、JPEG、PPM、TIFFのどれかかを見ます。SVGだけを指定しているなら、ICOかPNGを足します。
7. ブラウザに残った古い情報を疑う。 タブのアイコンだけが古い場合は、ブラウザが前の画像を覚えていることがあります。シークレットウィンドウや別のブラウザで開くと、新しい画像が出るかを確かめられます。

ここまで問題がなければ、あとはGoogleの処理を待つ段階です。ロゴを変えたあとに古いアイコンが出続ける場合も、同じ順で確かめます。何度も画像のアドレスを変えて試すと、かえって反映が遅れる原因になるので、変えるのは一度だけにします。

ファビコンはSEOに効くのか

結論として、ファビコンを設定すれば検索順位が上がる、とは言えません。今回確認したGoogleの文書（外部サイト・新しいタブで開きます）は、ファビコンを検索結果での見え方の一つとして説明していて、順位の決め手としては書いていません。

それでも、整えておく意味はあります。Googleの文書がファビコンに求めているのは、検索結果を見た人が一目でサイトを見分けられることです。名前を知っている会社やお店のマークが並んでいれば、検索した人は迷わず選べます。逆に、印のないアイコンや、ほかの会社と似たマークでは、その手がかりを失います。

検索結果の見え方を整える方法には、ほかにも構造化データや、検索結果の説明文になるメタディスクリプションがあります。ファビコンは、その中でも一度入れれば長く効く、手間の小さい作業です。

記事を増やすときの手間を減らす

ファビコンは、一度整えれば放っておけます。手間が続くのは、検索から人に来てもらうための記事を増やし、直していく作業のほうです。

つむぎは、この「記事づくり」を手伝う道具です。サーチコンソールとつなぐと、順位・表示回数・クリック率を取り込み、キーワードごとに「新規で書く」「リライトする」「タイトルだけ直す」「内部リンクを足す」「今は様子を見る」のどれがよいかを、理由をつけて提案します。できた記事は「要確認」の状態で届き、確認して承認したものだけが公開され、つむぎが勝手に公開することはありません。

一方で、つむぎはファビコンを作ったり、サイトに設定したりする道具ではありません。ファビコンが正しく出ているかは、この記事の方法で確かめてください。検索結果のアイコンを整えたいだけなら、この記事の手順だけで足ります。

新しい記事の作成は1本あたり約4クレジットで、登録時に付与される初回8クレジットで約2本分を試せます。自分のサイトの検索データでどんな提案が出るかを確かめたい場合は、無料で始めるから試してください。

よくある質問

ファビコンを確かめるチェックリスト

設定したあとに、上から順に確認してください。

• 画像は正方形で、48×48ピクセルより大きい。
• 形式はICOかPNGなど、Googleの対応形式の一覧にあるものにした（SVGだけにしていない）。
• 16×16ピクセルほどに縮めても、何の印か分かる。
• 背景が透明で、暗い画面で見えなくなる色になっていない。
• ホームページのソースに rel="icon" の記述がある。
• 画像のアドレスを、シークレットウィンドウで開ける。
• robots.txtで、画像やそのフォルダを読み取り禁止にしていない。
• サイトのアドレスが、別のサービスのアドレスの中のフォルダの形になっていない。
• iPhone用に、180×180ピクセルの apple-touch-icon を用意した。
• ファビコンの画像のアドレスを、頻繁に変えていない。
• 設定した日を控え、数日から数週間たってから検索結果を確かめる。

あわせて読む

• OGPとは：ファビコンではなく、SNSやLINEで共有したときの画像と文章を整えたい人向け。
• robots.txtとは：Googleのプログラムに画像を読み取られているかが気になる人向け。
• サーチコンソールの使い方：URL検査ツールでホームページを確かめたい人向け。
• ホームページが検索に出てこない原因と対処：会社名で検索しても、サイトそのものが出てこない人向け。

出典

• Google 検索セントラル「検索結果に表示されるファビコンを定義する」（外部サイト・新しいタブで開きます）：ホームページで指定すること、rel の値と href の書き方、サイトごとに1つでホスト名で区切ること、Googlebot と Googlebot-Image の読み取り、正方形・8×8ピクセル以上・48×48ピクセルより大きいものの推奨、対応形式、アドレスを変えないこと、不適切な画像の扱い、数日から数週間の反映、表示が保証されないことの裏づけ（2026年10月28日更新の日本語版を確認）。
• Google 検索セントラル「ドキュメントの更新情報」（外部サイト・新しいタブで開きます）：2024年10月24日の大きさと比率の条件の変更、2026年8月28日の対応形式の明記と、形式そのものは変えていないことの裏づけ。
• Google 検索セントラルの同じ文書の2024年6月時点の保存版（外部サイト・新しいタブで開きます）：以前は48ピクセルの倍数（または正方形のSVG）を求めていたことの裏づけ。
• MDN「rel 属性」（外部サイト・新しいタブで開きます）：rel="icon" の役割、複数あるときの選ばれ方、shortcut を使わないことの裏づけ。
• HTML Living Standard「Link type icon」（外部サイト・新しいタブで開きます）：指定がないときにブラウザが /favicon.ico を読みに行くことがある、という扱いの裏づけ。
• Apple「Configuring Web Applications」（外部サイト・新しいタブで開きます）：apple-touch-icon の書き方、180×180の記述例、合う大きさがないときの選ばれ方の裏づけ。
• WordPress.org「Create a Favicon」（外部サイト・新しいタブで開きます）：6.5以降の設定場所、6.4以前の設定場所、512ピクセル以上の正方形とPNGの推奨、標準の機能を使うすすめの裏づけ。
• Wix ヘルプ「検索結果に表示される自身のサイトにファビコンを追加する」（外部サイト・新しいタブで開きます）：必要なプランとドメイン、設定の手順、形式と推奨サイズ、表示が保証されないことの裏づけ。
• Studio ヘルプ「ファビコンを設定する」（外部サイト・新しいタブで開きます）：設定の場所、推奨サイズ、ファイルの重さの注意、公開または更新が必要なことの裏づけ。
• Shopify ヘルプセンター「ストアにファビコンを追加する」（外部サイト・新しいタブで開きます）：設定の手順、推奨サイズと32×32ピクセルへの縮小、対象のプラン、表示が保証されないことの裏づけ。