从徽标、字体图标或字母组合构建完整的 favicon 包——favicon.ico、现代 PNG、Apple 触摸图标、PWA 图标、Web 清单以及 HTML 代码。

拖入徽标、选择一个字体图标或输入字母组合——我们会生成现代网站所需的全部 favicon,从经典的 favicon.ico 到 Apple 触摸图标、PWA 图标,以及一段可直接粘贴的 HTML 代码。

将 PNG 拖到此处,或点击上传
推荐透明 PNG · 也支持 JPG / WebP
64%
背景颜色
0%
供浏览器界面和 PWA 清单使用。
你的网站
example.com
书签 · 32px
Apple 触摸 · 180px
PWA · 512px

你的 favicon 包已就绪
ZIP 下载已开始。请将其解压到网站根目录,并把 HTML 代码粘贴到你的 <head> 中。

关于 favicon 生成器

网站图标生成器可以根据单一素材来源构建现代网站所需的每一种图标:上传 PNG 徽标、选择字体图标,或输入首字母组合。生成包会包含经典的 favicon.ico(16、32 和 48 像素)、现代 PNG 网站图标、180 像素的 Apple 触摸图标、192 和 512 像素的 PWA 图标、一个 site.webmanifest 文件以及 HTML 头部代码片段。

样式设置全部在工具内完成:选择背景色或保持透明、裁剪为方形、圆角或圆形,调整内边距和素材尺寸,并设置浏览器界面和 PWA 清单所使用的主题色。实时预览会展示图标在真实场景中的效果——16 像素浏览器标签、书签、Apple 触摸图标以及 PWA 图标。

一切都在浏览器的画布上渲染完成,点击“生成”会将整个包组装为一个附带 README 的 ZIP 文件。安装只需两步:解压到网站根目录,并将提供的代码片段粘贴到你的 <head> 中。

如何使用 favicon 生成器

  1. 选择你的素材来源:上传 PNG 徽标、选择字体图标,或输入首字母组合。
  2. 设置样式——背景色或透明、形状、内边距和素材尺寸。
  3. 为 PWA 清单填写网站名称、简称和主题色。
  4. 查看预览:浏览器标签、书签、Apple 触摸图标和 PWA 场景。
  5. 点击“生成网站图标”,并将生成包解压到你的网站根目录。
  6. 将生成包中的 HTML 代码片段粘贴到你页面的 <head> 中。

常见问题

是的——包括 .ico、所有 PNG 尺寸、清单文件和 HTML 代码片段在内的完整生成包,生成和下载都完全免费。

包含 16、32 和 48 像素图层的 favicon.ico、现代 PNG 网站图标、180 像素的 apple-touch-icon、192 和 512 像素的 PWA 图标、一个 site.webmanifest 文件、可直接粘贴使用的 HTML 代码片段,以及一份带安装步骤的 README。

需要。浏览器和爬虫仍会请求 /favicon.ico 作为回退选项,老旧客户端也依赖它。生成包会将它与现代 PNG 链接一起提供,确保每位访客都能看到清晰的图标。

将压缩包解压到网站根目录,使文件位于域名根路径下,然后将提供的 HTML 代码片段粘贴到页面的 <head> 中。ZIP 中的 README 会重复说明这些步骤。

它会写入清单文件和 meta 标签中,为移动端浏览器界面以及已安装 PWA 的启动画面和标题栏着色,使其与你的品牌保持一致。

可以。输入一到两个字母的首字母组合,选择字体和颜色,或从字体图标库中挑选一个字形——生成器会像处理上传的徽标一样,将其渲染为每种所需尺寸。


热门搜索
favicon 生成器 favicon.ico 制作 在线创建 favicon apple touch icon pwa 图标生成器 从 logo 生成 favicon
需要帮助?
使用此工具时遇到问题?请告诉我们的团队。
报告问题

将此免费工具添加到你自己的网站 — 复制并粘贴下面的代码。