ホームページを開いたとき、ブラウザのタブに並ぶ小さな画像に目が留まったことはないでしょうか。あの画像は「ファビコン」と呼ばれ、サイトごとに設定されています。
自分のホームページには何が表示されているのか、今の画像のままでよいのか。確認する場所と順番が分かれば、見直しは難しくありません。表示される場所、画像を選ぶ基準、設定後の確かめ方を順にまとめました。
ファビコンは小さな目印
ホームページをブラウザで開くと、タブのページ名の横に小さな画像が表示されることがあります。これがファビコンです。タブのほか、ブックマークの一覧やGoogleの検索結果でも、サイトを示す印として使われます。
表示はとても小さく、ホームページに載せている大きなロゴとは見え方が違います。文字の多いロゴをそのまま縮めると、読みにくくなることもあるでしょう。
ファビコンに求められるのは、細部まで伝えることよりも、いくつものページを開いているときに「これが自分のホームページ」と見分けられることです。
未設定のままでも、ホームページの本文は問題なく読めます。急ぐ必要はないので、まずは現在どの画像が表示されているかを確かめるところから始めてみてください。
見直しは目的の確認から始める
新しい画像を作る前に、ファビコンの目的をはっきりさせておくと候補を選びやすくなります。
ホームページを開いた人が、どのサイトのページかを見分けるための目印。そう考えると分かりやすいでしょう。
ロゴの一部分を使う方法もある
Googleの公式資料でも、検索結果を見た人がサイトを識別しやすいよう、サイトのブランドを視覚的に表す画像が勧められています。
ブランドといっても、凝ったデザインである必要はなく、事業名の頭文字、ロゴの一部分、普段から使っている図形などが候補になります。
横長のロゴを小さな正方形へ押し込むと、文字も図形も見えにくくなります。そのような場合は、ロゴの中から特徴のある一部分だけを取り出して使う方法があります。
現在のサイトとのつながりを見る
名刺、看板、SNS、ホームページで共通して使っている色や形があれば、候補を選ぶ手がかりになります。すべての媒体で同じ画像にそろえなくても大丈夫です。
小さな表示に合わせて、要素を減らした形にしてもかまいません。
あわせて見ておきたいのが、以前の事業名や、終了したサービスを表す画像が残っていないかという点です。ホームページの内容と目印がかけ離れていると、訪れた人が別のサイトだと感じてしまうかもしれません。
ライフデザインアカデミーでは、見た目だけを先に変えるのではなく、何を案内するホームページなのかと結び付けてWeb上の目印を考えることを大切にしています。
現在の表示を3か所で確かめる
ファビコンが表示される場所は一つではありません。ブラウザのタブ、ブックマーク、検索結果の3か所を分けて見ると、現在の状態を整理できます。
ブラウザのタブを見る
最初に、普段使っているブラウザで自分のホームページを開き、ページ名が並ぶタブの近くに小さな画像があるかを見てください。
同じブラウザで別のサイトもいくつか開いておくと、自分のサイトを見分けやすいかどうかが分かります。どの画像も似た色に見えるときは、形で区別できるかにも目を向けてみましょう。
タブの形や画像の表示位置は、端末やブラウザの種類、画面の設定によって変わります。普段お使いの環境で、実際の見え方を確かめてください。
ブックマークでも見てみる
次に、確認用としてホームページをブックマークへ追加します。ファビコンはブックマークの一覧にも表示されるため、表示名が長いときでも、小さな画像が見分ける助けになります。
タブで見えた画像と同じものが出ているか、表示されない場所がないかをメモしておきましょう。
このブックマークは、今後の点検用に残しておいてもかまいません。追加や削除は端末側だけの操作なので、ホームページには影響しません。
検索結果は別に確認する
Googleの検索結果には、条件を満たしたファビコンが表示される場合があります。
表示するかどうかはGoogle側が判断するもので、公式資料でも、条件を満たせば必ず表示されるという保証はないと案内されています。
タブの表示と検索結果の表示は、別々の仕組みで動いています。タブに新しい画像が出ていても、検索結果は以前のままということもあります。検索結果だけを見て「設定に失敗した」と判断するのは早いでしょう。
確認するときは、事業名やホームページ名で検索し、サイト名の横に出ている小さな画像を見ます。検索順位のことはいったん脇に置き、画像だけに注目すると確認の目的がぶれません。
小さくしても分かる画像を選ぶ
候補を絞る軸は、正方形であること、形が単純であること、ホームページとのつながりが感じられることの3つです。
正方形を基本にする
Googleの公式ガイドには、検索結果に表示するファビコンの条件が示されています。主なものは次のとおりです。
| 項目 | Googleの案内 |
|---|---|
| 形 | 縦横比1対1の正方形 |
| 最小サイズ | 8×8ピクセル |
| 推奨サイズ | 48×48ピクセルより大きい画像 |
| 画像の場所（URL） | 頻繁に変えず、安定させる |
これはGoogleの検索結果に向けた条件です。ホームページ作成サービスへアップロードする画像については、サービスごとに推奨寸法が決められていることがあるので、そちらの公式案内を優先してください。
まずは正方形の画像を用意し、余白も含めた状態で小さく表示してみます。細い線や小さな文字を角に寄せていると、縮小したときに消えて見えることがあります。
要素を絞り、文字は読める量にとどめる
候補の画像を小さく表示して、何が残って見えるかを確かめてみてください。事業名をすべて入れるより、頭文字1つや単純な図形のほうが分かりやすい場合があります。
文字を使うなら、小さくしても判別できる量までにします。長い事業名や説明文を入れると、文字が模様のように見えてしまいます。
色だけに頼った画像は、似た色のサイトが並んだときに区別しにくくなります。輪郭や余白も含めて見ると、候補を比べやすいでしょう。
複数の案があるときは同じ大きさで横に並べ、拡大したときの美しさよりも、小さくして形がつぶれないかどうかを基準に選びます。
ロゴの文字を省くことに抵抗がある場合は、元のロゴはそのままにして、ファビコン専用の簡略版を用意するという考え方もあります。
色や形を元のロゴとそろえておけば、ホームページとのつながりも伝わります。
設定は作成サービスの案内で確認する
設定の操作は、利用しているホームページ作成サービスやテーマによって違います。共通する仕組みを軽く押さえたうえで、実際の手順はサービスの公式案内で確かめるのが確実です。
共通の仕組みを知っておく
ファビコンは、ホームページのHTMLに「このサイトのアイコンはこの画像です」と示す1行を加えることで設定されます。この1行は「linkタグ」と呼ばれ、Googleの公式資料でも同じ方法が案内されています。
コードを自分で書く必要があるかどうかは、サービスによります。仕組みだけでも知っておくと、制作担当者へ確認するときに話が通じやすくなります。
利用中のサービスで手順を確かめる
ホームページ作成サービスやテーマの中には、管理画面から画像を選ぶだけで設定できるものがあります。
項目の名前は「サイトアイコン」「ファビコン」「ブラウザアイコン」などさまざまです。公式ヘルプでは、次の点を確かめておきましょう。
- 設定項目の名前
- 推奨されている画像サイズ
- 使えるファイル形式
- 保存や公開の操作
画面や項目名は変更されることがあるので、古い解説記事の画面よりも、公式ヘルプの最新の案内を頼りにしてください。
制作会社や担当者が管理しているホームページの場合は、ご自身で設定を変える前に、現在の画像と変更したい理由を伝えて相談します。元の画像は残したまま、候補の画像を別に渡すと、確認がスムーズです。
変更前の情報を残す
変更する日、元の画像、候補の画像、確認したページを簡単にメモしておくと、元へ戻したくなったときに、どの画像だったかをすぐ探せます。
画像のファイル名も、後から見分けられるものにしておきましょう。同じ名前の画像を何度も差し替えると、どの画像が表示されているのか判断しにくくなります。
Googleのガイドでも、ファビコンのURLは頻繁に変えず、安定させるよう求められています。何度も画像や場所を変えるより、候補をよく確かめてから一度で整えるほうが、落ち着いて進められます。
公開後は表示場所ごとに確認する
設定が済んだら、1台の端末、1つの画面だけで終わりにせず、場所を分けて表示を確かめます。
まずホームページを開く
公開中のホームページを新しく開き、トップページに加えて、サービス案内や問い合わせなど同じサイト内のページも見てみます。
Google検索では、1つのサイトに1つのファビコンが対応し、サイト内のページ全体に適用される仕組みです。ページごとに別の画像を用意する必要はありません。
表示された画像が候補と同じか、以前の画像のままか、何も表示されていないか。この3つのどれに当たるかを記録します。
別の環境でも一度見る
可能であれば、スマートフォンとパソコン、または2種類のブラウザで確認します。端末によって表示の位置や大きさは変わるため、見るポイントは次の4つに絞ると進めやすいでしょう。
- 小さな画像が表示されているか
- 予定した画像と同じか
- 縮小されても形を見分けられるか
- ページ名やサイトの内容と大きくずれていないか
確認した端末と日付を1行残しておけば、後日表示が変わったときに、以前どこまで確かめたかが分かります。
検索結果は時間を置いて見る
Googleが新しいファビコンの情報を読み取り直して反映するまでには、数日から数週間かかる場合があると説明されています。
設定した直後に検索結果が変わっていなくても、あわてなくて大丈夫です。まずブラウザでホームページ側の表示を確かめ、検索結果は日を置いてから見直してください。
検索結果に表示されるには、Googleの巡回プログラム（Googlebot）がホームページとファビコンの画像を読み取れる状態であることも条件です。
専門的な設定が関わる部分なので、気になる場合は制作担当者へ確認を依頼しましょう。
すぐ変わらないときは順番に切り分ける
表示が変わらない原因は、設定そのもの、公開の状態、反映までの時間のどこかにあります。順番に確かめていけば、やみくもに画像を変えずに済みます。
設定した場所を確かめる
最初に戻るのは、利用中サービスの設定画面です。候補の画像が選ばれているか、保存や公開の操作が完了しているかを見ます。
別のホームページやテスト用の環境を編集していた、ということもあります。複数のサイトを管理している場合は、サイト名と公開URLを並べて確かめると安心です。
ホームページ側と端末側を分ける
1つのブラウザだけ以前の画像が残っているなら、別の端末やブラウザでも開いてみてください。
どの環境でも同じ表示ならホームページ側、特定の環境だけ違うなら表示する端末側に原因がある、と整理できます。
この段階で画像を何度も差し替えると、どの画像を確認しているのか分からなくなってしまいます。差し替えは、原因の見当がついてからにしましょう。
確認日、端末、ブラウザ、表示された画像を短くメモしておくと、制作担当者へ相談するときに役立ちます。画面の写真を送る場合は、個人情報や管理画面のパスワードなどが写り込んでいないかを確かめてください。
検索結果だけなら待つ選択もある
ブラウザのタブには新しい画像が出ていて、検索結果だけが以前のままなら、Googleの読み取りと反映を待っている段階と考えられます。
数週間たっても気になる場合は、画像が正方形になっているか、ホームページが公開状態か、Googleが読み取れる設定になっているかを、制作担当者と一緒に確認します。
ファビコンは、訪れた人がサイトを見分けるための目印です。検索順位とは切り離して、見分けやすさを基準に整えていきましょう。
まとめ
ファビコンは、ブラウザのタブやブックマークなどでホームページを見分けるための小さな目印です。見直しは次の順で進めます。
- 現在どの画像が表示されているかを確認する
- 小さくしても形が分かる正方形の画像を選ぶ
- 利用中サービスの公式手順で設定する
- 公開後は表示場所を分けて確かめ、検索結果は日を置いて見直す
ライフデザインアカデミーでは、プロフェッショナル講師による各種講座を開講しています。対面講座からオンライン講座まで、学習環境に合わせて受講できます。
→ 講座一覧とお申し込みはこちら
上記に掲載していない限定講座（非公開講座）も定期的に開講していますので、学びたいことのご相談はお問い合わせよりお気軽にご連絡ください。
