ファビコンとは？作り方・設定方法と表示されないときの確認手順

掲載写真はすべてAI生成イメージです。実際の社内・顧客の写真ではありません。

ファビコンとは、ブラウザーのタブやブックマークなどでサイトを見分けるための小さな画像です。会社のロゴを変更したのにタブだけ昔のままなら、ページ上部のロゴとは別に、サイトアイコンの設定を確認します。逆に、タブは新しくてGoogle検索だけが古いときは、画像を作り直す前に検索側の取得条件を調べます。自分のサイトで確かめる順番を、素材づくりから順に見ていきましょう。

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

たとえば取引先の製品ページを何枚も開いたあと、見積もりの途中だった会社に戻りたいとします。タブの幅が狭いと、ページ名は途中までしか読めません。名前の隣のマークが手掛かりになります。この目印がファビコンです。画像をクリックして申し込むためのボタンではなく、すでに開いたページや保存したサイトを識別するために働きます。

出典：Create a Favicon | Documentation | WordPress.org

制作会社へ「ロゴを替えてください」とだけ伝えると、ページ上部を差し替えた時点で完了と受け取られがちです。「製品ページを開いたときのタブに、旧マークが出る」のように、ページと場所を一緒に指定しましょう。検索広告のロゴや地図の店舗情報も、自然検索のファビコンとは別の表示です。どの画面を見ているかが分かれば、担当の行き違いを減らせます。

小さな画像の役割は、見覚えのある形とサイトを結びつけることです。同じ絵を使うページがあっても、正規のサイトである証明にはなりません。取引や問い合わせで行き先を確かめるときは、絵柄だけで決めず、開いているページのアドレスも確かめてください。

作り方：ロゴのどこを正方形に残すか

作成ソフトを選ぶ前に、会社で使用を認めているロゴデータを用意します。横長のロゴが「シンボル＋会社名」でできているなら、まずシンボル部分だけで使えるかを確認します。使ってよい組み合わせが決まっている場合は、勝手に文字を外したり線を太くしたりせず、小さな表示向けの正式な版をデザイン担当に尋ねてください。

たとえば歯車のシンボルの下に細い会社名が入る場合、全体を正方形に押し込むと、文字は線に、歯のすき間は塗りつぶしに見えます。候補を実寸に近い大きさへ縮めてから、「歯車だと分かるか」「隣の丸いアイコンと見分けられるか」を比べます。拡大した画面でのみ読める文字は、採用の根拠にしません。この歯車は判断のための架空例です。

背景も実際の用途に合わせます。透明背景に白い線だけの画像は、暗い背景ではくっきりしても、明るいタブでは消えたように見えます。反対に、社名の周囲を白く塗った素材は、暗い背景では白い四角そのものが目立つことがあります。どちらが誤りということではありません。両方の背景で輪郭を追えるかを確かめ、必要なら指定色の地を敷いた正式な版を検討します。

同じ「サイズ」でも、512はWordPressに渡す素材の条件、8は検索用画像の最小条件です。検索の最小値を元画像の目標にすると、わずかな画素しかない素材をWordPress用に引き伸ばすことになります。大きな正方形の原本から用途別に書き出し、小さい見本は見え方を調べるために使うと混同しません。

出典：検索結果用のサイトのファビコンの設定 | Google 検索セントラル  |  Documentation  |  Google for Developers

出典：Create a Favicon | Documentation | WordPress.org

設定方法：WordPressとHTMLで入口を分ける

WordPress 6.5以降では、管理画面の「設定」から「一般」を開き、「サイトアイコン」で画像を選択して変更を保存します。公式手順に合わせて、先ほど用意した正方形のPNGをメディアライブラリから選びます。似た名前の「サイトロゴ」を変更すると、ヘッダーなど別の場所に影響することがあります。保存前には、設定名とプレビューの両方を見てください。

出典：Create a Favicon | Documentation | WordPress.org

WordPress 4.3〜6.4の公式手順は「外観」から「カスタマイズ」を開き、「サイト基本情報」のサイトアイコンを選ぶ方法です。画面例と手元のメニューが違ったら、まず使用中のWordPressの版、操作権限、テーマを管理担当に確認します。古い解説に合わせるために本体の版を戻したり、編集権限を増やしたりする必要はありません。サイトアイコンの標準機能で管理できるときは、テーマファイルに同じ指定を足さずに済みます。

出典：Create a Favicon | Documentation | WordPress.org

HTMLで管理しているサイトでは、公開するページのhead（画面に本文として表示されない設定部分）で画像を指定します。たとえば公開サイトの一番上の階層に icon.png を置くなら、指定例は <link rel="icon" href="/icon.png"> です。relが用途、hrefが画像の場所を示します。画像をサーバーにアップしただけでは、この指定が正しいページにあることまでは確認できません。

出典：検索結果用のサイトのファビコンの設定 | Google 検索セントラル  |  Documentation  |  Google for Developers

出典：rel 属性 – HTML | MDN

「/icon.png」の先頭のスラッシュは、今開いているサイトのルートから探す書き方です。製品ページの下に画像を置いたのに、この例をそのままコピーすると別の場所を見に行きます。例に合わせて画像を移動するより、実際に公開した画像の場所と指定をそろえてください。制作会社が複数ページ共通のテンプレートを管理している場合は、一ページだけを直す前に、どの範囲に反映されるかを確かめます。

自分で設定すべきか迷ったら、作業を二つに分けてみましょう。「どのマークを使うか」は社内で決められますが、「すべてのページが参照する設定はどこか」は保守担当の管理範囲かもしれません。新旧の画像と対象ページを渡せば、ログイン情報を共有したり、分からないテーマ設定を試しに書き換えたりせずに依頼できます。

タブに表示されないときは、ページから画像までたどる

保存したら、管理画面の小さな見本だけで完了にせず、一般の訪問者が開く公開ページを新しいタブで開きます。トップページと、普段案内する製品ページを一つずつ確認してください。トップだけが新しく製品ページだけが古ければ、端末内の一時保存をすべて消す前に、それぞれのページが同じ設定を出しているかを比較できます。

保守担当に頼めるなら、公開ページのHTMLで rel="icon" の指定を探し、そのhrefの行き先を確認してもらいます。指定先を開いたとき、新しい画像そのものが表示されるでしょうか。ログイン画面や「ページが見つかりません」が返る場合は、ブラウザーの見え方を調整する前に置き場所を直します。アクセス制限つきのテスト環境を一般公開するのではなく、公開用の画像を公開サイトの適切な場所に置きます。

候補の指定が複数あっても、それだけで誤りとはいえません。ブラウザーは、形式やサイズ、対象となる表示条件などに応じて候補を選びます。ひとつのPNGを開いて新しかったとしても、別の大きさで古いICOが残っているかもしれません。旧画像を消して回る前に、各候補の指定と返ってくる画像を並べましょう。どのページ・端末の組み合わせで違うのかを残すと、直す範囲が見えます。

出典：rel 属性 – HTML | MDN

違いが一台に限られる場合は、同じアドレスを別のブラウザーや新しいプロファイルで確かめると、一時保存の影響を切り分ける材料になります。端末ごとに違うという事実だけで原因を決めつけないでください。全員に履歴の消去をお願いする前に、公開ページの指定、画像の中身、別の環境の結果の三つを同じ時点でそろえます。

Google検索だけ変わらないときに確認すること

ブラウザーのタブに正しく出ていても、Googleの自然検索に同じ画像がすぐ表示されるとは限りません。Googleは、検索結果では一つのホスト名につき一つのファビコンを扱います。ホスト名とはアドレスの中でサイトの場所を表す部分です。会社案内と製品情報が同じホスト名なら、ページごとに違う画像を検索結果に出す設計にはできません。

出典：検索結果用のサイトのファビコンの設定 | Google 検索セントラル  |  Documentation  |  Google for Developers

たとえば架空の会社が example.com の下で会社案内と /products/ の製品情報を公開しているとします。製品ページだけで別のマークを指定しても、Google検索では同じホスト名の一部です。一方、製品情報を products.example.com で公開していれば、別ホストとして製品側のホームページに指定できます。この違いは既存構成を調べるためのものです。アイコンのためだけにサイトを移す必要はありません。

出典：検索結果用のサイトのファビコンの設定 | Google 検索セントラル  |  Documentation  |  Google for Developers

確認するのは、検索に出たURLのホストのホームページです。Googlebotがそのページを取得でき、転送があるなら転送先までたどれること、Googlebot-Imageが指定された画像ファイルを取得できることを保守担当に確かめてもらいます。人が画像を開けても、クローラーによる取得が制限されていれば同じ結果にはなりません。サイト全体の制限を解除せず、公開したいホームページと画像の該当範囲に絞って調べます。

出典：検索結果用のサイトのファビコンの設定 | Google 検索セントラル  |  Documentation  |  Google for Developers

検索用の画像URLは頻繁に変えず、安定した場所を使います。Googleの案内では再クロールに数日から数週間かかる場合があります。Search Consoleを管理していれば、対象ホストのホームページでURL検査からインデックス登録をリクエストできます。これは画像が載る日時の予約ではありません。条件を満たしても表示は保証されないので、リクエスト日と検索で観察した結果は別の日付として記録します。

出典：検索結果用のサイトのファビコンの設定 | Google 検索セントラル  |  Documentation  |  Google for Developers

たとえば金曜に画像を更新し、月曜の検索画面だけ旧マークだったとします。月曜の時点で、対象ホストのトップに新しい指定があり、その画像を取得でき、タブでも新しいなら、同じファイルを別名で何度も上げ直す理由はありません。記録には「自社側の指定と取得を確認、検索表示は旧版」と残し、再確認する担当を決めます。検索順位や問い合わせの変化から、アイコン設定の成否を判断することもできません。

依頼と引き継ぎに残す、アイコン変更の記録

変更依頼は、制作担当が同じ状態を見られる形で渡します。「まだ変わっていません」だけでは、ブラウザーのタブを見た人と、検索結果を見た人が別々の画面を調べ続けることがあります。次の記入例は架空の会社ロゴの切り替えです。値を自社のものに替え、確認できなかった欄は空欄のままにせず「未確認」と書くと、次の担当が続きを判断できます。

作業を終える条件も二つに分けます。社内で管理できる作業は「承認済み画像が、指定した公開ページとタブに反映されている」で確認できます。Google側の表示は「いつ、どのホスト名を、どの画面で見たか」を記録して追跡できます。そこまでを一つの納品条件にまとめると、社内作業が終わったかどうかまで曖昧になります。

失敗したときに戻せるように、以前の画面、画像、設定箇所も残しておきます。元に戻す場合も、公開サイトの設定を戻した結果と、検索画面が追いついた結果は同時とは限りません。運用の窓口には、次に誰が、タブと検索のどちらを見て連絡するのかまで渡しておきましょう。

よくあるご質問