こんにちは。
三重県でホームページ制作をしているMYコンサルティング株式会社、代表の宮本です。
当社は初期費用0円・月額2,880円からのHP制作を行っていて、この記事も、お客様のサイトでファビコン設定を日々行っている制作の現場から書いています。
ファビコンとは、ブラウザのタブや検索結果に表示される、サイトの「小さなアイコン」のことです。
英語の favorite icon（お気に入りアイコン）を縮めた言葉で、「サイトの顔写真」のようなものだと考えてください。
この記事では、実際の表示例を見ながら、ファビコンの役割・おすすめのサイズ・無料での作り方（Canva／ChatGPT／変換ツール）・HTMLとWordPressそれぞれの設定方法・うまく表示されない時の対処法まで、専門知識がない方にもわかるように解説します。
ファビコンはどこに表示される？
まず、実物を見るのが一番早いです。
当社サイトを開いたときのブラウザのタブがこちら。
タブをたくさん開くとページ名は隠れてしまいますが、ファビコンだけは最後まで残ります。
タブが並んだときに自分のサイトを見つけてもらえるかどうかは、実はこの小さなアイコンにかかっています。
次に、Googleの検索結果。
パソコンでもスマートフォンでも、サイト名の横にファビコンが表示されます。
そしてスマートフォン。
サイトを「ホーム画面に追加」してもらったとき、アプリと並んであなたのサイトのアイコンが置かれます。
このほか、ブックマーク（お気に入り）の一覧、スマホブラウザのタブ切り替え画面、履歴の一覧など、思っている以上に多くの場所でファビコンは使われています。
ファビコンを設定すべき3つの理由
1. 信頼感が変わる
検索結果で初期アイコン（地球儀マーク）のままのサイトは、それだけで「ちゃんと管理されていないサイトかも」という印象を与えます。
名刺に顔写真がないようなもので、小さな部分ですが確実に見られています。
実際、当社にご相談いただくお客様のサイトを拝見すると、ファビコン未設定のまま何年も運用されているケースがかなり多いです。
逆に言えば、設定するだけで競合と差がつく部分でもあります。
2. リピーターに見つけてもらいやすくなる
一度訪れた人がタブやブックマークからサイトに戻るとき、頼りにするのはファビコンです。
お店の看板と同じで、「あの青いMのやつ」と覚えてもらえます。
タブを10枚20枚と開く人は珍しくないので、そこで埋もれないことには実利があります。
3. Googleが表示を推奨している
Googleは検索結果にファビコンを表示する仕様で、サイズなどのガイドラインも公開しています。
設定しても検索順位が直接上がるわけではありませんが、検索結果でのクリック率（選ばれやすさ）に影響する要素です。
おすすめのサイズと形式【早見表つき】
ファビコンは表示される場所によって使われるサイズが違います。
まず全体像がこちらです。
| サイズ | ファイル名の例 | 使われる場所 |
|---|---|---|
| 16×16px | favicon-16.png | ブラウザのタブ |
| 32×32px | favicon-32.png | ブックマーク・高解像度のタブ |
| 48×48px以上 | favicon.ico | Google検索結果（48pxの倍数を推奨） |
| 180×180px | apple-touch-icon.png | iPhoneのホーム画面アイコン |
| 192×192px / 512×512px | icon-192.png / icon-512.png | Androidのホーム画面・PWA |
迷ったらこれだけ覚えてください：
元画像は正方形の512×512pxで1枚作る。
あとはツールで自動的に各サイズへ縮小するだけ。
当社で制作するホームページも、この方法で16／32／180pxの3点セット＋favicon.icoを標準設置しています。
形式は、昔ながらのico形式（複数サイズを1ファイルに同梱できる）とPNG形式の併用が現在の主流です。
デザインの注意点はひとつだけ。
16pxまで縮むと細かい文字や複雑な図柄は完全に潰れるので、「要素は1つ、単純なほど良い」と覚えてください。
ファビコンの作り方【王道3パターン】
元になる正方形画像の作り方は、大きく3つあります。
どれも無料でできます。
方法1. Canvaで自作する（ロゴがある人・自分で整えたい人）
無料デザインツールのCanvaで「512×512px」のカスタムサイズを作成し、ロゴを配置するか、頭文字＋背景色でデザインします。
手順は次のとおりです。
- Canvaで「デザインを作成」→「カスタムサイズ」→ 512×512pxを指定
- 背景をブランドカラーで塗り、ロゴ画像または店名の頭文字1〜2文字を大きく配置
- PNG形式でダウンロード
文字を使う場合は、画面いっぱいまで大きく。
「小さく表示された状態」をスマホで一度確認するのがコツです。
方法2. ChatGPTやGeminiに生成してもらう（ロゴがない人）
画像生成ができるAI（ChatGPTやGemini）に頼むと、たたき台が数十秒で手に入ります。
プロンプト（指示文）の例をそのまま置いておきます。
ウェブサイトのファビコン用アイコンを作ってください。
・正方形、シンプルなフラットデザイン
・「M」の一文字をモチーフに（←店名の頭文字に変更）
・背景色は紺色、文字は白（←ブランドカラーに変更）
・16pxに縮小しても判別できる、要素の少ないデザイン
・文字やロゴ以外の装飾は入れない実は当社がホームページを制作するときも、ロゴのないお店にはAIでアイコン案を複数生成し、お客様に選んでいただく進め方をよく使います。数案を見比べて選ぶだけなので、デザインの知識がなくても失敗しません。
方法3. ロゴ画像から変換ツールで一発生成（いちばん早い）
すでに正方形に近いロゴ画像があるなら、favicon.ioやRealFaviconGeneratorといった無料の変換ツールにアップロードするだけで、必要なサイズ一式（ico含む）を自動で書き出してくれます。
作業時間は数分です。
設定方法（HTML／WordPress／制作会社に任せている場合）
HTMLで直接設定する場合
書き出したファイルをサイトの一番上の階層（ルート）にアップロードし、HTMLの<head>内に次のように書きます。
そのままコピーして使えます。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">WordPressの場合（コード不要・3クリック）
WordPressなら管理画面だけで設定できます。
- 管理画面の「外観」→「カスタマイズ」→「サイト基本情報」を開く
- 「サイトアイコン」の項目で、用意した512×512pxの画像をアップロード
- 「公開」を押して保存
これだけで、タブ・検索結果・スマホ用まで自動で出し分けてくれます。
WordPressは512×512px以上の正方形画像を推奨しているので、方法1〜3で作った元画像をそのまま使えばOKです。
制作会社に任せている場合
ホームページを制作会社に依頼している場合は、ここまでの作業を自分でやる必要はありません。
「ファビコンを設定してほしい」と一言伝えれば大丈夫です。
作った画像ファイルを渡せばスムーズですし、画像がなくても相談すれば作ってくれるはずです（当社の場合は最初から標準で入っています）。
表示されない・変わらない時の対処法
「設定したのに表示されない」というご相談は意外と多く、原因はほぼ次の3つです。
- ブラウザのキャッシュ（詳しくはキャッシュの解説記事へ）：ブラウザが古いアイコンを覚えています。Windowsは Ctrl+F5、Macは Cmd+Shift+R の「スーパーリロード」を試してください。それでも変わらなければ、ブラウザの履歴からキャッシュ削除を
- ファイルの置き場所・パスの間違い：HTMLに書いたファイル名と、実際にアップロードした場所が一致しているか確認します。ブラウザで「https://あなたのドメイン/favicon.ico」を直接開いてみて、画像が表示されるかチェックするのが確実です
- 検索結果への反映待ち：Google側の更新には数日〜数週間かかります。タブに表示されていれば設定は成功しているので、気長に待ちましょう
よくある質問
ファビコンの設定に費用はかかりますか？
無料ツールを使えばかかりません。
制作会社に依頼している場合も、基本料金内で対応してくれることがほとんどです。
ロゴがなくても作れますか？
作れます。
店名の頭文字をアイコン化するのが定番で、CanvaでもChatGPTなどのAIでも作成できます。
WordPressでもこの記事の方法で設定できますか？
WordPressの場合はもっと簡単で、「外観」→「カスタマイズ」→「サイト基本情報」から512×512pxの画像をアップロードするだけです。
コードを書く必要はありません。
変更したのに表示が変わりません
ほとんどはキャッシュが原因です。
スーパーリロードを試し、検索結果は数日待ってください。
スマートフォンにも表示されますか？
表示されます。
iPhoneの「ホーム画面に追加」用には180×180pxのapple-touch-iconを別途用意しておくと万全です。
まとめ
ファビコンは、サイトの中で一番小さいのに、タブ・ブックマーク・検索結果・スマホのホーム画面と、一番いろいろな場所に顔を出すパーツです。
- 元画像は正方形512×512pxを1枚。単純なデザインほど良い
- 作り方はCanva／ChatGPTなどのAI／変換ツールの3パターン、すべて無料
- WordPressなら管理画面から3クリック、HTMLならコピペ4行
- 変わらないときは、まずキャッシュを疑う
なお、SNSやLINEで共有されたときに出る「大きな画像カード」の設定はOGPの解説記事で詳しく書いています。ファビコンとセットで設定しておくと、サイトの見た目の信頼感が揃います。
一度設定すれば終わりのわりに効果が長く続く、コストパフォーマンスの良い改善です。
まだ地球儀マークのままなら、今日直しておく価値があります。
「自分のサイトがどうなっているか分からない」「直し方が分からない」という方は、お気軽にご相談ください。
現状を無料で確認いたします。