Favicon 生成器

新

从图片或文字生成完整的 favicon 套件，并下载 ZIP 压缩包。

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

在浏览器中生成完整的 favicon 图标集

这款 favicon 生成器可创建现代网站或 Web 应用所需的全部图标——浏览器 favicon、多尺寸 favicon.ico、Apple touch icon 以及可遮罩的 PWA manifest 图标——仅需一个源文件。选择图片、文字字母标志或表情符号，调整背景、形状和内边距，即可下载包含所有文件的 ZIP 压缩包，以及可直接粘贴到 <head> 的 HTML 代码片段。

与将图片发送至服务器的工具不同，这里的一切都在 HTML canvas 上本地渲染，速度快、免费、无需注册，且您的 logo 完全私密。无需账户、无需等待服务器处理、无广告干扰。

支持图片、SVG、字母或表情符号

三种输入模式覆盖所有使用场景。图片模式接受 PNG、JPG、SVG 和 WebP——上传正方形 logo，自动居中适配各尺寸；上传 SVG 后，还会直接输出清晰、可缩放的 favicon.svg。文字模式可将一到三个字母转换为干净的字母标志，支持自定义字体和颜色——适合还没有 logo 时使用。表情符号模式一键将任意表情符号渲染为 favicon，是为个人项目打造品牌标识的最快方式。

无论选择哪种方式，您都能获得完整的输出集：每个 PNG 尺寸、真正的 favicon.ico、可选的 favicon.svg、Web 应用 manifest 以及 HTML 代码。涵盖所有浏览器、所有操作系统，从 Chromebook 标签页到 Android 主屏幕的所有设备尺寸。

覆盖全部尺寸，生成真正的 favicon.ico

该工具生成 16×16、32×32 和 48×48 的 PNG（用于浏览器标签和 Windows），180×180 的 Apple touch icon，以及 192×192 和 512×512 的图标（用于 Android 和 PWA 主屏幕）。然后将 16、32 和 48 像素的位图编码为真正的多分辨率 favicon.ico——浏览器默认请求的容器文件——完全在浏览器内完成，无需服务器往返。

ICO 格式很重要。许多工具生成 32×32 的 PNG 后重命名为 favicon.ico，这虽然可用，但意味着浏览器始终从单一尺寸缩放。真正的多分辨率 ICO 可让浏览器为每种场景选择最清晰的尺寸。以 ZIP 格式下载完整集合，或单独获取任意尺寸的 .ico、.svg 或 manifest 文件。

正确生成 Apple touch icon 和可遮罩 PWA 图标

正确处理移动端图标是大多数 favicon 的薄弱环节。apple-touch-icon 以 180×180 纯色背景渲染（iOS 不支持透明背景，会自动为图标添加圆角）。192 和 512 尺寸的 manifest 图标以可遮罩图标形式生成——内容保持在约 80% 的安全区域内，这样 Android 将其裁剪为圆形、圆角方形等形状时不会切掉 logo。

实时预览模拟图展示您的图标在浏览器标签页、书签栏、iOS 和 Android 主屏幕上的效果，让您在发布前就能看到最终呈现。避免了反复发布、手机查看、调整再发布的繁琐流程。

UtiloKit 与 favicon.io 和 RealFaviconGenerator.net 的对比

favicon.io 是最受欢迎的 favicon 工具，确实出色——但它会将您的图片上传至其服务器，意味着您未发布的 logo 或客户资产会离开您的设备。RealFaviconGenerator.net 功能最全面，但多步骤向导对于快速项目来说过于繁琐，且同样在服务器端处理图片。favicon-generator.org 已经过时：仅生成基础 PNG 尺寸，没有可遮罩的 manifest 图标，也没有 SVG。

UtiloKit 全程在本地完成。您的图片永远不会离开浏览器。输出包括真正的多分辨率 ICO、带安全区填充的正确可遮罩 manifest 图标、可缩放 SVG，以及随时可粘贴的 <head> 代码片段——与 RealFaviconGenerator 相同的完整集合，但无需上传，无需向导。在 iPhone 和 Android 上同样可用：canvas API 在移动浏览器中运行良好，可直接在手机上生成并下载 favicon。

manifest 文件和 HTML 代码片段，即用即粘贴

除图标外，您还将获得完整的 site.webmanifest——包含应用名称、主题色和可遮罩图标条目——以及随时可复制的 <head> 代码片段，其中链接了 .ico、.svg、Apple touch icon 和 manifest，以及对应的 theme-color meta 标签。将其粘贴到 HTML 中，将文件上传至网站根目录，即告完成。

该代码片段适用于任何技术栈：纯 HTML、Next.js、Astro、Nuxt、SvelteKit、Remix。如果您的框架有专用的 favicon 配置（Next.js 的 app/icon.png、Astro 的 head 配置），PNG 文件同样可以直接使用。

Frequently asked questions

什么是 Favicon？

Favicon（收藏夹图标的缩写）是浏览器在页面标题旁边显示的小方形图标——出现在浏览器标签页、书签栏、历史记录以及有时的搜索结果中。通常以 16×16 或 32×32 像素显示，作为 favicon.ico 存放在网站根目录下。现代网站还会添加 favicon.svg、Apple touch icon 和 PWA 图标用于主屏幕。一个辨识度高的 favicon 能提升书签和搜索结果中的点击率。

Favicon 应该是什么尺寸？

从 16×16 和 32×32 开始——这是浏览器在标签页和书签中显示的两种尺寸——打包在一个 favicon.ico 中。为了全面覆盖，还需添加 48×48（Windows 使用）、180×180 的 apple-touch-icon（iOS 使用），以及 192×192 和 512×512 的 PNG（Android 和 PWA 主屏幕使用）。本生成器可从单一源文件一次性生成所有这些尺寸，无需手动调整大小或使用多个工具。

如何创建 Favicon？

选择一个来源——上传图片（PNG、JPG、SVG 或 WebP），输入一到三个字母，或粘贴表情符号——然后选择背景颜色、形状（方形、圆角或圆形）和内边距。工具在 canvas 上渲染所有 favicon 尺寸，将 16/32/48 打包进 favicon.ico，并提供包含所有文件的 ZIP 包以及用于粘贴到 <code><head></code> 的 HTML 片段。整个过程不到一分钟，无需设计软件。

上传 Logo 安全吗？

安全——因为实际上没有任何内容被上传。每个步骤都在您的浏览器中使用 HTML <code><canvas></code> 和 JavaScript 运行：图片在本地读取、缩放、编码为 PNG 和 ICO，并在您的设备上压缩成 ZIP。任何文件都不会发送到服务器，这与 favicon.io 和 RealFaviconGenerator.net 等在云端处理图片的工具不同。您的 logo 永远不会离开您的电脑——这对于处理客户项目或未发布产品的情况尤为重要。

为什么我的 Favicon 没有显示出来？

几乎总是浏览器缓存问题。浏览器会积极缓存 favicon，因此请进行强制刷新（Ctrl+F5），直接打开图标 URL（yoursite.com/favicon.ico）确认其能正常加载，或在隐私窗口中尝试。还请检查文件是否在网站根目录下，<code><link></code> 标签中的路径是否正确（开头的斜杠很重要），以及是否上传了所有尺寸。新 favicon 在书签和搜索结果中刷新可能需要一段时间——部署后请等待几个小时。

Favicon 生成器在 iPhone 和 Android 上可以使用吗？

可以——canvas API 和文件下载在 iOS Safari、Android Chrome 和三星 Internet 浏览器中均可正常使用。您可以从相机胶卷上传照片，输入字母，或粘贴表情符号，然后直接在手机上下载完整的 ZIP 包。在离开电脑时快速制作 favicon 原型非常实用。布局自适应小屏幕，375px 宽度下使用也很舒适。

什么是可遮罩图标（Maskable Icon）？

Manifest 图标（site.webmanifest 中列出的 192×192 和 512×512 PNG）是 Android 和已安装 PWA 使用的图标。可遮罩图标将重要内容保持在中央安全区内——约占图标的 80%——这样系统将其裁剪为圆形、squircle 或圆角方形时，logo 不会被截断。本生成器会自动为 192 和 512 尺寸的图标添加安全区内边距，并标记为 <code>purpose: maskable</code>，无需手动计算安全区域。