ファビコン

ファビコンのサイズは何ピクセルで作る？

ファビコンは1つのサイズで済むものではなく、表示される場所ごとに合ったサイズをいくつか用意するのが一般的です。ブラウザのタブ、Googleの検索結果、スマホのホーム画面で、それぞれ違うサイズが使われるからです。

Google検索セントラルは、ファビコンを正方形（1:1）で作り、さまざまな画面できれいに見えるよう48×48ピクセルより大きく用意するよう案内しています。Webアプリの設定ファイル（マニフェスト）を使う場合、web.devは最低でも192×192と512×512のアイコンを入れるよう勧めています。

下の表は、よく使われる準備リストです。実際に必要なファイルはホームページの作り方によって少しずつ違うので、制作会社と一緒に決めれば大丈夫です。

ファビコンは、一度決めたら長く使うのがおすすめです。お客様はタブやお気に入りでアイコンの形を見てお店を覚えるので、頻繁に変えるとかえって見つけにくくなります。

ファビコンのファイル形式はICO・PNG・SVGのどれがいい？

最近はPNGを基本にして、必要に応じてICOとSVGも一緒に置く方法がよく使われています。Googleは、ICO・PNG・GIF・JPEGなど複数の形式に対応していると案内しています。

ICOは古い形式で、1つのファイルに複数のサイズを入れられ、ほぼすべてのブラウザが読み込めます。SVGは拡大しても粗くなりませんが、まだどこでも使われているわけではないので、PNGも一緒に置いておくと安心です。

iPhoneは、通常のファビコンの代わりに「apple-touch-icon」という専用のアイコンをホーム画面に使います。このアイコンは、透明な背景ではなく塗りつぶした背景で作ると、ホーム画面できれいに見えます。

SVGのファビコンは、ダークモードの設定に合わせて色が変わるように作ることもできます。ただしブラウザによって対応状況が違うので、どうしても必要でなければ、ライト・ダークどちらの画面でも見える1つのデザインにするほうがシンプルです。

ファビコンはどう作って、ホームページに設定する？

ロゴのファイルさえあれば、いくつかのステップで作れます。自分でやる場合も制作会社に任せる場合も、手順を知っておくと仕上がりを確認しやすくなります。

最近のホームページ制作ツールやフレームワークの中には、決められたフォルダにアイコンファイルを入れると、設定コードを自動で作ってくれるものもあります。自分でコードを入れる必要があるかどうかは、制作会社に聞けば大丈夫です。

大きな元データは必ず保管しておいてください。あとで新しいサイズが必要になったとき、小さいファイルを拡大し直すとぼやけてしまうからです。

ファビコンと同じデザインで共有プレビュー画像やSNSのプロフィール画像までそろえておくと、お客様がどこで見ても同じお店だと気づきやすくなります。

1. 01ロゴの中から、小さく縮めても見分けられる部分（頭文字、シンボル）を選びます。
2. 02正方形のキャンバスにその部分を大きく配置し、端の余白は少しだけ残します。
3. 03512×512のような大きな元データを先に作り、そこから必要な小さいサイズを書き出します。
4. 0416×16・32×32に縮めても形が見えるか確認し、つぶれるなら線を太く整えます。
5. 05ホームページのトップページのヘッド部分に、「icon」・「apple-touch-icon」の設定コードを入れます。
6. 06ブラウザのタブ、スマホのホーム画面への追加、ライト・ダークのタブ画面で、それぞれ確認します。

Googleの検索結果にファビコンが表示されないのはなぜ？

ほとんどの場合、Googleが案内している条件のどれかを満たしていないことが原因です。Googleは、ファビコンの設定コードがホームページのトップページにあること、そしてGoogleの検索ロボットがトップページとファビコンのファイルの両方を読み込めることが必要だと案内しています。

ファビコンはサイトのアドレス（ホスト）1つにつき1つだけ認められ、下位のパス（例：アドレス/shop）のトップページは別には認められません。ファビコンのファイルのアドレスを頻繁に変えないことも大切です。

条件をすべて満たしても、すぐに反映されるわけではありません。Googleは再び読み込むまでに数日から数週間かかることがあるとしており、Search Consoleの「URL検査」ツールでトップページのインデックス登録をリクエストすると、少し早まることがあります。条件を守っても表示が保証されるわけではない点も覚えておいてください。

検索結果に自分のお店のアイコンではなくデフォルトのアイコンが表示されているなら、Googleがまだファビコンを見つけていないか、条件に合わないと判断したケースが多いです。上の条件を1つずつ確認し直してみてください。

業種別に、ファビコンはどうデザインする？

ファビコンは数十個のタブの中から自分のお店を見つけてもらうための目印なので、業種を表す絵よりも、お店ならではの形のほうが役に立ちます。コーヒーカップやハサミのようなありふれた絵は、他のお店と区別がつきにくくなりがちです。

色は、ロゴを代表する色を1つだけ使うのが、小さく縮めたときにいちばんくっきり見えます。グラデーションや細い線は、16ピクセルのサイズではほとんど見えません。

作った後は、実際にタブをいくつも開いた中に並べて比べてみてください。よく使うサイトのアイコンの隣で、自分のアイコンがすぐ目に入るかどうかが、いちばん確かな基準です。

• カフェ：お店の名前の頭文字を、ブランドカラーの円の中に入れます。
• 美容室：ロゴの中のシンボル部分だけを取り出し、太い線で描き直します。
• 工房：手書きのロゴは小さく縮めると読めないので、イニシャルを1文字だけ使います。
• オンライン販売：通販サイトのタブをいくつも開いておくお客様が多いので、色のコントラストを強くして目立たせます。

ファビコンでよくある失敗は？

いちばん多い失敗は、横長のロゴをそのまま正方形に入れて、とても小さく見えてしまうことです。透明な背景に黒いロゴだけを入れて、ダークモードのタブ画面で見えなくなるケースもよくあります。

ホームページ制作ツールのデフォルトのアイコンがそのまま残っていることもあります。公開前にタブを一度見るだけでわかるので、必ず確認してみてください。

ファビコンのファイルを変えたのに自分のパソコンでは元のままなら、ほとんどはブラウザが以前のアイコンを保存しているためです。別のブラウザやシークレットウィンドウで開いてみると、変わったかどうかを確認できます。

ファビコンについて制作会社に何を確認すればいい？

公開前に以下の4つを制作会社に確認しておけば、タブ・検索・スマホのホーム画面のどこでもくっきり表示されます。

• ブラウザのタブ・Google検索・スマホのホーム画面用のアイコンをすべて作ってもらえますか？
• ダークモードでも見えるように、背景や縁取りを入れましたか？
• Googleの検索ロボットがファビコンのファイルを読み込めないようにブロックしていませんか？
• 元データ（大きいサイズ）を受け取っておけますか？