SaaSのランディングページに複雑なFavicon一式は必要ありません。タブサイズでも識別できる図形、安定したURL、そしてブラウザやクローラーが理解できる宣言が必要です。
Faviconは製品品質とブランドの小さな一部ですが、それ自体がコンバージョンを高めると断定できる根拠はありません。実際の端末で確認し、根拠のない効果を付け加えないことが大切です。
実用的なFavicon構成
HTML標準ではページアイコンに rel='icon' を使い、SVGのような拡大可能な素材には sizes='any' を指定できます。ICOは互換用のフォールバックとして利用でき、Apple端末のホーム画面に追加される可能性がある場合はApple touch iconも任意で用意できます。
<link rel='icon' href='/favicon.svg' type='image/svg+xml' sizes='any'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>ファイル名と属性は、実際に配信するファイルに合わせてください。HTML標準にはicon関係と sizes の説明があり、AppleのWeb Clip文書にはtouch iconの指定方法があります。
最小表示サイズから設計する
ワードマークではなく記号を使う
製品名全体はタブ上で読めなくなりがちです。ロゴから最も単純で特徴的な形を選び、16×16と32×32ピクセルで確認します。輪郭が崩れる場合は、解像度を上げる前に細部を減らしてください。
明るいUIと暗いUIの両方を確認する
透明背景の暗い図形は暗いタブバーで消え、薄い図形は明るいUIで見えにくくなります。両方をテストしてください。一つの素材でコントラストを保てない場合は、検証済みのSVG配色を検討できます。詳しくはダークモードFaviconガイドを参照してください。
URLを安定させる
同じURLの画像だけを差し替えると、ブラウザやクローラーのキャッシュに古い画像が残ることがあります。デザインを変更する場合は明確なバージョン付きURLを使い、宣言を一度更新する方法が分かりやすいです。
Google検索には別の掲載条件がある
ブラウザタブで正しく表示されても、検索結果で同じアイコンが使われる保証はありません。Googleの現行ガイドでは、正方形で8×8ピクセル以上が必須、48×48ピクセルより大きい画像が推奨され、ホームページと画像がクロール可能である必要があります。また、条件を満たしても表示は保証されないと明記されています。
Google検索のFavicon公式文書を基準にし、URLを安定させてください。「48×48より大きいことを推奨」を「すべてのブラウザで48×48が必須」と言い換えてはいけません。
確認チェックリスト
- 画像URLを直接開き、成功レスポンスと画像内容を確認する。
- ページソース内で宣言したファイルがすべて存在することを確認する。
- 通常タブ、必要ならホーム画面追加、明暗テーマをテストする。
- 元の大きなロゴではなく小サイズで識別性を判断する。
- 公開後はキャッシュと検索クロールの更新を待つ。
既存サイトのファイルを調べる場合は、Faviconダウンロードガイドから始められます。宣言と実ファイルが一致した小さなセットの方が、整合性のない大量セットより確実です。