F
Favicon.pub

Faviconチェッカー

ウェブサイトのfavicon設定が完全かをチェックします（各形式・サイズのアイコンを含む）。URLを入力してチェック：

包括的なチェック

サイトのすべてのfaviconファイルを各種形式・サイズでチェック

互換性チェック

プラットフォームやデバイス間でのfavicon互換性を検証

最適化の提案

詳細な最適化提案とベストプラクティスを提供

Favicon Checker は何をするツール？

この無料ツールは、ウェブサイトの favicon 設定が完全かどうかを検査します。定番の favicon ファイル、Apple タッチアイコン、Web アプリマニフェスト、主要な meta タグをチェックし、欠落や設定ミスを検出します。

公開されているウェブサイトならどれでも利用可能です。ドメインか URL を入力すると、どの favicon ファイルが存在し、どれが不足しているかのレポートを即座に表示します。

チェッカーが検出する問題
  • favicon の欠落 – favicon.ico も PNG も見つからない
  • サイズの不一致 – ファイルサイズがブラウザの期待と異なる
  • リンク切れ – favicon ファイルが 404 を返す、または読み込み失敗
  • apple-touch-icon の欠落 – iOS ホーム画面用アイコンがない
  • PWA アイコンまたは Web アプリマニフェストの欠落
Favicon Checker の使い方
  1. 検査したいウェブサイトの URL を入力します。
  2. Check をクリックして数秒待ちます。
  3. 各セクション（Classic Favicon、Touch Icons、Web App Manifest、Meta Tags）を確認します。
  4. エラーとマークされた項目を修正し、もう一度検査します。
チェック後、各ブラウザで実際に確認する

チェッカーが確認するのはファイルと HTML の正しさまでです。favicon のキャッシュ方法はブラウザごとに異なるため、このリストで新しいアイコンが実際に表示されているかを確認してください。

  • Chrome と Edge：両者は Chromium のアイコンキャッシュを共有します。アドレスバーで chrome://favicon/https://your-site.com を開くとキャッシュ済みアイコンを確認できます。古い場合はハードリロード（Ctrl+Shift+R）かシークレットウィンドウで再取得を強制します。
  • Firefox：最もキャッシュが強く、アイコンを数日保持することがあります。?v=2 などのクエリ付きアイコン URL をプライベートウィンドウで開いてバイパスするか、設定 → プライバシー → ウェブページのキャッシュで消去してください。
  • Safari（macOS）：バージョン 14 からタブにアイコンを表示し、?v= クエリは無視します。新しいプライベートウィンドウでテストするか、ページを再確認した上で Safari メニュー → 履歴の消去 でクリアします。
  • iOS ホーム画面：apple-touch-icon.png は「ホーム画面に追加」した瞬間にのみ取得されます。既存のショートカットを削除して再追加してください。ファイルを差し替えただけでは既存のアイコンは更新されません。
  • Google 検索結果：検索結果のアイコンはブラウザキャッシュではなくインデックスされたコピーから来ます。変更後は Google Search Console でトップページのインデックス再登録をリクエストしてください。通常は数日以内に反映されます。
関連ツール
Favicon 形式説明

クラシック形式

favicon.ico

従来のICO形式、すべてのブラウザと互換性

favicon.png

最新のPNG形式、透過背景をサポート

favicon.svg

ベクター形式、ダークモードをサポート

モバイルデバイス

Apple Touch Icon

iOSホーム画面用アイコン

Android Chrome

Android PWAアイコン

Web App Manifest

PWA設定ファイル

完全な設定例

<!-- Basic Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

<!-- Android Chrome Icon -->
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">

<!-- Meta Tags -->
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content="Your App Name">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
よくある質問

なぜ複数のfavicon形式が必要ですか？

ブラウザやデバイスによって対応形式やサイズが異なるため、複数形式を提供することで全ての環境で正しく表示できます。

ICO形式はまだ必要ですか？

最新ブラウザはPNGをサポートしていますが、ICOは最も互換性が高く、古いブラウザでも確実に表示されます。

Web App Manifestとは？

PWAの設定を定義するJSONファイルで、アイコン、名前、テーマカラーなどを含みます。

Faviconの読み込み速度を最適化するには？

適切なファイルサイズを使用し、ICOは複数サイズを含め、PNGは圧縮を最適化してください。