7つの表示例
ブラウザ・検索・ホーム画面のファビコンプレビュー
公開前に、小さいサイズでの見え方を確認。
ファビコンを1つ選び、ブラウザタブ、検索結果、ブックマーク、デスクトップショートカット、スマートフォンのホーム画面で読みやすさ、コントラスト、切り抜きを確認できます。サイト名とドメインも編集できます。
コンテキストボード
これらのモックアップは、スケール、コントラスト、一般的なマスクを比較します。ブラウザ、Google、およびオペレーティング システムのインターフェイスは変更される可能性があるため、ピクセル完璧なスクリーンショットではなく、デザイン チェックとして使用してください。
ブラウザのタブ
Chrome スタイルのタブ
Safari スタイルのタブ
検索、ブックマーク、デスクトップ
あなたのサイト
https://例.com
あなたのサイト — 公式ウェブサイト
サイト名とURLの横にファビコンが認識できるかどうかを確認するための検索結果のサンプル。
Google スタイルの検索結果
ブラウザのブックマーク
あなたのサイト
デスクトップのショートカット
モバイルのホーム画面
あなたのサイト
iPhoneのホーム画面シミュレーション
あなたのサイト
Android ホーム画面シミュレーション
すべてのキー サイズをプレビューする
16 × 16 px
32 × 32 px
48 × 48 px
180 × 180 px
ファビコンをプレビューする方法
- 01
ファビコンをアップロードする
出荷する予定の実際の PNG、SVG、または ICO を選択します。 ICO ファイルの場合、ツールは視覚的なプレビュー用に最大の埋め込み画像を選択します。
- 02
サイトの詳細を追加する
サンプル テキストをブランドとホスト名に置き換えて、明るいプレビュー画面と暗いプレビュー画面を切り替えます。
- 03
小さいサイズとマスクをチェック
16 ピクセルのタブから始めて、検索、デスクトップ、スマートフォンのプレビューで細部の欠落、コントラストの弱さ、安全でないエッジがないかどうかを検査します。
プレビューに表示される内容
1 つのアセットが非常に異なるサイズで、異なるインターフェイス形状内に表示されることがあります。プレビュー ウォールはこれらの条件を比較するのに役立ちますが、ファイルをインストールしたり、すべてのブラウザー バージョンやデバイス テーマを再現したりするわけではありません。
ブラウザタブ
一般的な最小の表示サイズおよび切り詰められたページ タイトルの横で認識をテストします。
タブの間隔、背景、ファビコンの選択は、ブラウザー、オペレーティング システム、デバイスの密度によって異なります。
Google検索
サイト名と表示されるURLの横にマークが残っているかどうかを確認します。
モックアップは、Google がファビコンをクロール、選択、または表示することを保証するものではありません。
ブックマークとショートカット
同じアートワークをコンパクトなブックマーク サイズと大きめのデスクトップ サイズで比較します。
保存されたアイコンは、宣言されたさまざまなファイルまたは訪問者のデバイス上のキャッシュされたバージョンから取得することができます。
電話のホーム画面
丸いまたは形をしたアイコンの境界に近すぎるアートワークを見つけます。
実稼働 iOS および Android アイコンは、タブのファビコンだけでなく、apple-touch-icon および Web アプリのマニフェスト アセットに依存します。
ファビコンのデザインチェックリスト
プレビューは、具体的な設計の決定につながる場合に役立ちます。最小の表面から外側に向かって作業し、展開されたサイトを個別に確認します。
明確な 16 ピクセルのシルエットから始めます
ブラウザー タブ内で消えてしまう細い輪郭、小さな文字、内部の詳細を削除します。
48px以上の正方形のソースを使用してください
Google では、少なくとも 8×8 の正方形のファビコンを必要とし、さまざまな面で使用する場合は少なくとも 48×48 の高解像度画像を推奨しています。
明るい背景と暗い背景を確認する
透明なアートワークがブラウザーのクロムに消えてしまわないように、十分なコントラストまたは制御された背景を追加します。
専用のホーム画面アイコンを追加する
製品にとって大きな電話プレビューが重要な場合は、Apple Touch アイコンと適切な Web アプリ マニフェスト アイコンを使用します。
ファビコンのプレビューに関するよくある質問
ファビコンプレビューツールとは何ですか?
アップロードされた 1 つのファビコンをいくつかの代表的なブラウザ、検索、ブックマーク、デスクトップ、電話のコンテキストに配置するため、公開する前にサイズ、コントラスト、トリミングを判断できます。
このツールは私のファビコンを変更またはアップロードしますか?
いいえ。ブラウザでローカルに画像を読み取り、プレビュー モックアップでのみ使用します。画像のサイズ変更、ダウンロード、公開、サーバーへの送信は行いません。
プレビューは Chrome、Safari、または Google と正確に一致しますか?
いいえ。ブラウザとプラットフォームのインターフェイスは、バージョン、テーマ、デバイスによって異なります。プレビューは重要なスケールと周囲のコンテキストを再現しますが、ピクセルごとの結果が保証されるわけではありません。
favicon.ico ファイルをプレビューできますか?
はい。このツールは ICO ディレクトリを読み取り、その最大の埋め込み画像をプレビューに使用します。元の ICO ファイルは変更されません。
16×16 でファビコンがぼやけて見えるのはなぜですか?
細い線、小さな文字、詳細なイラストは、数ピクセルに縮小すると鮮明さが失われます。シルエットを簡素化し、コントラストを高め、専用の 16 ピクセル バージョンを検査します。
これはファビコンチェッカーとどう違うのですか?
Favicon プレビューは、公開する前にローカルのデザインを検査します。 Favicon Checker は、公開 Web サイトによってすでに提供されているファイルとリンク宣言を検査します。