文件

Favicon 网站图标生成器

上传一张图片，在浏览器本地一次性生成完整的 favicon 图标集——favicon.ico、各尺寸 PNG 图标、Apple Touch 图标、Android Chrome 图标以及 Web App manifest 清单文件。可调整背景、内边距与圆角，并直接复制可粘贴的 HTML 代码。

  • 一次生成 favicon.ico 以及 16、32、48、180、192、512 像素的 PNG 图标
  • 支持 PNG、JPG、WebP、SVG、GIF，并按真实 favicon 尺寸实时预览
  • 可设置背景颜色、内边距与圆角，所见即所得
  • 生成 site.webmanifest，包含应用名称、简称与主题色
  • 一键复制 HTML <link> 代码，或将全部文件打包为 ZIP 下载
工具/Favicon 生成器

将图片拖到这里，或点击选择文件

建议使用 512×512 或更大的正方形图片，图标更清晰。

支持 PNG、JPG、WebP、SVG、GIF。

0%
0%

这几项只写入 site.webmanifest，仅在网站被安装为应用（PWA）时生效，不会改变图标图片本身。

0 个文件
上传图片即可生成图标集，预览与文件会显示在这里。
命令

功能简介

一张源图，产出现代网站需要的所有图标，连同把它们接好的 HTML 标签。

  1. 01

    浏览器需要的每一种尺寸

    生成 16 像素（标签页与书签）、32 像素（高分屏标签与 Windows 任务栏）、48 像素（Windows 站点图标）、180 像素（iOS 主屏）以及 192 / 512 像素（Android 与 PWA 安装）。

  2. 02

    多帧 favicon.ico

    浏览器默认会请求 /favicon.ico。生成的 .ico 内嵌 16、32、48 像素三帧，让浏览器直接挑合适的那帧，而不是把单张位图硬缩放。

  3. 03

    背景、内边距与圆角

    可保留透明或填充纯色，加内边距让图形在 Android / iOS 遮罩内留出余地，再设置圆角——每次调整都会在所有尺寸上即时重渲染。

  4. 04

    可安装的 Web 应用清单

    生成合法的 site.webmanifest，含 name、short_name、theme_color 以及 Chrome 与 Android 在「添加到主屏幕」安装提示和启动画面用到的 192 / 512 像素图标条目。

  5. 05

    与文件名匹配的标签

    输出现成的 <link rel="icon">、apple-touch-icon 与 manifest 标签，文件名已经对齐，复制即用。

  6. 06

    完全本地，不上传

    解码、缩放、.ico 组装全部用 Canvas API 在浏览器内完成，logo 与品牌素材绝不经过服务器。

如何使用

从一张原始 logo 到接好图标，五步搞定。

  1. 01

    上传正方形源图——512×512 或更大的 logo / 标识，能让小尺寸保持清晰。

  2. 02

    选择透明或纯色背景；iOS 会把透明区域填成黑色，所以面向苹果主屏时请选纯色。

  3. 03

    加一点内边距（避免自适应遮罩裁到图形），需要固定形状时再设置圆角。

  4. 04

    填写名称、简称与主题色——右侧 site.webmanifest 预览会随输入实时更新。

  5. 05

    下载 ZIP，把文件放到站点根目录，并在每个页面的 <head> 里粘贴 HTML 代码。

功能说明

完整一套文件，对应各平台实际加载图标的方式。

  • favicon.ico 内嵌 16 / 32 / 48 像素三帧，用于标签页、书签与 Windows 任务栏
  • 独立的 16、32、48 像素 PNG，用于现代 <link rel="icon"> 声明
  • 180 像素 apple-touch-icon.png，用于 iOS 与 iPadOS 主屏
  • 清单引用的 192 与 512 像素 android-chrome 图标，用于安装与启动画面
  • site.webmanifest 含 name、short_name、theme_color、background_color 与图标条目
  • 透明或纯色背景，内边距与圆角可调，并应用到每一种尺寸
  • 支持 PNG、JPG、WebP、SVG、GIF 输入——SVG 会在每个目标尺寸清晰栅格化
  • 一键 ZIP，外加可直接复制的 HTML 与实时清单预览

适合哪些场景

只要想让项目在标签栏和主屏上看起来「做完了」，就用得上。

  1. 新站上线

    把构建工具留下的那张孤零零 16 像素 favicon，换成在 Retina 标签和固定磁贴上都清晰的完整套图。

  2. 让站点可安装

    生成 PWA 所需的 192 / 512 像素图标与清单，让 Chrome 弹出安装提示、Android 渲染出像样的主屏图标与启动画面。

  3. 一次性换标

    换上新 logo，几秒内重新生成整套图标——不用再手动逐个尺寸去找。

  4. 内部工具与后台

    给管理面板或副业项目一个可辨识的标签图标，免得在二十个标签页里被淹没。

  5. 框架项目

    为 public/（Astro、Vite、SvelteKit）或 app/（Next.js）目录补齐完整套图，替换框架默认图标。

  6. 交付给开发者

    交付一个 ZIP 加上现成的 <head> 标签，任何人都能接入，不必猜文件名和尺寸。

延伸阅读

如果源图格式需要先统一，可以先用 图片格式转换 转成干净的 PNG。若 logo 过大，想在生成图标前先压缩，可试试 图片压缩 在不损失小尺寸所依赖细节的前提下让源图更轻量。

使用建议

到了 16 像素就无处遁形——这些习惯能让图标在哪都清晰。

  • 从正方形高清源图（512×512 或更大）开始；工具能缩小细节，但变不出细节。
  • 简化图形：去掉标语和发丝级线条，它们在 32 像素以下会糊成一团。
  • 面向苹果主屏请用纯色背景——iOS 会把透明替换成黑色，且不会替你做圆角。
  • 留约 10–15% 的内边距，让 Android 自适应遮罩（圆形、squircle、圆角方形）不会裁到 logo。
  • 让 theme_color 贴合品牌、background_color 贴合图标，PWA 启动画面才显得是有意为之。
  • 在真实标签页、固定标签和手机「添加到主屏幕」里都验证一遍，再算完成。

边界与注意事项

缩放与打包交给工具；有几件事仍取决于源图和平台本身。

  • 放大很小的源图只是加像素、不是加细节，小图标依然会糊。
  • 动态 GIF 会被压平为第一帧静态图。
  • SVG 按尺寸逐个栅格化；滤镜、外部字体等效果的渲染可能和编辑器里不一致。
  • 圆角会烘焙进 PNG，自带遮罩的平台会再圆一次——若系统已给图标塑形，请把圆角设为 0。
  • 清单覆盖日常字段；maskable 图标、截图、快捷方式等高级 PWA 配置需手动添加。
  • 浏览器对 favicon 缓存很顽固——更新后可能要强制刷新或加版本参数才能看到。

常见问题

格式、尺寸、清单、安装，以及那个常见的缓存坑。

会生成哪些文件？

一个 favicon.ico（16/32/48 像素帧），16、32、48、180、192、512 像素的 PNG 图标，以及 site.webmanifest——外加可直接复制的 HTML 代码和实时清单预览。

源图片应该多大？

至少 512×512 的正方形。更大的正方形源图能干净缩放到所有尺寸；小于 512 的图，一旦 Android 和 PWA 请求大图标就会显糊。

可以用 SVG 吗？

可以——SVG、PNG、JPG、WebP、GIF 都支持。SVG 会在每个目标尺寸栅格化为清晰 PNG，因为它可无损缩放，正适合做图标源。

背景该用透明还是纯色？

浏览器标签页用透明没问题。但 iOS 在主屏会把透明填成黑色，所以面向 apple-touch-icon 时请选纯色背景。

我的图片会被上传吗？

不会。解码、缩放、.ico 组装都在浏览器本地用 Canvas API 完成，图片不会离开你的设备。

文件应该放在哪里？

放到站点根目录——与 index.html 同级（多数框架里是 public/）。然后把 HTML 代码粘贴到每个页面的 <head> 中。

还需要 favicon.ico 吗？

需要。浏览器会自动请求 /favicon.ico，Windows 的任务栏和固定磁贴也依赖它。代码里会与 PNG 图标一起引用它，覆盖才完整。

我换了图标，浏览器却还显示旧的？

favicon 缓存很顽固。强制刷新（Ctrl/Cmd+Shift+R）、重新打开标签页，或加版本参数如 favicon.ico?v=2，逼浏览器拉取新文件。

更多相关工具

搭配图片格式转换与压缩，为图标准备干净的源图素材。