faviconをテスト・確認する方法（無料チェッカー）
Chrome、Safari、Firefox、iOS、Androidにわたって、自動でも手動でも。
手っ取り早い方法：自動スキャン
URLをfaviconチェッカーに貼り付けると、公開中のページを取得し、<head>を解析し、すべてのアイコンタグを一覧にして、デスクトップ、Apple、Android、manifestの各場面で何が欠けているか、壊れているかを指摘します。すべてを一度にカバーできる唯一のチェックです。
確認する順序
- 1
自動スキャンを実行する
公開中のURLをスキャンして、すべてのfaviconタグを一覧にし、欠落や破損したアイコンを指摘します。
- 2
ブラウザのタブを確認する
ハードリフレッシュして、デスクトップブラウザのタブでアイコンがくっきり表示されることを確認します。
- 3
ブックマークとアドレスバーを確認する
ページをブックマークして、16x16のアイコンが狭い場面でも読みやすいことを確認します。
- 4
iOSとAndroidのホーム画面を確認する
iOSで「ホーム画面に追加」し、AndroidでPWAをインストールして、apple-touch-iconとマニフェストのアイコンを検証します。
- 5
検索結果のfaviconを確認する
検索結果の横にGoogleが表示するアイコンが最新のものであることを確認します。
手動チェックリスト
| 場面 | やること |
|---|---|
| ブラウザのタブ | Chrome、Safari、Firefoxでハードリフレッシュ（Cmd+Shift+R / Ctrl+F5）します。アイコンは16〜32pxで、ぼやけたり粗くなったりせず、くっきり表示されるべきです。 |
| ブックマークとアドレスバー | ページをブックマークします。これで16x16のアイコンをもっとも狭い場面で確認できます。ここで読めないなら、アートワークを簡素化しましょう。 |
| iOS：ホーム画面に追加 | Safariで共有 → ホーム画面に追加。iOSはfavicon.icoではなくapple-touch-iconを使うため、これで一連のタグの欠落をまとめて捉えられます。 |
| Android / PWAのインストール | Android版Chromeでアプリをインストールします。ホーム画面とスプラッシュのアイコンはmanifest.jsonから来るため、これでマニフェストのアイコンが解決されるか検証できます。 |
| Googleの検索結果 | 自社ブランドを検索して、結果の横のfaviconが最新であることを確認します。Googleは少なくとも48x48のアイコンを必要とし、再クロール時に更新します。 |
各チェックが確かめるサイズ
完全なカバレッジとは
完全なfaviconセットは、ブラウザのタブ、ブックマーク、検索、iOS、Android、Windowsのタイル、そしてPWAのマニフェストをカバーします。スキャンで抜けが見つかったら、それはブランディングの欠落です。なぜfaviconのカバレッジが重要かを読み、faviconサイズの完全なリファレンスも確認しましょう。
よくある質問
faviconが機能しているかどうかを確認するには？
公開中のURLに対して自動のfaviconスキャンを実行し、すべてのタグが解決されることを確認します。その後、ブラウザのタブ、ブックマーク、iOSのホーム画面、インストール済みのPWAで、アイコンを手動で検証しましょう。
公開前にfaviconをプレビューするには？
ほとんどのジェネレーターは、デザイン中にライブのタブプレビューを表示します。実際のファイルを検証するには、各アイコンのURLを直接開いて、サイズと形式がlinkタグの参照と一致することを確認しましょう。
Google検索とブラウザでfaviconが違うのはなぜですか？
Googleは最後のクロール時点のfaviconをキャッシュし、少なくとも48x48のアイコンを必要とします。ブラウザは現在のファイルを即座に表示しますが、検索はGoogleが再クロールした後にのみ更新されます。