ファビコンとは、ブラウザのタブやブックマーク、Google検索の結果などに表示されるサイトの小さなアイコンのことで、正方形の画像を用意し、WordPressなら「サイトアイコン」に登録、HTMLなら head の中に link タグで指定すれば設定できます。小さく表示されるため、ロゴをそのまま縮めるより、形を単純にした専用の画像を作るのがコツです。この記事では、必要なサイズと形式、作り方の手順、WordPressとHTMLでの設定方法、表示されないときの対処までを順番に説明します。
ファビコンが表示される場所と役割
ファビコンは、訪問者が複数のタブやブックマークの中から自社のサイトを見分けるための目印です。Google検索の結果にもサイト名の横に表示されるため、検索結果での見つけやすさにも関わります。
主な表示場所
- ブラウザのタブ、アドレスバーの周辺
- ブックマーク（お気に入り）の一覧
- Google検索の結果（サイト名の横）
- スマートフォンのホーム画面に追加したときのアイコン
- ブラウザの履歴やよく見るサイトの一覧
ファビコンがないとどうなるか
ファビコンを設定していないと、ブラウザの標準のアイコン（地球のマークや白い紙のアイコンなど）が表示されます。サイトの表示そのものに問題はありませんが、タブやブックマークで見分けにくく、作りかけのサイトのような印象を与えることがあります。
必要なサイズと形式
ファビコンは、用途ごとにいくつかの形式とサイズを用意するのが一般的です。すべてを用意できなくても、最低限「正方形で十分に大きいPNG」と「favicon.ico」があれば、多くの環境をカバーできます。
形式ごとの役割
| 形式・指定 | 主な用途 | サイズの目安 |
|---|---|---|
| favicon.ico | 古いブラウザを含めた基本のファビコン | 16×16、32×32、48×48を1つのファイルにまとめる |
| PNG（rel=”icon”） | ブラウザのタブ、Google検索の結果 | 48×48より大きい正方形（96×96、192×192など） |
| SVG（rel=”icon”） | 対応ブラウザでどの解像度でもくっきり表示 | ベクター形式なのでサイズの指定は不要 |
| apple-touch-icon | iPhone・iPadでホーム画面に追加したとき | 180×180がよく使われる |
| Webアプリマニフェストのアイコン | Androidでホーム画面に追加したとき | 192×192と512×512がよく使われる |
Google検索で表示するための条件
Google検索セントラルの公式ドキュメントでは、ファビコンは正方形（縦横比1:1）で8×8ピクセル以上が必要で、48×48ピクセルより大きいものが推奨されています。サポートされる形式として BMP、GIF、ICO、PNG、JPEG、PPM、TIFF が挙げられています。SVGだけで指定すると検索結果に使われない可能性があるため、PNGやICOも併せて指定しておくと安心です。条件は更新されることがあるので、最新の内容はGoogle検索セントラルのファビコンのページでご確認ください。
元になる画像は大きめに作る
縮小は簡単ですが、小さな画像を拡大するとぼやけます。元の画像は512×512ピクセル以上の正方形で作っておき、そこから各サイズを書き出すのが効率的です。WordPressのサイトアイコンも、正方形で512ピクセル以上の画像が求められます。
ファビコンの作り方
ファビコン作りは、デザインを決める工程と、各形式に書き出す工程に分かれます。デザインは16ピクセル前後の大きさでも判別できるかどうかを基準にします。
ステップ1｜ロゴから使う部分を決める
横長のロゴをそのまま正方形に収めると、文字が小さすぎて読めません。ロゴマーク（シンボル）がある場合はその部分だけを、文字だけのロゴなら頭文字1〜2文字を使うのが一般的です。細い線や小さな文字は、縮小すると潰れるため省きます。
ステップ2｜正方形の画像を作る
デザインツールで512×512ピクセルの正方形のキャンバスを作り、マークを配置します。上下左右に少し余白を取ると、角が丸く切り抜かれる環境でも欠けにくくなります。背景を透過にするか、色を敷くかもここで決めます。
ステップ3｜小さいサイズで見え方を確かめる
作った画像を16×16や32×32に縮小して表示し、何の形か判別できるかを確かめます。ブラウザのタブは背景が白の場合も暗い色の場合もあるため、ライトモードとダークモードの両方で見え方を確認します。透過の背景で黒いマークだけを置くと、ダークモードで見えなくなることがあります。
ステップ4｜各形式に書き出す
PNGは必要なサイズごとに書き出します。ICOは、画像編集ソフトの書き出し機能や、PNGからICOへ変換するツールで作成します。ICOは複数のサイズを1つのファイルにまとめられる形式なので、16・32・48ピクセルを含めておくと幅広い環境で表示が整います。
WordPressでファビコンを設定する方法
WordPressでは、ファビコンを「サイトアイコン」として登録します。登録した画像から、WordPressがファビコンやスマートフォン用のアイコンのタグを自動で出力するため、HTMLを書く必要はありません。
クラシックテーマの場合
管理画面の「外観」→「カスタマイズ」を開き、「サイト基本情報」の中にある「サイトアイコン」から画像を選んで「公開」を押します。画像は正方形で、縦横512ピクセル以上のものを用意します。
ブロックテーマの場合
ブロックテーマではカスタマイザーが表示されないことが多いため、サイトエディターで設定します。「外観」→「エディター」でヘッダーなどにある「サイトロゴ」ブロックを選び、ブロックの設定でロゴをサイトアイコンとしても使う指定ができます。WordPressのバージョンによっては「設定」→「一般」にサイトアイコンの項目がある場合もあります。メニューの場所はバージョンやテーマで異なるため、見つからない場合は使っているテーマの説明もご確認ください。
テーマによっては、テーマ独自の設定画面にファビコンの入力欄があります。サイトアイコンとテーマ独自の設定の両方に登録すると、タグが二重に出力されることがあるため、どちらか一方にそろえます。
HTMLでファビコンを指定する方法
WordPress以外のサイトや、静的なHTMLで作ったサイトでは、各ページの head の中に link タグを書いてファビコンを指定します。Googleのドキュメントでは、ホームページの head に link タグを置く方法が案内されています。
基本の書き方
ファイルをサイトの一番上の階層（ドメインの直下）に置いた場合、次のように書きます。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">1行目が基本のICO、2行目が対応ブラウザ向けのSVG、3行目が大きめのPNG、4行目がiPhone・iPad用のアイコンです。SVGを使わない場合は2行目を省きます。
rel の値の種類
Googleのドキュメントでは、ファビコンを指定する rel の値として icon、shortcut icon、apple-touch-icon、apple-touch-icon-precomposed が挙げられています。shortcut icon は古い書き方で、いまは icon を使えば十分です。
ファイルの置き場所の注意
ファビコンのファイルは、検索エンジンのクローラーが取得できる場所に置きます。robots.txt でファビコンのファイルや置き場所のフォルダへのアクセスを止めていると、Google検索で表示されません。また、Google検索で使われるファビコンは1つのサイト（ホスト名）につき1つで、サブディレクトリごとに別のファビコンを出すことはできません。
ファビコンが表示されないときのトラブル対処
ファビコンが表示されない原因の多くは、ブラウザのキャッシュ、指定の誤り、反映までの時間のどれかです。表示されない場所によって確認することが変わります。
ブラウザのタブに表示されない
ファビコンはブラウザに強く記憶されるため、差し替えても古いものが表示され続けることがあります。シークレットウィンドウや別のブラウザで開いて確かめ、新しいものが出ていればキャッシュの問題です。ファイルの URL を直接ブラウザで開き、画像が表示されるかも確認します。表示されない場合は、パスやファイル名の誤りが考えられます。
Google検索の結果に表示されない
Google検索のファビコンは、Googleがホームページをクロールしたときに更新されます。公式ドキュメントでは、反映には数日から数週間かかる場合があると説明されています。ホームページの head に link タグがあるか、ファイルが正方形で48×48ピクセルより大きいか、robots.txt でブロックしていないかを確かめたうえで、Search Console の URL 検査からホームページのインデックス登録をリクエストし、反映を待ちます。
スマートフォンのホーム画面だけ古いアイコンになる
ホーム画面に追加したアイコンは、追加した時点の画像が保存されることがあります。一度削除してから追加し直すと、新しいアイコンになります。apple-touch-icon を指定していない場合、iPhoneではページの縮小画像などが代わりに使われることがあります。
画像がぼやける・形が崩れる
小さい画像を拡大して使っている、正方形でない画像を登録している、のどちらかが多い原因です。512ピクセル以上の正方形で作り直し、各サイズを書き出し直します。
デザインで気をつけたいこと
ファビコンは、とても小さな面積でブランドを伝える要素です。制作の現場では、ロゴの細部にこだわるより、色と形の印象をはっきりさせたほうが、タブの中で見つけやすいファビコンになります。
色はブランドの基本色を1〜2色に絞る
色数が多いと、縮小したときに濁って見えます。ロゴの基本色を1〜2色に絞り、背景とのコントラストをはっきりさせます。
他の要素とそろえる
SNSのプロフィール画像やアプリのアイコンなど、ほかの場所で使っているアイコンと形や色をそろえると、どこで見ても同じ会社だと分かりやすくなります。ロゴを変更したときは、ファビコンの差し替えも忘れずに行います。
よくある質問
Q. ファビコンのサイズはいくつで作ればよいですか？
A. 元の画像は512×512ピクセル以上の正方形で作り、そこから必要なサイズを書き出すのがおすすめです。Google検索向けには48×48ピクセルより大きい正方形が推奨されています。
Q. ファビコンはICOとPNGのどちらで作ればよいですか？
A. 両方用意するのが確実です。favicon.ico で古い環境を含めて広くカバーし、PNG で高解像度の画面や検索結果向けに対応します。
Q. SVGのファビコンだけで大丈夫ですか？
A. SVGに対応していないブラウザや、Google検索のサポート形式に含まれていない点を考えると、SVGだけにするのはおすすめしません。ICOやPNGと併せて指定します。
Q. ファビコンはSEOに影響しますか？
A. ファビコンそのものが検索順位を左右するわけではありません。ただし検索結果に表示されるため、見分けやすいファビコンはクリックされやすさに関わります。
Q. ファビコンを変えたのに反映されないのはなぜですか？
A. ブラウザのキャッシュが残っているか、Google検索の場合は再クロールを待っている状態です。ブラウザはシークレットウィンドウで確認し、検索結果は数日から数週間ほど様子を見ます。
THREE D PLUS は大阪の Web 制作会社です。ホームページ制作から公開後の運用・改善までまとめてご相談いただけます。お問い合わせはこちら。
