Faviconチェッカー

完全な設定例

<!-- 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は圧縮を最適化してください。