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.

本地运行不上传输入内容在浏览器本地处理。

Favicon HTML 标签生成器

生成 favicon.ico、PNG favicon、Apple Touch Icon、manifest、theme-color 和 mask-icon 的 HTML 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.

常见问题

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 代码生成都在客户端完成。

相关工具

网

网站图标生成器

在浏览器本地生成 favicon.ico、PNG 图标、Apple Touch Icon、Android 图标、manifest、预览、HTML 标签和 ZIP。

图标工具 在线可用 本地处理 无需上传 立即使用 应

应用图标生成器

从 PNG、JPG、WebP 或 SVG 生成 iOS、Android 和 PWA 常用图标尺寸，并支持安全区和圆角预览。

图标工具 在线可用 本地处理 无需上传 立即使用 I

ICO 图标转换器

本地把 PNG、JPG、WebP 转换为多尺寸 favicon.ico。

图片工具 在线可用 本地处理 无需上传 立即使用 S

SVG 安全预览

隔离预览 SVG 标记，检查尺寸、颜色和潜在风险内容。

图片工具 在线可用 本地处理 无需上传 立即使用 S

SVG 压缩优化器

本地压缩、清理、净化、预览、复制和下载 SVG，移除脚本、事件、metadata 和风险内容。

图标工具 在线可用 本地处理 无需上传 立即使用