LumaTool
ローカル処理

Favicon HTML タグ生成

Favicon HTML タグ生成 generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

Runs locallyNo uploadYour input is processed in your browser.

Favicon HTML タグ生成

favicon.ico、PNG favicon、Apple Touch Icon、manifest、theme-color、mask-icon の head タグを生成します。

このツールとは？

A favicon HTML tag generator writes the link and meta tags that belong in the HTML head. It helps avoid missing sizes, incorrect type attributes, inconsistent paths, or forgetting the web manifest and theme color.

対応入力形式

  • No upload is required.
  • /favicon.ico
  • /favicon-16x16.png
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest

出力ファイル

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

サイズガイド

  • favicon.ico keeps broad compatibility.
  • 16x16 and 32x32 PNG help modern browsers choose crisp tab icons.
  • 180x180 Apple Touch Icon supports iOS home screen shortcuts.
  • site.webmanifest points browsers to PWA icon metadata.
  • theme-color controls browser UI color on supported devices.

入力例

  • /favicon.ico
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest
  • #ffffff theme color

出力例

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

よくある用途

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

ベストプラクティス

  • Start from high-resolution square artwork when possible.
  • Keep the subject centered and avoid tiny text inside small icons.
  • Use transparent backgrounds only when the mark remains visible on light and dark surfaces.
  • Use consistent file paths between exported files and HTML code.
  • After replacing favicons, clear browser cache or change filenames if the old icon remains visible.

よくあるミス

  • Uploading a low-resolution source and expecting sharp large icons.
  • Using artwork that touches the edge and gets clipped after rounding or cover mode.
  • Shipping only favicon.ico and forgetting Apple Touch Icon or manifest icons.
  • Leaving HTML paths that do not match the files in the public folder.
  • Not previewing 16x16 and 32x32 outputs before release.

プライバシーとローカル処理

ファイルはブラウザ内でローカル処理され、LumaTool サーバーへアップロードされません。画像の読み込み、Canvas リサイズ、ICO、ZIP、manifest、HTML 生成はクライアント側で完了します。

例

入力例

入力例 
/favicon.ico
/favicon-32x32.png
/apple-touch-icon.png
出力例 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag

Favicon HTML タグ生成 generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

出力例

入力例 
favicon paths and theme color
出力例 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag
site.webmanifest link tag
theme-color meta tag

ファイルはブラウザ内でローカル処理され、LumaTool サーバーへアップロードされません。画像の読み込み、Canvas リサイズ、ICO、ZIP、manifest、HTML 生成はクライアント側で完了します。

プライバシーに関する注意

ファイルはブラウザ内でローカル処理され、LumaTool サーバーへアップロードされません。画像の読み込み、Canvas リサイズ、ICO、ZIP、manifest、HTML 生成はクライアント側で完了します。

使い方

  1. ステップ 1. Enter your favicon file paths.
  2. ステップ 2. Select which icon tags to include.
  3. ステップ 3. Set the theme color and optional mask icon.
  4. ステップ 4. Copy the generated HTML code into your website head.

実際の利用例

Create favicon head code for a static HTML site

Create favicon head code for a static HTML site.

Add favicon tags to a React or Vite index

Add favicon tags to a React or Vite index.html file.

Prepare link tags for a Next

Prepare link tags for a Next.js or WordPress project.

主な用途

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

FAQ

Where should I place favicon HTML tags?

Place them inside the HTML head. In Vite or React projects this is often index.html; in framework projects use the framework head or metadata system.

Do I still need favicon.ico?

Yes, it is still useful for compatibility even when PNG icons are present.

What is apple-touch-icon?

It is the icon iOS uses when a user saves a website to the home screen.

What is site.webmanifest?

It is a web manifest file that tells browsers about PWA icons, display mode, theme color, and related install metadata.

Why is my favicon not updating?

Favicons are cached heavily. Verify paths, clear cache, and consider changing filenames when replacing icons.

Can I use this code in React or Vite?

Yes. Put the files in public/ and paste the generated tags into index.html unless your framework uses a metadata API.

Favicon HTML タグ生成 は何に向いていますか？

Favicon HTML タグ生成 は、ブラウザ上で素早く確認、変換、整理、整形したい アイコンツール 系の作業に向いています。

入力内容はどのように扱われますか？

ファイルはブラウザ内でローカル処理され、LumaTool サーバーへアップロードされません。画像の読み込み、Canvas リサイズ、ICO、ZIP、manifest、HTML 生成はクライアント側で完了します。

関連ツール

F

Favicon 生成ツール

favicon.ico、PNG、Apple Touch Icon、Android アイコン、manifest、プレビュー、HTML タグ、ZIP をブラウザ内で作成します。

アイコンツール 利用可能 ローカル処理 アップロード不要 今すぐ使う ア

アプリアイコン生成

PNG、JPG、WebP、SVG から iOS、Android、PWA のアイコンサイズを生成し、安全領域と角丸を確認できます。

アイコンツール 利用可能 ローカル処理 アップロード不要 今すぐ使う I

ICO 変換

PNG、JPG、WebP を favicon.ico 向けの複数サイズ ICO に変換します。

画像ツール 利用可能 ローカル処理 アップロード不要 今すぐ使う S

SVG 安全プレビュー

SVG マークアップを安全にプレビューし、サイズ、色、リスクを確認します。

画像ツール 利用可能 ローカル処理 アップロード不要 今すぐ使う S

SVG 最適化ツール

SVG を圧縮、整理、サニタイズ、プレビュー、コピー、ダウンロードし、script やイベントを除去します。

アイコンツール 利用可能 ローカル処理 アップロード不要 今すぐ使う