ブラウザのタブに出る小さなアイコンを、どう作るか

1. 「タブに、知らないマークが出たままでした」

中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。

「パソコンでタブをいくつも開いていたら、うちのサイトだけ、よく分からない地球みたいなマークなんです。ほかの会社のタブにはちゃんとロゴが出ているのに。誰も気づいていないだけで、ずっとこのままだったんだと思います」

この話は、本当によく伺います。サイトの中身はきちんと作ってあるのに、ブラウザのタブの左端に出る小さな四角だけが、手つかずのままになっている。こういうサイトは少なくありません。

この小さなアイコンは、制作の現場では「ファビコン」と呼ばれています。お気に入りを意味する英語と、アイコンを合わせた言葉です。この記事では、ここから先は小さなアイコンと呼びます。

小さなアイコンは、指先ほどの大きさしかありません。それでも、何も設定していないと、見た人に「このサイトは作りかけなのかな」という印象を残します。逆に、きちんと決めてあれば、何枚も並んだタブの中で、貴社のサイトを見つける目印になります。

この記事で書くこと

• 小さなアイコンが出ている4つの場所
• 初期のままだと、なぜ「作りかけ」に見えるのか
• ロゴをそのまま縮めると潰れる理由
• マークだけ、頭文字1字など、小さくても読める形の選び方
• 背景色の決め方と、ロゴが無い会社の作り方
• 名刺やSNSのアイコンとそろえることと、変えたあとに時間がかかる理由

URLをLINEやSNSで送ったときに出る画像については LINEやSNSでURLを送ったときの「見え方」を整える に書きました。そちらでも小さなアイコンに少し触れましたが、この記事では、小さなアイコンだけに絞って作り方を順に書きます。

2. 小さなアイコンが出ている、4つの場所

まず、小さなアイコンがどこに出ているかを確かめます。思っているより、出る場所は多いです。

① ブラウザのタブ

いちばん目にする場所です。パソコンでサイトを開くと、画面の上に並んだタブの左端に出ます。タブの文字は、たくさん開くと短く切れて読めなくなります。そのとき、どのタブが何のサイトかを見分ける手がかりは、この小さなアイコンだけになります。何社ものタブを並べて見比べている人に、貴社のタブを見つけてもらえるかどうかが、ここで決まります。

② ブックマークと履歴

お気に入りに登録したときの一覧や、閲覧の履歴にも、同じアイコンが出ます。「あとで見返そう」と登録してくれた人が、似た名前の並ぶ一覧から貴社を探すときの目印です。

③ スマートフォンのホーム画面

スマートフォンでは、よく見るサイトをホーム画面に追加できます。追加すると、アプリと同じようにアイコンが並びます。

ここでは、タブよりずっと大きく表示されます。そして、専用のアイコンを用意していないと、ページの画面をそのまま縮めた絵や、端末が用意した既定の絵が出ることがあります。どう出るかは端末によって違いますが、ほかのアプリと並んだときに、貴社だけが整っていない姿になります。予約のページや取引先専用のページをお持ちの会社では、ここから毎回開いている方もいます。

④ 検索結果

Googleの検索結果では、サイトの名前の横に、小さなアイコンが表示されることがあります。スマートフォンで検索したときに、特に目に入りやすい位置です。

同業他社のアイコンと縦に並ぶので、貴社だけが既定のマークのままだと、読まれる前から一歩引いた印象になります。

なお、検索結果にアイコンを出すかどうかは、検索エンジンの側が決めています。こちらでできるのは、出てもよい形を用意しておくところまでです。検索結果の見え方そのものの直し方は 検索結果に出ている自社の見え方を、直す にまとめてあります。

大きさが、場所によってまったく違う

4つを並べると、タブではとても小さく、ホーム画面ではかなり大きく出ることが分かります。ですから、小さなアイコンには「小さくても潰れない」ことと「大きく出ても間が抜けない」ことの両方が要ります。後半で書く形の選び方は、この2つを満たすためのものです。

3. 初期のままだと、「作りかけ」に見える

小さなアイコンを何も設定していないと、何が出るのでしょうか。よく見るのは、ブラウザの既定の地球のような絵や、白紙を思わせる四角です。サイトを作ったツールのマークや、契約しているサーバーの会社のマークがそのまま出ていることもあります。タブの左端が、空いたままのこともあります。

どれも、サイトが壊れているわけではありません。ただ、見た人には「手が入っていない場所がある」と伝わります。

細かいところほど、手入れの跡が見られる

読む人は、小さなアイコンを意識して見ているわけではありません。ただ、なんとなく目には入っています。ほかの会社のタブには社名のマークが出ていて、貴社のタブだけ既定の絵だと、「この会社のサイトは、途中で止まっているのかな」という感覚が残ります。

これは、お店の入口の小さな表札に似ています。表札が無くても、店の中身は変わりません。でも、営業しているのかどうか、少しだけ迷わせます。

社名やロゴを変えたのに、古いまま

もう1つよくあるのが、社名やロゴを変えたのに、小さなアイコンだけが古いまま残っているケースです。サイトの左上のロゴは新しくなったのに、タブには古いマークが出ている。小さすぎて、変えた本人も気づかないことが多いです。

変えるときの直す場所の一覧に、小さなアイコンも入れておいてください。社名や所在地が変わったときに直すところは 移転・社名変更・代表交代のときに、サイトで直すところ にまとめてあります。

4. ロゴをそのまま縮めると、潰れる理由

既定のマークをやめるとなると、まず思いつくのは「ロゴを入れればいい」ということです。ところが、ロゴをそのまま縮めて入れると、たいていうまくいきません。理由は4つあります。

① 横長のロゴは、正方形に入らない

小さなアイコンは正方形です。社名の文字が横に並んだロゴを入れようとすると、横幅に合わせて縮めることになります。上下には大きな余白が空き、肝心の文字は豆粒のようになります。名刺や看板のロゴは横長に作られていることが多いので、どうしてもこうなります。

② 細い線と小さな文字は、消える

ロゴの中の細い線、小さく添えた英字、社名の下の一言。これらは、小さく縮めると線がかすれたり、隣の線とくっついたりして読めなくなります。タブの中は、名刺よりずっと小さい世界です。

③ 色が多いと、にじんで見える

色を何色も使ったロゴは、小さくすると色と色の境目がにじんで、全体がぼんやりした塊に見えます。小さな世界では、色は1色か2色に絞ったほうが、形がはっきりします。

④ 絵柄が細かいと、何の絵か分からない

建物や道具、動物などを細かく描いたマークは、小さくすると何が描いてあるのか分からなくなります。大きく見れば立派な絵でも、指先ほどの大きさでは、ただの点の集まりです。

縮めるのではなく、小さい版を別に作る

ここで考え方を変えます。ロゴを縮めるのではなく、小さい場所のための版を別に用意するのです。

看板では社名まで入った形を使い、アプリのアイコンでは記号だけ、という使い分けはよく見かけます。中小企業でも同じことができます。ロゴの本体はそのまま残して、小さい場所では一部だけを使う。それだけで、ロゴを作り直さずに済みます。

5. 小さくても読める形を、1つ選ぶ

では、小さい版として何を使うか。選び方を順に書きます。

ロゴにマークがあるなら、マークだけを使う

ロゴが「記号＋社名の文字」の組み合わせになっているなら、記号の部分だけを取り出すのがいちばん素直です。名刺や看板で見ているのと同じ記号なので、見る人の記憶にもつながります。

ただし、記号が細かい絵柄の場合は、小さくすると潰れます。その場合は次の頭文字の形に切り替えるか、線を太くした小さい版を作ってもらうことを考えます。形を変える場合は、ロゴを作った人に相談してください。勝手に線を太くすると、ロゴの約束ごとから外れることがあります。

マークが無いなら、頭文字を1字

ロゴが社名の文字だけでできている会社や、そもそもロゴが無い会社は、社名から1字を選ぶ形が収まりやすいです。選ぶ1字は、次の順に考えると決めやすくなります。

• 社名のいちばん最初の字 ― もっとも自然な選び方です。たとえば「大野工業」なら「大」
• いちばん特徴のある字 ― 最初の字が「日」や「中」のようによくある字なら、2字目以降で目立つ字を選ぶ手もあります
• 英字の頭文字 ― 名刺や看板に英字の表記が出ているなら、そろえやすい選び方です
• 避けたい字 ― 「株」「有」「社」のように、会社の種類を表す字です。どの会社でも同じになってしまいます

画数の多い漢字は潰れやすいので、ひらがなや英字のほうが読みやすいこともあります。候補を2つか3つ作って、実際の小ささで見比べるのがいちばん早い決め方です。

太く、真ん中に、余白をとって

形が決まったら、置き方です。守ることは3つだけです。細い書体は小さくすると消えるので、本文よりかなり太い書体を選びます。正方形の真ん中に置き、端に寄せません。そして、四角いっぱいに詰めずに、周りに少し余白を残します。ホーム画面では、端末の側で角が丸く切り取られることがあるためです。

確かめ方は、実際の小ささで見ること

作った形がよいかどうかは、実際に小さく表示して見るのがいちばん確かです。大きな画面で作っているときの印象は、あてになりません。

• タブに出して、ほかのタブと並べる ― 一目で貴社のタブを見つけられるか
• 少し離れて見る ― 画面から身を引いて、形が見分けられるか
• ホーム画面に追加する ― ほかのアプリの間で、間が抜けていないか、角が欠けていないか

この3つで違和感が無ければ、まず十分です。

6. 背景色と、ロゴが無い会社の作り方

形の次は、背景の色です。ここは見落とされがちですが、見え方を大きく左右します。

背景を透明にするか、色で塗るか

小さなアイコンは、背景を透明にすることも、色で塗った四角にすることもできます。迷ったら、色で塗った四角に、白い文字やマークを置く形をお勧めします。表示される場所の背景を、こちらでは選べないからです。

• タブの色は、人によって違う ― ブラウザの設定で、タブの帯が白い人もいれば、黒っぽい人もいます。暗い画面の設定にしている人も少なくありません
• 透明だと、背景に溶ける ― 黒いマークを透明な背景で作ると、暗いタブの上では見えなくなります。白いマークなら、白いタブの上で消えます
• ホーム画面では、勝手に色が敷かれることがある ― 透明な部分に端末の側で白や黒が敷かれ、思っていた見え方にならないことがあります

色で塗った四角にしておけば、どの背景の上でも、形はそのまま見えます。

色は、すでに使っている色から選ぶ

背景の色は、新しく選ばないでください。名刺、看板、社用車、制服など、すでに使っている会社の色から拾います。いつも見ている色と同じなら、それだけで「あの会社だ」とつながります。はっきりした色が無い場合は、サイトのメインの色に合わせます。色の決め方そのものは ホームページの色と書体を、どう決めるか に書きました。

上に置く文字やマークとは、明るさにはっきり差をつけてください。濃い背景に白い文字、薄い背景に濃い文字。中間の色どうしを組み合わせると、小さくしたときにぼやけます。

ロゴが無い会社は、色と1字で作れる

ここまで読んでいただくと分かるとおり、ロゴが無くても、小さなアイコンは作れます。必要なのは、会社の色を1つと、社名から選んだ1字だけです。ロゴが無い会社のサイト全体の組み方は ロゴが無い会社の、ホームページ にまとめてあります。

無料の素材や、どこかのマークは使わない

1つだけ、避けてほしいことがあります。無料で配られているアイコン素材や、検索で見つけた画像を、そのまま小さなアイコンに使わないでください。

同じ素材を使っている会社がほかにもあり得ますし、素材によっては、会社の目印として使うことが認められていない場合もあります。何より、目印として役に立ちません。貴社の色と貴社の1字で作ったほうが、ずっと貴社らしく見えます。

7. 名刺・SNSとそろえることと、変えたあとの待ち方

小さな四角は、ほかにもたくさんある

小さなアイコンと同じような「正方形の小さな目印」は、サイトの外にもたくさんあります。InstagramやFacebookなどSNSのプロフィールの画像、LINEの公式アカウントのアイコン、Googleビジネスプロフィールのロゴ。

これらと、ホームページの小さなアイコンを、同じ色、同じ形でそろえてください。見る人は、サイトもSNSもGoogleマップも、同じ会社として行き来しています。場所ごとに目印が違うと、そのたびに「同じ会社かな」と確かめる手間が生まれます。

SNSの画像は丸く切り取られることが多いので、真ん中に寄せて余白をとっておくと使い回せます。

名刺の裏や封筒の隅のように、ロゴの本体を置くほどの場所が無いところに小さい版を使うと、紙とサイトの目印もつながります。決めた色と形は、社内の表記の決まりごとを書いた紙に書き足しておいてください。社名や住所の表記をそろえる紙の作り方は ホームページと名刺・封筒で、書いてあることが違う に書きました。

制作会社に渡すのは、正方形の元のデータ

画像の細かい書き出しの仕様は、制作会社に任せて構いません。貴社が用意するのは、次の2つだけです。

• 正方形の、大きめの元のデータ ― 小さく作ったものを大きくすることはできませんが、大きなものは小さくできます
• 色の指定 ― 名刺や看板の色と同じであることを伝えます。印刷会社やロゴを作った人から、色の番号を聞いておくと話が早いです

そのうえで、「タブ用と、スマートフォンのホーム画面用の両方を設定してください」と一言添えてください。タブ用だけを設定して、ホーム画面に追加したときの姿が抜けていることがよくあります。

変えても、すぐには変わらないことがある

ここが、いちばん質問をいただくところです。小さなアイコンを差し替えたのに、自分の画面ではまだ古いまま、ということがよく起きます。ブラウザが、一度読み込んだアイコンをしばらく覚えておく仕組みを持っているためです。

• ブラウザのタブ ― 時間がたつと新しいものに変わることが多いです。急ぐときは、別のブラウザや、履歴を残さない画面で開くと確かめられます
• ブックマークとホーム画面 ― 登録した時点のアイコンが残っていることがあります。いったん削除して登録し直すと変わります
• 検索結果 ― 検索エンジンが次にサイトを読みに来たときに変わります。いつ変わるかは、こちらでは決められません

何度も差し替えると、どれが出ているのか分からなくなります。差し替えたら、別のブラウザで新しいアイコンが出ていることを確かめて、あとは待つ。これがいちばん落ち着いたやり方です。

小さなアイコンは、検索の順位を上げるためのものではありません。見た人に、会社を見分けてもらうためのものです。

8. 雄喜晃の伴走：小さなアイコンまで、公開前に用意します

私たち雄喜晃のホームページ制作では、小さなアイコンを、サイトを作るときに一緒に用意します。既定のマークのまま公開することはしません。

私たちがやること

• 手元にある色と形を確かめる ― 名刺、看板、SNSのアイコンを見せていただき、すでに外に出ている会社の色と形から始めます
• 小さい版の形を決める ― ロゴにマークがあればマークだけを、無ければ社名から選んだ1字を、会社の色の四角に置きます。候補を並べて、実際の小ささで見ていただきます
• タブ用とホーム画面用の両方を設定する ― スマートフォンのホーム画面に追加したときの姿まで確かめます
• 差し替えたあとも確かめる ― ロゴや色が変わったときの差し替えも、月5回までの更新代行の中でご相談いただけます。新しいアイコンが出ているかを、こちらでも見ます

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。月5回までの更新代行も同じ月額の中に入っています。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

• ロゴの形を、こちらの判断で描き直すことはしません。マークの線を太くするなど、ロゴの約束ごとに関わる変更は、ロゴを作った方と貴社で決めていただきます
• 無料素材のマークで、それらしく埋めることもしません。素材の権利や商標の判断もいたしません。気になる場合は専門家にご確認ください
• 検索結果にアイコンが出ることや、順位が上がることのお約束もしません。何を出すかは検索エンジンの側が決めることだからです

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

「タブのマークが既定のままなのは分かっていたけれど、何を入れればいいか分からなかった」という方は、一度ご相談ください。

9. まとめ：小さな四角に、1つだけ置く

ブラウザのタブに出る小さなアイコンで押さえることは、5つです。

• 出る場所は4つ ― タブ、ブックマーク、スマートフォンのホーム画面、検索結果。とても小さくも、大きくも出る
• 初期のままだと、作りかけに見える ― 既定のマークやツールのマークは、手が入っていない場所があると伝えてしまう
• ロゴは縮めず、小さい版を作る ― マークがあればマークだけ、無ければ社名から1字
• 背景は会社の色で塗る ― 透明だと暗いタブで消える。色はすでに使っている色から拾う
• SNSや名刺とそろえて、変えたら待つ ― 同じ色と形で目印をつなぐ。差し替えても、古いものがしばらく残ることがある

小さなアイコンは、サイトの中でいちばん小さな場所です。それでも、並んだタブの中で貴社を見つけてもらうためのたった1つの目印でもあります。

まず、今日できること

貴社のサイトを、パソコンのブラウザで開いてください。そして、同業のサイトやふだん使っているサイトをいくつか、横のタブに並べて開いてみてください。貴社のタブを、一目で見つけられるかどうか。それだけで、直すかどうかが分かります。

並べてみて、自社のタブだけ目印が無いと気づいたという方は、一度ご相談ください。