ファビコンチェッカー
ファビコン、インストール用アイコン、manifestをまとめて確認します。
URLを貼り付けるだけで、サイトが指定しているアイコン、サイズや形式の問題、ブラウザタブ、iOS・Androidのホーム画面、インストール済みPWA、Windowsタイルでの表示を確認できます。
確認結果
このファビコン チェッカーが検査する内容
1 回のスキャンで、従来のファビコンから完全なインストール可能なアプリ アセットに至るまで、最新のサイト アイコンの 3 つのレイヤーがカバーされます。
コアファビコン
ルートの/favicon.ico、サイズと形式を指定したlink rel="icon"タグ、iOS向けのapple-touch-icon、Safariのピン留めタブ用マスクアイコンを確認します。ブラウザタブ、ブックマーク、履歴、リーディングリストで鮮明に表示するために必要なファイルです。
PWA と Web マニフェスト
サイトが Web アプリのマニフェストにリンクしている場合は、それを解析し、インストール可能なアプリが実際に必要とするアイコン (192×192 のアイコン、512×512 のアイコン、および安全な目的を持つ少なくとも 1 つのマスカブルアイコン) を確認します。また、マニフェスト テーマと背景色も読み取られるため、インストール エクスペリエンスが完了したことを確認できます。
他のプラットフォーム
ブラウザーのクロムと Android アドレス バーに色を付けるテーマカラー メタ タグに加え、Windows のスタート メニュー タイルに使用される msapplication-TileImage をチェックします。これらの細かい詳細により、訪問者が使用するオペレーティング システム全体でブランドがどのように表示されるかが決まります。
サイトのファビコンを確認する方法
サインアップもアップロードも必要なく、1 分以内に完全なアイコンの監査を取得できます。
URLを貼り付けてください
https:// プレフィックスを含む公開 Web サイトのアドレスを上のフィールドに入力します。
スキャンを実行する
ページの HTML と、存在する場合はその Web マニフェストを取得し、宣言されたすべてのアイコンとメタ タグを検出します。
レポートを確認する
各項目の合格、警告、不合格を、基本ファビコン、PWA manifest、その他のプラットフォーム別に確認します。
プレビューと修正
デバイス間でアイコンがどのようにレンダリングされるかをプレビューし、ジェネレーターにジャンプして不足しているものを作成します。
このファビコンチェッカーを使用する理由
単一のタブアイコンのプレビューを超えた、集中的でプライバシーに配慮した監査。
サインアップ不要の即時監査
URL を貼り付けると、完全な合格/警告/不合格レポートを数秒で取得できます。アカウントもアップロードもキューもありません。
すべてのプラットフォームを 1 つのビューで表示
ブラウザ タブ、iOS ホーム画面、Android ランチャー、インストールされている PWA、Windows タイルはすべて 1 回のスキャンでカバーされます。
Webマニフェストを読み取ります
私たちは、manifest.json を解析して、インストール可能なアプリが本当に必要とする 192 ピクセル、512 ピクセル、およびマスカブルアイコンを検証します。
リアルなプレビュー
推測するのではなく、ブラウザーのタブ、ホーム画面、タイルのモックアップ内でレンダリングされた実際の検出されたアイコンを確認してください。
明確で実用的なヒント
失敗したすべてのチェックには、その意味と解決方法についてのわかりやすい英語の説明が付いています。
URLを保存しない確認
確認時にページを取得しますが、入力したURLを保存、記録、共有することはありません。
ファビコンチェッカーを使用する場合
起動前に自己監査を実行します。新しいサイトをリリースしたり再デザインしたりする直前に、ファビコン チェックによってタブ アイコン、アップル タッチ アイコン、マニフェスト アイコンがすべて適切に配置されていることを確認します。そのため、サイトを最初にブックマークしたりインストールした人には、空白の地球ではなく洗練されたブランド マークが表示されます。
クライアントまたは競合他社のサイトを監査します。代理店やフリーランサーは、公開 URL を貼り付けて、どのようなアイコン アセットが存在し、何が欠けているかに関する信頼性の高いレポートを迅速に作成できます。これは、サイト レビューや技術的な SEO 監査の際に簡単に付加価値を高めることができます。
ファビコンが表示されない理由をデバッグします。アイコンが表示されない場合、このチェッカーは、アイコンが正しく宣言されていないか、宣言されているもののキャッシュによってブロックされているという、通常の 2 つの原因を分離します。ブラウザーが受信した正確なタグを確認すると、実際にどの問題を追跡しているのかがわかります。
これを展開前のルーチンに追加します。このチェックは 1 つの URL から実行され、明確な合格/不合格の概要が返されるため、毎回のデプロイの前にステージングに対して実行して、ビルド ステップによってアイコン ファイルが削除される回帰を捕捉できる軽量のステップです。
アイコンを生成した後、作業を確認します。 Favicon Generator または PWA Icon Generator でセットを作成してデプロイした後、チェッカーを再実行してタグがライブ ドメインで解決され、すべてのプラットフォームが合格することを確認します。
ファビコンチェッカーのよくある質問
ファビコン、アプリアイコン、Web マニフェストのテストに関するすべて。
ファビコンチェッカーは何をするのですか?
ファビコン チェッカーは、Web サイトのライブ HTML と Web マニフェストを取得し、サイトで宣言されているアイコン アセットとそれらが有効かどうかを報告します。このツールは、ルート favicon.ico、すべてのリンク rel="icon" タグ、apple-touch-icon、Safari マスク アイコン、PWA マニフェスト アイコン、および Windows タイルを検査し、それぞれがどのようにレンダリングされるかをプレビューします。マークアップの隠れた部分を、合格、警告、不合格の明確なチェックリストに変えます。
ファビコンが表示されないのはなぜですか?
最も一般的な 2 つの原因は、宣言の欠落と積極的なキャッシュです。ブラウザーが有効なリンク rel="icon" タグまたは /favicon.ico を受信しなかったか、受信したにもかかわらずキャッシュされたコピーが表示されたままです。チェックを実行して、タグが実際にライブ ドメインで解決されることを確認します。ここでは通過するがブラウザでは通過しない場合、それはマークアップの問題ではなく、ほぼ確実にキャッシュの問題です。
ファビコンを強制的に更新するにはどうすればよいですか?
ブラウザはファビコンを長期間キャッシュすることがあります。新しいアイコンを公開したら、ページを強制再読み込みし、必要に応じてブラウザやCDNのキャッシュを確認してください。favicon.ico?v=2 のようにURLへバージョンを付ける方法もあります。アイコンのURLを新しいタブで直接開き、最新ファイルが配信されているか確認すると切り分けやすくなります。
なぜブラウザはファビコンをこれほど積極的にキャッシュするのでしょうか?
ファビコンはほぼすべてのページ読み込みで表示されるため、ブラウザーは繰り返しのネットワーク リクエストを回避し、タブの即時レンダリングを維持するためにファビコンを長期間保存します。副作用として、変更されたアイコンがしばらくの間古く見える可能性があります。バージョン管理されたファイル名またはアイコン URL のクエリ文字列は、キャッシュされたアイコンを真に新しいアイコンに置き換える必要があることを通知する最も信頼できる方法です。
実際に必要なファビコンのサイズはどれくらいですか?
ブラウザのタブとブックマークをカバーするため、少なくとも 16×16 および 32×32 のアイコンを同梱します。 48×48 は、Windows およびより高密度のディスプレイに役立ちます。従来のファビコンのほかに、iOS 用の 180×180 の Apple-Touch アイコン、Android およびインストール可能な PWA 用のマニフェストに 192×192 および 512×512 のアイコンが必要になります。このチェッカーは、これらのサイズのうち欠落しているサイズにフラグを立てます。
ファビコンには .ico、PNG、または SVG を使用する必要がありますか?
3 つすべてを適切な場所で使用します。サイトのルートにある複数解像度の favicon.ico は、すべてのブラウザーが理解できるユニバーサル フォールバックです。 16、32、および 48 ピクセルで宣言された PNG アイコンは鮮明でモダンなレンダリングを提供し、単一の SVG ファビコンは高密度画面上で完全にスケールし、ダークモードのバリアントをサポートします。最近のブラウザは最初に SVG または PNG を選択し、必要に応じて .ico に戻ります。
apple-touch-icon とは何ですか?また、そのサイズはどれくらいにすればよいですか?
apple-touch-iconは、iPhoneやiPadでサイトをホーム画面へ追加したときに使われる画像です。iOS側で角丸が適用されるため、背景が不透明な180×180 PNGを用意します。設定がない場合はページのスクリーンショットが代用され、ほかのアプリアイコンと並べたときに見づらくなることがあります。
Web アプリのマニフェストとは何ですか? また、それに必要なアイコンは何ですか?
Web アプリ マニフェストは、サイトをインストール可能にし、その名前、色、表示モード、アイコンを宣言する JSON ファイルです。有効なインストール可能なエクスペリエンスを実現するには、少なくとも 192×192 および 512×512 のアイコンを参照する必要があり、理想的には 1 つのマスカブルアイコンを参照する必要があります。このチェッカーはマニフェストにリンクして解析し、必要なアイコンのサイズと目的が存在することを確認します。
マスカブルアイコンとは何ですか?なぜ重要ですか?
マスカブル アイコンは、「マスカブル」という目的でマークされたマニフェスト アイコンであるため、Android は重要な詳細を切り取ることなく、適応型の形状 (円、角丸、角丸四角形) に切り抜くことができます。ロゴの周囲に約 20% の安全領域のパディングが必要です。これがないと、Android は縮小したアイコンを白い円の中に枠で囲むことが多く、適切に設計されたマスキング可能なアセットと比較すると洗練されていないように見えます。
テーマカラーメタタグは何をしますか?
テーマカラー メタ タグは、周囲の UI をどの色で着色するかをブラウザーに指示します。 Android Chrome ではアドレス バーに色が付けられ、インストールされた PWA ではブランドに合わせてタイトル バーに色が付けられます。ちょっとした工夫で、サイトが意図的でネイティブな印象を与えることができます。このチェッカーは、タグが存在するかどうかを報告し、タグが宣言する値を読み取ります。
Windows タイル イメージとは何ですか?
msapplication-TileImage メタ タグは、ユーザーがサイトを Windows の [スタート] メニューにライブ タイルとして固定したときに表示される画像を定義します。 msapplication-TileColor と組み合わせて、そのタイルの外観を制御します。これはオプションであり、以前ほど重要ではないため、このチェッカーはタイル イメージの欠落をハード障害ではなく警告として扱います。
このファビコン チェッカーは無料ですか。URL は保存されますか?
はい、チェッカーは完全に無料で、サインアップや使用制限はありません。当社は、リアルタイムでチェックを実行するためだけに入力されたページを取得し、送信した URL を保存、記録、共有することはありません。レポートの生成後は監査するサイトに関する情報は何も保持されないため、ステージング サイトやクライアント サイトを安全に確認できます。
チェッカーはサブページをスキャンしますか、それとも入力した URL だけをスキャンしますか?
指定した単一の URL をチェックします。ファビコンとマニフェスト リンクはヘッド内に存在し、ほとんどの場合サイト全体で宣言されるため、ほぼすべての場合においてホームページがサイト全体を表します。特定のセクションで異なるアイコンが使用されている場合は、ホームページの結果に依存するのではなく、そのページの正確な URL を貼り付けて直接監査します。
ファビコンとアプリアイコンの違いは何ですか?
ファビコンはブラウザのタブ、ブックマーク、履歴に表示される小さなアイコンで、従来は 16 ~ 48 ピクセルでした。アプリ アイコンは、サイトをスマートフォンのホーム画面またはデスクトップにインストールするときに使用される、大きなランチャー品質の画像です。iOS では apple-touch アイコン、Android ではマニフェスト アイコンです。完全なサイトには両方が必要であり、まさにこのチェッカーが一緒に監査するものです。
Want to go deeper?
Favicon Optimization Across Browsers