Faviconチェッカー
ウェブサイトのfavicon設定が完全かをチェックします（各形式・サイズのアイコンを含む）。URLを入力してチェック：
包括的なチェック
サイトのすべてのfaviconファイルを各種形式・サイズでチェック
互換性チェック
プラットフォームやデバイス間でのfavicon互換性を検証
最適化の提案
詳細な最適化提案とベストプラクティスを提供
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は圧縮を最適化してください。