ファビコンの設定・差し替え手順｜タブと検索結果の小さな顔を整える

ロゴを新しくして、サイトのヘッダーも差し替えた。ひと安心——と思ってブラウザのタブを見たら、そこには前のロゴの小さなアイコンが残ったまま。 検索結果を見ると、自社のサイト名の横は地球儀のようなマークになっている。そんなことはありませんか。

このタブや検索結果に出る小さなアイコンを、ファビコン（favicon。WordPressなどでは「サイトアイコン」とも呼ばれます）といいます。サイズは小さいのに、どこで設定しているのか、誰に頼めばいいのかがわかりにくい部品です。後回しになっていても、まったく不思議ではありません。

気づいた時点で、もう半分は終わっています。今日は、ファビコンを設定・差し替えする手順を、一緒に順番に整理していきましょう。

結論：ファビコンの設定・差し替えは、次の3つで進めます。
① 出る場所を確かめる：ブラウザのタブ、スマホのホーム画面、Googleの検索結果の3か所で、いまどう見えているかを見る。
② 正方形の画像を1枚用意する：512×512ピクセル程度の正方形で、小さく縮めても形がわかる画像を用意する。
③ 設定して、反映を待つ：CMSの設定画面か制作会社への依頼で差し替え、ブラウザは表示の保存（キャッシュ）を、検索結果はGoogleの再取得を待つ。
差し替えてもすぐに変わらないのは、設定の失敗ではないことが多いです。

ファビコンで、何が起きているのか

ファビコンは、1か所に設定すれば終わり、というより、いくつかの場所で別々に表示されている部品です。

「タブでは新しくなったのに、検索結果は古いまま」というずれは、ここから起きます。どこか1か所だけ古いのは、たいていその場所の反映待ちです。

もうひとつ多いのが、そもそもファビコンが設定されていないケースです。この場合、ブラウザでは空白や既定のマーク、検索結果では地球儀のようなマークが代わりに出ます。サイトの中身には影響しませんが、検索結果で並んだときに自社のサイトだと気づいてもらう手がかりが、ひとつ減ってしまいます。

ファビコンを設定・差し替える3ステップ

① 出る場所を確かめる：3か所を見てみる

まずは、いまの状態を確かめます。見るのは次の3か所です。

• ブラウザのタブ：パソコンで自社サイトを開き、タブの左端を見る。できれば普段使わないブラウザや、シークレットウィンドウ（閲覧履歴を残さない画面）でも開いてみる
• スマホのホーム画面：スマホで自社サイトを開き、「ホーム画面に追加」を試して、どんなアイコンになるかを見る（確かめたら削除して大丈夫です）
• Googleの検索結果：スマホで自社の会社名やサービス名を検索し、サイト名の横のアイコンを見る

3か所の様子をメモしておくと、あとで「どこが反映済みで、どこが待ちなのか」を見分けやすくなります。ついでに、いまのファビコン画像が、どこに、どんな形式で置かれているかも確かめておくと安心です。WordPressなら管理画面のサイトアイコンの設定、そうでなければ制作会社に「ファビコンのファイルの場所」を聞けばわかります。

② 正方形の画像を1枚用意する：縮めても形がわかるか

次に、ファビコンにする画像を用意します。ここで迷いやすいのは、横長のロゴをそのまま使おうとしてしまうことです。ファビコンは正方形で、タブではとても小さく表示されます。

• 形は正方形：横長のロゴなら、マーク部分だけ、または頭文字だけを切り出す
• 大きさは512×512ピクセル程度：大きめに作っておけば、CMSや制作会社の側で各サイズに縮められる。WordPressのサイトアイコンも、512×512ピクセル以上の正方形が目安です
• 小さく縮めても形がわかる：細い文字や細かい模様は、縮めるとつぶれる。16×16ピクセル程度まで縮めた状態を画面で見てみる
• 背景の扱いを決める：背景を透明にするか、色を敷くか。ブラウザが暗い色の表示（ダークモード）でも見えるかを確かめる

Googleの検索結果に出すためのファビコンについては、Googleのヘルプで、正方形であることや、48×48ピクセルより大きいサイズにすることなどが案内されています（執筆時点）。512×512ピクセルの正方形で用意しておけば、この目安にもおさまります。

画像の書き出しや軽量化の手順は、サイトに画像を載せる前の3手順が参考になります。ロゴのデータを使うので、社内のロゴの使用ルールがあれば、それに沿っているかも一度見ておきましょう。

③ 設定して、反映を待つ：場所ごとに待ち方が違う

画像がそろったら、設定です。サイトの作り方によって、やり方が分かれます。

WordPressなどのCMSで、自分で設定できる場合

• WordPressでは、多くのテーマで「サイトアイコン」として画像を登録できます。設定する場所はテーマの種類やWordPressのバージョンによって違い、カスタマイザーの「サイト基本情報」や、サイトエディターのサイトロゴの設定から登録する形などがあります。見つからなければ、使っているテーマの説明書きを確かめましょう
• 差し替えるときは、新しい画像を登録して保存するだけです。古い画像はメディアライブラリに残りますが、すぐに消さなくて大丈夫です

制作会社に頼む場合

• ファビコンは、サイトの裏側（HTMLの<head>の部分）に、画像の場所を書いて指定しています。ここを書き換えてもらう依頼になります
• 依頼するときは、次のように伝えると行き違いが減ります

ファビコンの差し替えをお願いします。
・新しい画像：添付の512×512ピクセルの正方形の画像
・反映してほしい場所：ブラウザのタブ、スマホのホーム画面のアイコン、Google検索結果のアイコン
・全ページに反映されるようにお願いします（とくにトップページ）
・作業後、新しい画像のファイルの場所を教えてください

制作会社への依頼の書き方は、外注に依頼する前の要件メモもあわせてどうぞ。

設定したあとの「待ち」について

• ブラウザのタブ：古い画像が保存されていることがあります。シークレットウィンドウで開き直す、別のブラウザで開く、などで確かめましょう。それで新しくなっていれば、設定はできています
• スマホのホーム画面：すでに追加していたアイコンは、追加し直すと新しくなります
• Googleの検索結果：Googleがトップページとファビコンを取得し直すまで、古いまま（または地球儀マーク）です。数日〜数週間かかることもあるので、慌てず待ちます。気になる場合は、Search Consoleの「URL検査」でトップページのインデックス登録をリクエストしておくと、取得し直してもらうきっかけになります

Googleの検索結果になかなか出てこないときは、ファビコンの画像が検索エンジンから見られない場所に置かれていないか（robots.txtでブロックしていないか）、トップページにファビコンの指定があるかを制作会社に確かめてもらうと、原因が見つかりやすくなります。Search Consoleの基本はSearch Consoleの基本で整理しています。

具体例：ロゴ変更から3週間、検索結果のアイコンが切り替わるまで

ある会社で、会社のロゴを新しくしたときのことです。ヘッダーのロゴは制作会社が差し替えてくれましたが、ファビコンは依頼から漏れていて、タブには前のロゴが残っていました。

WEB担当は、まず3か所を見てメモしました。

そこで、新しいロゴのマーク部分だけを512×512ピクセルの正方形に切り出し、16×16ピクセルに縮めても形がわかることを確かめてから、上の依頼文で制作会社に差し替えを頼みました。

作業の翌日、シークレットウィンドウで開くと、タブは新しいアイコンに。普段のブラウザでは前のアイコンのままでしたが、「保存された古い画像が出ているだけ」とわかっていたので、慌てずにすみました。スマホのホーム画面は、追加し直すと新しくなりました。

検索結果だけは、しばらく前のロゴのままでした。Search Consoleでトップページのインデックス登録をリクエストし、そのまま待つことに。3週間ほどたったころ、検索結果のアイコンも新しいロゴに切り替わっていました。

この会社では、この件をきっかけに、公開前チェックリストに「ロゴを変えたら、ファビコンも」という一行を足しました。次にロゴやサイト名が変わるときは、最初から依頼に入れられるようになっています。

ファビコンを整えることで、何が変わるか

• 検索結果で自社だと気づいてもらいやすくなる：サイト名の横に見慣れたマークがあると、並んだ検索結果の中でも見つけてもらいやすくなります。
• タブをたくさん開く人にも見つけてもらえる：比較検討中の人は、いくつものサイトをタブで開いています。小さなマークが、自社のタブに戻ってくる目印になります。
• ロゴ変更のときの「漏れ」が減る：ファビコンの場所と差し替え方がわかっていれば、次の変更で慌てずにすみます。
• 「反映待ち」を説明できる：社内で「まだ古いけど？」と聞かれても、「ブラウザの保存と、Googleの取得し直しを待っているところです」と落ち着いて答えられます。

小さな部品ですが、毎日いろいろな人の画面に出ている、自社サイトの顔のひとつです。

明日やること

• パソコンのブラウザのタブで、自社サイトのファビコンを見る
• スマホで、自社名を検索して、サイト名の横のアイコンを見る
• いまのファビコンが、どこで設定されているか（CMSの設定か、制作会社か）を確かめる
• 新しくするなら、ロゴのマーク部分を正方形で用意できるかを見てみる

チェックリスト

出る場所を確かめる

• パソコンのブラウザのタブで、ファビコンを見た
• シークレットウィンドウや別のブラウザでも見た
• スマホの「ホーム画面に追加」で、アイコンを見た
• Googleの検索結果で、サイト名の横のアイコンを見た
• いまのファビコンの設定場所（CMSか、制作会社か）を確かめた

正方形の画像を1枚用意する

• 正方形で、512×512ピクセル程度の画像を用意した
• 横長のロゴは、マーク部分や頭文字だけを切り出した
• 16×16ピクセル程度に縮めても、形がわかることを確かめた
• 背景が暗い表示でも見えるかを確かめた
• 社内のロゴの使用ルールに沿っているかを見た

設定して、反映を待つ

• CMSのサイトアイコン設定、または制作会社への依頼で差し替えた
• 制作会社には、反映してほしい場所と画像を具体的に伝えた
• シークレットウィンドウで、タブのアイコンが新しくなったのを確かめた
• スマホのホーム画面のアイコンを、追加し直して確かめた
• 検索結果は、数日〜数週間の反映待ちだと把握した
• 公開前チェックリストに「ロゴを変えたら、ファビコンも」を足した

全部を一度に進めなくて大丈夫です。今日は、自社サイトのタブと検索結果のアイコンを見てみるだけで十分です。

タブの片すみの小さなアイコンに気づけるのは、自社サイトを毎日ちゃんと見ている人だけです。その目があれば、サイトの顔はきっと整っていきます。まずは明日、ブラウザのタブをひとつ開いて、自社の小さな顔を確かめてみましょう。

よければ、こちらも

• サイトに画像を載せる前の3手順｜リサイズ・圧縮・alt
• OGP設定の基本｜SNSでシェアされたときの見え方を整える
• 自社サイトの更新を公開前に確認するチェックリスト
• 会社概要ページ、古いままになっていませんか｜年に一度の棚卸しチェック
• スマホで表示が崩れている？自分で見つけて直す確認手順

「うちのサイトの場合、どこで設定しているんだろう？」と迷ったら、お問い合わせから気軽に声をかけてくださいね。

本記事は一般的な実務情報です。具体例は説明のための一例で、反映までの期間はサイトや時期によって異なります。ファビコンの推奨サイズや設定方法、検索結果での表示の扱いは、各ブラウザ・CMS・Googleの仕様の更新により変わることがあります。最終的な設定は、各サービスの最新の公式情報（Google 検索セントラルのファビコンに関するヘルプなど）でご確認ください。

関連用語

• CMS
• Search Console
• SEO