Google検索の地球マークを変える方法｜ファビコンの作り方・設定手順
Google検索に表示される地球マークを変更するには？ファビコンとは何か、ChatGPTでの画像作成からCodexを使った設定方法、検索結果への反映確認まで初心者向けに解説します。自分で作ったWebサイトが検索結果に出てきたとき、ちょっと感動しました。
ただ、サイト名の横に表示されていた小さな地球マークが気になりました。ほかのサイトにはロゴやオリジナルの絵が付いているのに、自分のサイトは地球マーク。
「これ、変えられないのかな？」
これが今回の始まりです。まず調べてみると、この小さなアイコンは「ファビコン」というものだとわかりました。そこで、AIに相談しながら自分のサイトにも設定してみることにしました。
ちなみに、私が気になった「地球マーク」はこんなものです。
そもそも、ファビコンとは？
ファビコン（Favicon）とは、Webサイトの「小さな看板」のようなアイコンです。検索結果のほか、ブラウザのタブやブックマークなどにも表示されます。
設定したからといって検索順位が上がるわけではありませんが、サイトを見分けやすくなり、少しだけ自分のサービスらしさも出ます。
作業の流れは4ステップ
ファビコンの作成から設定まで、大まかな流れは次のとおりです。
- デザインを決める：サイトに合うマークを考える
- 画像を用意する：ファビコン用の正方形の画像を作る
- サイトに設定する：画像を配置し、読み込み設定を加える
- 公開して確認する：ブラウザと検索結果をチェックする
AIにできること、人がやること
AIに任せられることは、デザイン案の作成、画像の生成・調整、必要なコードの修正、設定のチェックなどです。
一方で、自分でやることは、好きなデザインを選ぶこと、AIに依頼すること、公開を判断すること、最後に表示を確認すること。
作業自体はAIが手伝ってくれますが、「どんなアイコンにするか」「本当にこれでいいか」を決めるのは自分です。
実際の設定手順
① ChatGPTでデザインを考える
まずはChatGPTに、例えばこんなふうにお願いできます。
小学生向けの学習サイトのファビコンを作りたい。小さく表示してもわかりやすい、シンプルで親しみやすいデザインを提案して。
ファビコンは小さく表示されるので、細かい文字や複雑なイラストより、ひと目でわかるマークが向いています。
② アイコン画像を用意する
気に入ったデザインを、正方形のPNGなどの画像ファイルにします。例えば512×512ピクセルで作っておけば、さまざまなサイズに加工しやすくなります。
画像形式やサイズの調整も、AIに相談できます。
③ CodexでWebサイトに設定する
画像ができたら、Webサイトのファイルに追加します。HTMLなら、例えば次のような設定を使います。
<link rel="icon" href="favicon.png">
意味は「この画像をサイトのアイコンとして使う」という指定です。
ただし、画像の置き場所やコードの書き方はサイトの構成によって変わります。私の場合はGitHub PagesやVercelで公開しているので、Codexに既存のファイルを確認してもらいながら設定を進めました。
④ 公開して表示を確認する
まずはブラウザのタブなどに、設定したアイコンが出るか確認します。
ここで注意したいのが、ブラウザで表示されても、Googleなどの検索結果にすぐ反映されるとは限らないこと。検索エンジンが変更を読み取るまで時間がかかる場合があります。
またGoogle検索では、ファビコンの表示は基本的にホスト名単位です。私のブログのようにGitHub Pagesのサブフォルダ（/ai-blog/）で公開している場合、設定場所やURL構造にも注意が必要です。
設定やガイドラインを満たしていても、Google検索でファビコンが表示されることが保証されるわけではありません。
設定したあと、どうなった？
ファビコンを作ってサイトに設定したあと、検索結果を改めて確認してみました。
すると、「きみだけドリル」はオリジナルのアイコンに変わっていました！
一方、画像①のとおり、ブログ記事はまだ地球マークのままです。反映に時間がかかっているのか、設定やURL構造に別の要因があるのかは、もう少し確認が必要そうです。
最初に地球マークが気になったところから、調べて、作って、設定して、ようやく一部が反映されました。小さなアイコン一つでも、意外と奥が深いものです。
おわりに
AIのおかげで、デザイン作成からサイトへの設定まで、プログラミング初心者でも挑戦しやすくなりました。
ブログの訪問者は相変わらず多くありません。それでも、いつか検索してくれた人に「このアイコン、見たことある」と思ってもらえたら嬉しいですね。
参考：Google検索セントラル「検索結果用のファビコンの設定」
掲載画像は後日確認した検索結果です。表示内容は時間や検索環境によって変わる場合があります。