Faviconチェック
任意のサイトのURLまたはドメインを入力すると、そのFaviconの有無をチェックできます。入力例：
総合チェック
サイトのすべてのfaviconファイル（様々な形式とサイズ）をチェック
互換性チェック
異なるプラットフォームとデバイスのfavicon互換性を検証
最適化提案
詳細な最適化提案とベストプラクティスを提供
Favicon 形式説明
クラシック形式
favicon.ico
従来のICO形式、すべてのブラウザと互換性
favicon.png
現代的なPNG形式、透明背景をサポート
favicon.svg
ベクター形式、ダークモードをサポート
モバイルデバイス
Apple Touch Icon
iOSデバイスのメインスクリーンアイコン
Android Chrome
Android PWAアイコン
Web App Manifest
PWA設定ファイル
完全な設定例
<!-- 基本 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 アイコン -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Android Chrome アイコン -->
<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 タグ -->
<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とは何ですか？
Web App ManifestはJSONファイルで、PWA（プログレッシブWebアプリ）の設定情報を定義し、アイコン、名前、テーマカラーなどを含みます。
Faviconの最適化はどのように行うべきですか？
適切なファイルサイズを使用し、過大なアイコンファイルを避けます。ICOファイルは複数のサイズを含め、PNGファイルは圧縮を最適化します。