跳到内容
DevLab

⭐ Favicon 生成器

拖放 PNG / SVG → 一次生成所有尺寸 → ZIP 下载 + 复制 HTML 代码片段。

完全免费 无需注册 浏览器内完成 5 种语言 深色模式

🔒 关于隐私

📂

拖放正方形 PNG 或 SVG (推荐 512x512 或更大)

📖 常见的坑

把正方形的 PNG 或 SVG 一次性导出为所需的各种尺寸，打包成 ZIP，并生成可贴进 <head> 的 HTML 片段。处理全部在浏览器内完成。把文件备齐，和它们真的按预期显示，是两个不同的问题：浏览器、操作系统与搜索引擎各按各的规则来取 favicon，而且缓存异常顽固，因此若不把「如何验证」也纳入流程，必然翻车。

情形 会发生什么 怎么处理
换过了，旧图标却还在显示 favicon 存放在与页面 HTML 不同的缓存中，普通刷新不会重新拉取。Chrome 有一个专用的 favicon 数据库，即便强制刷新（Ctrl+Shift+R）也未必能清掉。书签栏、标签页、历史记录、系统快捷方式各自按不同时机更新，因此「标签页已是新图标、书签仍是旧的」完全属于常态。若前面还有 CDN，那里也会留着旧文件。 改文件名或加查询串是最稳的做法：改成 <link rel="icon" href="/favicon-v2.png">，至少也要加上 ?v=2。验证请在隐私窗口里做——在普通窗口反复刷新只是一遍遍读同一份陈旧缓存，白白耗时间。若隐私窗口里仍是旧图标，那问题多半不在缓存，而是 <link> 的路径写错了，请到 DevTools 的 Network 面板看文件是否真的被请求；出现 404 一眼就能看出。
缩到 16px 就糊成一团，看不出是什么 浏览器标签页上显示的实际上是 16×16（高 DPI 下为 32×32）。把 logo 原样缩小，低于 1px 的笔画会消失，细字体会糊成灰团。字数稍多的公司名标志基本全军覆没，远看只是一个灰方块。这不是导出质量的问题，而是信息量装不下的物理限制：16×16 只有 256 个像素，勉强够画一个字。 请为 16px 和 32px 分别设计。只放一个放大的首字母、只裁出符号部分、把线宽加粗到 2px 以上——大厂服务的 favicon 之所以个个极简，原因正在于此。把 SVG favicon（<link rel="icon" type="image/svg+xml">）与 PNG 搭配使用，可以在大尺寸下展示完整设计，只替换小尺寸（SVG 内部无法使用 @media (max-width: 16px)，实务上是另备 PNG 并用 sizes 属性分流）。务必按实际尺寸判断——盯着放大的预览做评估，正是出错的典型方式。
添加到 iOS 主屏幕后背景变成黑色 如果给 apple-touch-icon 一张透明 PNG，iOS 会把透明区域填成黑色（某些场景下是白色）。哪怕设计上就想「不要背景」，系统也必定要一个不透明的正方形。同理，自己先把四角做成圆角，就会与系统的圆角叠加两次，导致四角被切掉。主屏幕图标显得格外难看的情况，绝大多数就是这两种。 请打开本工具的「添加背景色」，导出一张填满整个正方形的不透明图片。不要自行加圆角，安全边距留整体的 10% 左右——系统做圆角时，会把顶到边缘的设计切掉。准备 180×180 即可覆盖现行的 iPhone 与 iPad。若完全不写 <link rel="apple-touch-icon">，iOS 会拿页面截图当图标——「主屏幕上莫名排着一堆页面缩略图」就是这么来的。

<link rel="icon"> 与 site.webmanifest 中的 icons 是两码事，两者都需要。前者用于浏览器标签页，后者用于 Android 主屏幕与 PWA，只更新其中一个，就常常导致「唯独 Android 还是旧图标」。搜索结果里的 favicon 另有规则：Google 基本上会去站点根目录取，所以务必放置 /favicon.ico，并且推荐使用 48 的倍数（48/96/144…）；只提供 16×16 的话，在搜索结果中会被放大而发糊。最容易忘的是不要在 robots.txt 里屏蔽图标所在目录：像 Disallow: /assets/ 这样宽泛的规则，会导致唯独 favicon 取不到，搜索结果显示默认的地球图标。生效需要数天到数周，所以不要在刚发布时就下判断。

📖 使用方法

  1. 1
    加载图片
    推荐正方形 512x512 或更大。
  2. 2
    自动生成所有尺寸
    预览 16 到 512 px。
  3. 3
    获取 ZIP 和片段
    下载 ZIP 并将片段粘贴到 <head>。

❓ 常见问题

图片会上传吗？
不会。仅在浏览器内处理。
SVG 会模糊吗？
SVG 是矢量,所有尺寸都清晰。
生成 .ico 吗？
现代浏览器支持 PNG。如需 .ico 可重命名 32x32 PNG。

🔗 相关工具

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。

※ 为复现问题,浏览器信息 (UA / 屏幕 / 语言 / URL) 将自动发送