Favicon HTMLタグ生成ツールとは
ファビコンマークアップは、ブラウザやデバイスに対してタブ、ブックマーク、ホーム画面ショートカット、Webアプリインストールで使用するアイコンを指示します。小さな静的サイトでも、デスクトップブラウザ、モバイルブラウザ、保存されたWebアプリで異なるファイル形式が必要になるため、複数のアイコン形式が必要になることがあります。
クイックアンサー
静的ウェブサイト向けにファビコンHTMLタグ、Apple touchアイコン参照、Webアプリマニフェストエントリを生成します。広範なブラウザサポートのためにSVGとフォールバックアイコンパスの両方を含めます。
Last updated: 2026-06-11
制限事項
- アイコンファイルは公開出力の指定されたパスに存在する必要があります。生成されたタグは参照のみであり、実際のアイコンファイルを作成または配置する必要があります。
- Apple touchアイコンには特定のサイズ要件があります。Appleデバイスでは、ユーザーがページをホーム画面に保存した際に最良の結果を得るために、180×180ピクセルのPNGが期待されます。
- Webマニフェストスニペットは有効なJSONである必要があります。マニフェストファイルの1つの構文エラーにより、ブラウザがアプリのメタデータをまったく読み取れなくなる可能性があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- アイコンファイルが公開されるベースパスを入力します。
- アプリ名またはサイト名と、テーマカラーおよび背景色を追加します。
- 生成されたlinkタグとmetaタグをHTMLのheadにコピーします。
- マニフェストJSONスニペットを使用している場合は、site.webmanifestファイルにコピーします。
主な用途
- プレーンなHTMLウェブサイトにファビコンマークアップを追加する。
- GitHub Pages用にアイコンパスを準備する。
- 小さなWebマニフェストJSONスニペットを作成する。