サイト公開前の最終確認で抜けやすい、ファビコンのサイズと文字色のコントラスト

会社や店舗のWebサイト、社内向けのページを公開する直前。本文や画像の確認は済んでいても、ブラウザのタブに表示される小さなアイコンや、ボタンの文字色までは確認が回らないことがあります。どちらも見落とされやすいわりに、公開後に「スマホのホーム画面に追加するとアイコンがぼやける」「この文字が読みにくい」と言われて気づくことが多い部分です。

ここでは、公開前に確認しておきたいファビコンのサイズと、文字色のコントラストについて整理します。

ファビコンは「1枚の小さな画像」では足りない

ファビコンは、ブラウザのタブやブックマーク、検索結果のサイト名の横などに表示される小さなアイコンです。かつては16×16ピクセルの画像を1つ用意すれば足りましたが、現在は表示される場所ごとに必要なサイズが異なります。

• ブラウザのタブ：16×16、32×32
• iPhone・iPadでホーム画面に追加したとき：180×180
• Androidでホーム画面に追加したとき、アプリとして表示されるとき：192×192、512×512

小さい画像しか用意していないと、ホーム画面に追加したときに拡大されてぼやけて見えます。

Googleの検索結果に表示されるファビコンについては、Googleのガイドラインで、正方形であること、48ピクセルの倍数（48×48、96×96など）であることが条件とされています。また、ファビコンのURLを頻繁に変えないことも求められています。

ファビコン一括生成ツールでは、1枚の画像から上記の6種類のサイズ（favicon.icoを含む）をまとめて作成できます。ZIPには、Android向けの設定ファイル（site.webmanifest）と、HTMLに組み込むためのコードを記載したテキストも入っています。

画像を置くだけでは反映されないことがある

ファビコンの画像ファイルをサーバーに置いただけでは、ブラウザのタブには表示されても、検索結果などには反映されないことがあります。ページのHTMLの<head>部分に、どのファイルがファビコンかを指定するタグを入れておく必要があります。生成したZIPに同梱されているコードを使うと、指定漏れを防げます。

元の画像は正方形にしておく

長方形の画像を使うと、ファビコン一括生成ツールは画像の中央を基準に正方形に切り取ってから縮小します。ロゴが端に寄っている画像だと、肝心の部分が切れることがあります。事前に正方形（1:1）の比率で切り抜けるトリミングツールで、残したい範囲を自分で決めてから使うと確実です。

文字色は「見えるかどうか」ではなく「コントラスト比」で確かめる

薄いグレーの文字や、色付きの背景に白い文字を載せたボタンは、作った本人の画面ではきれいに見えていても、屋外でスマホを見る人や、色の見え方が異なる人には読みにくいことがあります。

文字の読みやすさを客観的に確かめる目安として、Webアクセシビリティの国際的なガイドラインWCAG（Web Content Accessibility Guidelines）が定めるコントラスト比があります。文字色と背景色の明るさの差を数値にしたもので、1:1（同じ色）から21:1（白と黒）までの値をとります。

WCAG 2.xでは、必要なコントラスト比を次のように定めています。

多くのWebサイトは、AAを満たすことを目標にしています。

カラーコントラストチェッカーで文字色と背景色を指定すると、コントラスト比と、AA・AAAそれぞれを満たすかどうかを判定できます。デザイン担当者から受け取った配色を、公開前に一通り入れてみるだけでも、読みにくい組み合わせに気づけます。

確認するときの注意

• 背景が画像やグラデーションの場合：判定は単色の背景を前提としています。写真の上に文字を載せる場合などは、文字の背後で最もコントラストが低くなる箇所の色を指定して確かめてください。
• 判定を満たしても、それだけでWCAGに準拠したことにはなりません：コントラスト比は、WCAGが定める多くの基準のうちの1つです。

色の表記をそろえる

デザインツールではRGB、CSSではHEX（#1d4ed8のような表記）のように、担当者や作業によって色の表記がばらばらなことがあります。HEX・RGB・HSLを相互に変換できるカラーコード変換ツールを使えば、受け取った色をチェッカーに入力しやすい表記にそろえられます。HSLは「同じ色味のまま少し暗くする」といった調整がしやすいため、コントラストが足りない色を微調整するときにも便利です。

まとめ：最後に「小さいもの」と「読みやすさ」を確認する

ファビコンは表示される場所ごとのサイズとHTMLでの指定を、文字色はコントラスト比を確かめておく。どちらも数分で済む確認ですが、公開後に直すよりずっと手間がかかりません。

ここで紹介したツールはすべてブラウザ内で処理が完結し、ロゴ画像や配色データを外部のサーバーへ送信しません。公開前のデザインデータでも、安心してご利用いただけます。