Favicon 生成器教程：上传图片一键生成多尺寸图标、ICO 与 PWA manifest

Favicon 生成器教程：上传图片一键生成多尺寸图标、ICO 与 PWA manifest

📁 设计👁️ 150 阅读⏱️ 5 分钟阅读🕒 2026/9/14

免费在线 Favicon 生成器，上传一张图片即可生成 16 到 512 共 11 种尺寸图标，支持裁剪模式、形状裁剪、透明背景、多分辨率 favicon.ico 打包与 HTML 代码一键复制。

工具简介

Favicon 生成器是工具派推出的一款网站图标一站式制作工具：上传一张 Logo 或图片，即可在浏览器本地自动生成 16×16 到 512×512 共 11 种尺寸的图标，并支持打包下载包含多分辨率 favicon.ico、各尺寸 PNG 以及 PWA 所需的 site.webmanifest 的 ZIP 压缩包，同时给出可直接粘贴的 HTML <head> 引用代码。所有渲染都在 Canvas 上本地完成，图片不会上传到任何服务器，无需安装、打开即用。

功能亮点

  • 11 种常用尺寸一键生成：覆盖 16、32、48、64、96、128、180（apple-touch-icon）、192、256、384、512 全系列，默认勾选 16/32/48/180/192/512 六个最常用尺寸，可「全选」或逐个勾选。
  • 三种裁剪模式：居中 contain（完整显示、留白居中）、裁剪 cover（铺满、裁掉多余部分）、拉伸（强制撑满，可能变形），适配不同比例的原图。
  • 四种图标形状：方形、圆角（20% 圆角半径）、圆形、自适应（maskable，自动留 20% 安全边距，适配 Android 自适应图标裁切）。
  • 背景与透明控制：可自定义背景填充色（默认白色 #ffffff），也可勾选「透明」输出透明背景图标。
  • 多分辨率 favicon.ico 打包：勾选后自动把 ≤256 的尺寸合并进一个标准 .ico 文件，老浏览器兼容性最好。
  • HTML 代码与 manifest 自动生成：实时生成 <link> 引用标签和 site.webmanifest 内容，支持自定义文件前缀和应用名称，一键复制。
  • 单个下载 + ZIP 打包：预览区每个尺寸可单独下载 PNG，也可一键打包全部文件（命名格式 原文件名-icons.zip）。

参数说明

参数 说明 默认值 / 取值
上传图片 源图片，点击或拖拽上传 JPG、PNG、WEBP、SVG，最大 5MB
尺寸选择 勾选需要生成的图标尺寸，可全选/取消全选 默认 16、32、48、180、192、512
裁剪模式 原图与目标尺寸比例不一致时的适配方式 居中 contain（默认）/ 裁剪 cover / 拉伸
图标形状 输出图标的外形裁剪 方形（默认）/ 圆角 / 圆形 / 自适应 maskable
背景填充色 图标底色，取色器或十六进制输入 默认 #ffffff；勾选「透明」后禁用
透明 勾选后输出透明背景图标 默认不勾选
打包多分辨率 favicon.ico 将 ≤256 的尺寸合并生成 .ico 放入 ZIP 默认勾选
文件前缀 HTML 代码中图标文件的路径前缀 默认 /favicon
应用名称 site.webmanifest 中的 name / short_name 默认 My App

使用步骤

  1. 打开工具页面：左侧为参数调节区（上传、尺寸、裁剪、形状、背景、下载），右侧上方为尺寸预览区，下方在上传图片后显示生成的 HTML 代码与 manifest。下图为初始空态，上传图片后右侧会自动生成各尺寸图标预览。

Favicon 生成器主界面（初始空态）：左侧为上传区、尺寸选择复选框、裁剪模式、图标形状、背景填充色与打包下载按钮；右

  1. 上传源图片：点击上传区域或把图片拖拽进去，支持 JPG、PNG、WEBP、SVG，最大 5MB。上传成功后会显示文件名、大小和原始尺寸。建议使用 ≥512×512 的正方形高清图，缩小后更清晰。

  2. 勾选尺寸：在「尺寸选择」中勾选需要的规格。默认勾选的 16/32/48 用于浏览器标签页，180 用于 iOS 主屏（apple-touch-icon），192/512 用于 PWA 与 Android，一般保持默认即可覆盖主流场景。

  3. 选择裁剪模式与形状：原图不是正方形时，「居中 contain」会完整保留图形并留白；「裁剪 cover」会铺满画布并裁掉多余部分；「拉伸」直接撑满（可能变形）。形状可选方形、圆角、圆形或自适应（maskable）。

  4. 设置背景：用取色器设置背景填充色（默认白色），源图本身带透明背景且希望保留时，勾选「透明」即可。

  5. 预览并下载：右侧「尺寸预览」区实时显示每个勾选尺寸的效果，单个图标可点「下载」单独保存；确认无误后点「打包下载 ZIP」，压缩包内含全部 PNG、多分辨率 favicon.ico（勾选时）和 site.webmanifest（勾选了 ≥192 尺寸时）。

  6. 复制 HTML 代码：在「HTML <head> 代码」区设置「文件前缀」（图标部署路径，默认 /favicon）和「应用名称」，复制 <link> 标签粘贴到网页 <head> 中；site.webmanifest 内容可复制或单独下载，把 ZIP 里的文件按前缀路径部署到网站根目录即可生效。

使用技巧

  • 源图越大越清晰：所有尺寸都由原图缩小渲染，上传 512×512 或更大的正方形图，小尺寸（16×16）细节保留最好；小图放大成 512 会模糊。
  • 做 PWA 务必勾选 192 和 512：只有勾选了 ≥192 的尺寸，ZIP 中才会生成 site.webmanifest，且 manifest 的 purpose 会随形状自动设置为 maskable any（自适应形状）或 any。
  • 「自适应」形状自带安全区：选择 maskable 后图形会自动缩到 80% 区域内，避免被 Android 系统的圆形/水滴形裁切遮挡关键内容，重要 Logo 元素建议本身就放在画面中心。
  • 透明背景 vs 背景色：图标用于浏览器标签页时建议保留透明；用于 iOS 主屏（apple-touch-icon）时系统不支持透明，建议设一个品牌色背景。
  • 非正方形 Logo 优先用 contain：「裁剪 cover」会切掉边缘内容，容易把 Logo 切残；「居中 contain」配合背景色或透明最安全。
  • 文件前缀要与部署路径一致：例如图标放在 https://example.com/icons/ 下，就把前缀改为 /icons，生成的 <link> 代码会自动拼好路径，复制即用。

常见问题

Q1：支持上传什么格式、多大的图片？
支持 JPG、PNG、WEBP、SVG，文件最大 5MB。超出限制或非图片文件会在页面顶部给出红色错误提示。

Q2：生成的 ZIP 包里都有什么？
包含所有勾选尺寸的 favicon-{尺寸}x{尺寸}.png；若勾选「打包多分辨率 favicon.ico」且存在 ≤256 的尺寸，额外包含合并好的 favicon.ico；若勾选了 ≥192 的尺寸，额外包含 site.webmanifest。

Q3：16×16 的图标看起来很糊怎么办？
这是小尺寸图标的通病。建议：上传更高清的源图；简化 Logo 细节（细线条在小尺寸下会糊成一团）；优先使用「居中 contain」避免边缘信息丢失。

Q4：「自适应」和普通形状有什么区别？
自适应（maskable）会把图形限制在 80% 的安全区内，保证被 Android 系统裁成圆形、圆角方形等任意形状时主体不被切掉，生成的 manifest 也会标记 purpose: "maskable any"，是做 PWA 图标的推荐选项。

Q5：我的图片会上传到服务器吗？
不会。图片读取、Canvas 渲染、ICO 合成、ZIP 打包全部在浏览器本地完成，断网也能使用（页面已加载的前提下），隐私安全有保障。