検索結果にサイトのアイコンが出ないときに用意するファイル｜必要なサイズと置き場所
検索結果にサイトのアイコンが出ないときに用意するファイル｜必要なサイズと置き場所
スマホでGoogle検索をすると、検索結果のサイト名の横に丸いアイコンが表示されます。自社サイトだけこれが出ておらず、地球儀のような初期アイコンのままになっている。この状態の原因は、ほとんどの場合3つのどれかです。アイコン用のファイルをそもそも置いていない、置いてあるがGoogleの要件を満たしていない、要件は満たしているがまだ再クロールされていない。順に確認すれば必ず切り分けられます。
先に結論を書きます。用意するファイルは次の3つ、置き場所はサイトの公開フォルダの直下（ルート直下）です。
| ファイル名 | サイズ | 役割 |
|---|---|---|
| favicon.ico | 16・32・48pxを1ファイルに内包 | ブラウザのタブ表示。昔からの標準 |
| favicon-192.png | 192×192px | Google検索結果のアイコンはこちらが使われる |
| apple-touch-icon.png | 180×180px | iPhoneでホーム画面に追加したときのアイコン |
そしてHTMLの<head>内に、次の3行を追加します。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">これだけです。ファイル容量も、当社で実際に生成したものは3ファイル合計で60KB弱でした。作業自体は軽い部類に入ります。にもかかわらず表示されないサイトが多いのは、「設定した気になっているだけで、実際にはどこにも置かれていない」ケースが目立つからです。
実例：25サイトを調べたら、1つも設定されていなかった
当社が保守している名古屋の美容サロンFCのサイト群で、検索結果のアイコンを全店統一する作業を行いました。着手前にまず現状を確認したところ、25サイトすべてで、ファビコンが1つも設定されていませんでした。HTMLにlinkタグも無く、favicon.icoの実体ファイルも無く、ブログ側のWordPressテーマにも設定が無い。完全にゼロの状態です。
各サイトは制作時期も担当も異なります。それでも全滅だったのは、ファビコンが「制作フローの中に明示的な工程として存在しないと、誰も置かないファイル」だからです。デザインカンプには出てこず、納品チェックリストにも入っていないことが多い。表示が崩れるわけでもないので、無くても誰も気づきません。
自社サイトで確認する方法は簡単です。ブラウザのアドレス欄に https://自社ドメイン/favicon.ico と直接入力してください。画像が表示されれば実体があります。404エラーになれば置かれていません。まずこの1手で「ファイルが無い」のか「あるのに出ない」のかが分かれます。
Googleの要件：正方形・48pxの倍数・小さくても判別できること
検索結果にアイコンを出すためのGoogle側の要件は明確です。
- 正方形であること
- 48pxの倍数のサイズであること（48・96・144・192など。推奨は大きめの192px）
- 検索結果では小さく丸くトリミングされて表示されるため、その状態で判別できるデザインであること
3つ目が実務では一番の急所です。会社ロゴをそのまま縮小して使うと、細い文字や装飾が潰れて「何かの染み」のようになります。当社では生成したアイコンを48px相当で表示した状態を8倍に拡大し、ロゴ内の文字が読めるかを目視確認してから採用しました。この確認をせずに公開すると、表示はされているのに何のサイトか分からないアイコンになり、作り直しの二度手間が発生します。
ロゴをそのまま縮小しない：余白を先に設計する
もう1つ、作成時に必ず押さえるべきなのが余白の設計です。
検索結果のアイコンは円形にトリミングされて表示されます。ロゴ画像が枠いっぱいまで描かれている（余白がほぼゼロの）場合、そのまま縮小すると円で切り抜かれた際に外周が欠けます。ロゴが円形デザインだと、輪郭線がぐるりと一周削れた状態になり、かなり目立ちます。
正しい手順は、元ロゴを一度白いキャンバスに載せ直して余白を作ってからリサイズすることです。当社の実例では、650×650pxで余白ほぼゼロの円形ロゴを、720pxの白キャンバスに88%の大きさで配置し、外周に約6%の余白を作ってから各サイズへ書き出しました。この一手間を入れておけば、円形トリミングでもロゴ本体は無傷で残ります。
画像編集ソフトでもPythonのPillowのようなライブラリでも作れます。要点はツールではなく、「余白を作る → 各サイズに書き出す → 48px相当での見え方を確認する」という順序です。
置き場所の注意：ビルドで生成されるサイトは「元」に入れる
ファイルの置き場所はルート直下が基本ですが、サイトの構成によって「どこに追加すれば維持されるか」が変わります。ここを誤ると、設定した直後は表示されるのに、次のサイト更新で消えるという分かりにくい事故につながります。
| サイト構成 | 追加する場所 |
|---|---|
| 静的HTML | 公開フォルダ直下にファイル、各HTMLの<head>にlinkタグ |
| WordPress単体 | 管理画面の「外観→カスタマイズ→サイト基本情報」のサイトアイコン設定が最も簡単 |
| テンプレートからビルドして生成する構成 | 本番だけでなく、ビルド元のテンプレートにも必ず追加する |
| トップは静的+ブログだけWordPressのような複合構成 | 静的側のHTMLとWordPressテーマの両方に追加する |
特に注意が必要なのが3つ目と4つ目です。ビルドの仕組みがあるサイトで本番のHTMLだけを直接編集すると、次回のビルドで元テンプレートの内容に上書きされ、linkタグごと消えます。当社の25サイトの作業では、各サイトのビルド元ファイルと本番の両方に挿入し、次回ビルドが走っても消えない状態にしてから完了としました。
また、トップページとブログでシステムが分かれている構成では、片方だけに設定するとブログ側のページだけアイコンが出ません。検索結果に出るのはトップページだけではないので、全ページ共通で効いているかを見る必要があります。
設定したのに出ないときの確認手順
ファイルを置いてlinkタグも書いたのに出ない場合は、次の順で確認します。
- ファイルのURLに直接アクセスして200（正常表示）が返るか。404なら置き場所かパスの誤り
- robots.txtでアイコンのURLをブロックしていないか。Googleが取得できなければ表示されません
- サイズ要件（正方形・48pxの倍数）を満たしているか
- HTMLのlinkタグのパスとファイルの実体が一致しているか。
/favicon.icoと書いてサブフォルダに置いてある、といった食い違いは意外と多い - ここまで全部問題なければ、あとはGoogleの再クロール待ちです
5つ目は重要です。ファビコンの反映は即時ではなく、Googleがサイトを再クロールしてアイコンを取得するまで、数日から数週間かかります。設定の翌日に検索して「出ていないからやり方が悪い」と判断し、設定をあれこれ変更するのが一番よくないパターンです。1〜4を確認して問題なければ、触らずに待ってください。急ぐ場合はSearch Consoleからトップページのインデックス登録をリクエストすると、再クロールが早まることがあります。
なお、複数サイトを一括で検証する場合は、スクリプトの結果を鵜呑みにする前に1サイトだけ手作業で確認して結果を照合することをおすすめします。シェルの仕様差などで検証スクリプト側が誤動作し、実際は正常なのに「全件エラー」に見えることがあります。全件異常という結果が出たときほど、検証方法そのものを疑うのが安全です。
まとめ：軽い作業だが、放置すると検索結果で損をし続ける
- 用意するのはfavicon.ico・192pxのPNG・180pxのapple-touch-iconの3ファイル。置き場所はルート直下、HTMLに3行
- Googleの要件は正方形・48pxの倍数・小さくても判別できるデザイン
- ロゴは余白を作ってからリサイズする。円形トリミングで縁が欠けるのを防ぐ
- ビルドで生成されるサイトはビルド元に追加しないと次回更新で消える
- 反映は再クロール待ちで数日〜数週間。設定が正しければ触らずに待つ
検索結果のアイコンは、順位そのものを動かす要素ではありません。ただ、競合が並ぶ検索結果の中で自社だけ初期アイコンのままだと、それだけで「手入れされていないサイト」という印象を与えます。25サイトを調べて全滅だったという実例が示すとおり、確認すらされていないサイトが大半です。逆に言えば、1時間かからない作業で検索結果の見た目を整えられます。自社サイトのアドレス欄に/favicon.icoと打つところから始めてみてください。