LumaTool
本地处理

网站图标生成器

网站图标生成器 creates favicon.ico, PNG favicons, Apple Touch Icon, Android Chrome icons, a site.webmanifest file, and copyable HTML tags from one local image.

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

网站图标生成器

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

这个工具是什么？

A favicon generator prepares the small website icons used in browser tabs, bookmarks, mobile shortcuts, and PWA install screens. A complete favicon pack avoids the common problem of only shipping favicon.ico while missing Apple Touch Icon, Android icons, or manifest metadata.

支持的输入格式

  • PNG images
  • JPG and JPEG images
  • WebP images
  • SVG logos and icons
  • Square source artwork is recommended
  • Large files should be kept under 10 MB for smooth browser processing

输出文件

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png 180x180
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • site.webmanifest
  • lumatool-favicon-pack.zip

尺寸指南

  • 16x16: browser tab favicon.
  • 32x32: high-density browser favicon.
  • 180x180: Apple Touch Icon for iOS shortcuts.
  • 192x192: Android and PWA launcher icon.
  • 512x512: high-resolution PWA icon.
  • favicon.ico: legacy browser compatibility.

输入示例

  • Company logo PNG
  • Personal blog avatar
  • SaaS product mark
  • SVG logo
  • Transparent square icon

输出示例

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png 180x180
  • android-chrome-192x192.png
  • android-chrome-512x512.png

常见使用场景

  • Prepare a complete favicon pack before launching a website.
  • Replace inconsistent legacy favicon files with a modern set.
  • Create mobile shortcut and PWA icons from the same source artwork.
  • Generate HTML tags that match the exported filenames.
  • Preview how a transparent logo behaves on light and dark surfaces.

最佳实践

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

示例

输入示例

输入示例 
Company logo PNG
Personal blog avatar
SaaS product mark
输出示例 
favicon.ico
favicon-16x16.png
favicon-32x32.png

网站图标生成器 creates favicon.ico, PNG favicons, Apple Touch Icon, Android Chrome icons, a site.webmanifest file, and copyable HTML tags from one local image.

输出示例

输入示例 
one source icon image
输出示例 
favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png 180x180
android-chrome-192x192.png

你的文件会在浏览器本地处理，不会上传到 LumaTool 服务器。图片解码、Canvas 缩放、ICO 打包、ZIP 生成、manifest 生成和 HTML 代码生成都在客户端完成。

隐私提示

你的文件会在浏览器本地处理，不会上传到 LumaTool 服务器。图片解码、Canvas 缩放、ICO 打包、ZIP 生成、manifest 生成和 HTML 代码生成都在客户端完成。

如何使用

  1. 第 1 步. 上传图片，或输入图标文件路径。
  2. 第 2 步. 选择适合网站、应用或 PWA 的输出选项。
  3. 第 3 步. 下载前检查预览、生成文件、manifest 或 HTML 代码。
  4. 第 4 步. 按需下载单个文件、下载 ZIP，或复制生成代码。

真实场景案例

Prepare a complete favicon pack before launching a website

Prepare a complete favicon pack before launching a website.

Replace inconsistent legacy favicon files with a modern set

Replace inconsistent legacy favicon files with a modern set.

Create mobile shortcut and PWA icons from the same source artwork

Create mobile shortcut and PWA icons from the same source artwork.

使用场景

  • Prepare a complete favicon pack before launching a website.
  • Replace inconsistent legacy favicon files with a modern set.
  • Create mobile shortcut and PWA icons from the same source artwork.
  • Generate HTML tags that match the exported filenames.
  • Preview how a transparent logo behaves on light and dark surfaces.

常见问题

What favicon size do I need?

Use 16x16 and 32x32 PNG for browser tabs, 180x180 for Apple Touch Icon, 192x192 and 512x512 for Android and PWA, plus favicon.ico for compatibility.

Do I need favicon.ico and PNG icons?

Yes, for broad compatibility. Modern browsers handle PNG well, while favicon.ico still helps older and legacy contexts.

Is my image uploaded to the server?

不会。处理过程在浏览器本地完成，文件不会上传到 LumaTool 服务器。

Can I use SVG as input?

Yes. SVG input is sanitized and rendered locally before PNG and ICO outputs are generated.

Where should I put favicon files?

Place them in your website public root or another static folder, then make sure the generated HTML paths match.

Why does my browser still show the old favicon?

Browsers cache favicons aggressively. Clear cache, use a private window, or change the filename and HTML path.

网站图标生成器 适合做什么？

网站图标生成器 适合在浏览器里快速完成图标工具相关的检查、转换、清理或格式化任务。

我的输入会如何处理？

你的文件会在浏览器本地处理，不会上传到 LumaTool 服务器。图片解码、Canvas 缩放、ICO 打包、ZIP 生成、manifest 生成和 HTML 代码生成都在客户端完成。

相关工具

I

ICO 图标转换器

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

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

应用图标生成器

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

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

图标尺寸批量生成

把 PNG、JPG、WebP 或 SVG 批量生成常见方形尺寸，支持 contain、cover、透明、背景色和 ZIP。

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

Favicon HTML 标签生成器

生成 favicon.ico、PNG favicon、Apple Touch Icon、manifest、theme-color 和 mask-icon 的 HTML head 标签。

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

图片 Base64 转换器

本地把图片转换为 Base64 Data URL，也可粘贴 Base64 预览图片。

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