Favicon HTMLタグ — 完全なLinkタグリファレンス
全プラットフォーム対応のFaviconに必要なHTMLリンクタグの完全なセットを提供。ブラウザタブ、Apple Touch Icon、Webマニフェスト、レガシーICO参照を含みます。
Format & Technical
詳細な説明
Favicon HTMLタグ
HTMLドキュメントの<head>にある<link>タグは、ブラウザにFaviconファイルの場所を伝えます。完全な実装はすべてのプラットフォームとユースケースをカバーします。
完全なタグセット
<!-- 標準Favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<!-- SVG Favicon（モダンブラウザ、ダークモードサポート） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Web Appマニフェスト（Android Chrome、PWA） -->
<link rel="manifest" href="/site.webmanifest">
タグ属性の説明
rel="icon"— 標準Favicon宣言type="image/png"— PNG画像のMIMEタイプsizes="32x32"— アイコンのピクセルサイズhref="/path/to/icon"— アイコンファイルへのパスrel="apple-touch-icon"— Appleデバイス専用rel="manifest"— Web AppマニフェストJSONファイルへのポイント
よくある間違い
type属性の欠落: 一部のブラウザは正しいアイコンを選択するためにMIMEタイプが必要sizes値の不一致: 宣言されたサイズと実際のファイル寸法の不一致- Apple Touch Iconの欠落: iOSが適切なアイコンの代わりにスクリーンショットを表示する
ユースケース
すべてのWeb開発者にFavicon HTMLタグの正しいセットが必要です。このリファレンスは、新しいWebサイトのセットアップ、既存サイトのFavicon実装の監査、新しいフレームワークへの移行、特定のプラットフォームでのFaviconの欠落や不正確さのトラブルシューティング時に使用されます。