无需上传、100% 本地处理、无需账户

Favicon 生成器

上传你的徽标或图标，下载所有标准 favicon 尺寸的 PNG。包含 Apple Touch Icon 和 PWA 图标。不离开你的设备。

Favicon 生成器 的工作原理

图标生成器接受你提供的任何图像，使用 Canvas drawImage API 将其调整为标准图标尺寸：16x16、32x32、48x48、180x180（Apple 触摸图标）、192x192（Android Chrome）和 512x512（PWA 清单）。全部六种尺寸在你的浏览器中生成，并作为单独的 PNG 文件下载。你的源图像不离开你的设备。

完整的图标集涵盖浏览器标签页图标、书签、主屏幕快捷方式和 PWA 启动画面的全部范围。使用高分辨率源图像（至少 512x512 像素）可为缩放算法提供最多细节。引用每个生成文件所需的 HTML link 标签显示在代码片段中，你可以直接复制到页面的 head 元素中。

作者 Bastien Sulyan

Favicon 生成器 的分步使用说明

  1. 将源图像拖到上传区域。为获得最佳效果，使用 512 像素或更大的方形图像。
  2. 在结果面板中预览六种生成的尺寸。
  3. 在结果面板中逐个单独下载这六个 PNG 文件。
  4. 复制显示所有尺寸 link 标签的 HTML 代码片段。
  5. 将 PNG 文件放在你的网站根目录，并将 link 标签粘贴到你的页面 head 中。

常见使用场景

  • 开发者建立新网站，需要从品牌徽标生成所有图标尺寸，无需设计工具订阅。
  • PWA 作者生成网络应用清单中主屏幕安装所需的 192x192 和 512x512 图标。
  • 博主刷新网站标识，用从徽标构建的自定义图标替换默认图标。
  • 自由职业者快速为客户项目生成完整的图标集，无需等待安装离线设计软件。

常见问题

可以使用哪些图像格式作为源？

浏览器可以解码的任何格式都可以作为输入：JPEG、PNG、WebP、GIF 和 SVG。对于 SVG 源，浏览器在调整大小之前将矢量光栅化到 Canvas，因此输出 PNG 无论如何都是光栅图像。

为什么我的图标在浏览器标签页中显示模糊？

16x16 和 32x32 尺寸非常小。如果源图像包含精细的细节或细线，它们在缩小后将无法保留。简单、粗体、形状清晰的设计在小尺寸下比复杂的插图效果好得多。

工具生成 ICO 文件吗？

会。除了六个 PNG 文件之外，工具还会组装一个 favicon.ico，将 16x16、32x32 和 48x48 三种尺寸打包进同一个文件，这正是旧版 Windows 浏览器和部分爬虫仍会在网站根目录寻找的格式。现代浏览器使用 PNG 链接即可正常工作，因此两者都发布不会带来额外成本，且能让每个客户端自行选择。

源图像是在服务器上处理的吗？

不是。生成每种尺寸的 Canvas drawImage 调用在你的浏览器标签页中运行。源图像从你的本地磁盘读取，六个 PNG 输出在内存中创建并提供为下载。没有文件数据通过服务器。

Apple 触摸图标应该使用哪种尺寸？

iOS 和 iPadOS 使用由 apple-touch-icon link 标签引用的 180x180 像素 PNG。当用户将你的网站添加到 Apple 设备的主屏幕时，使用此尺寸。工具与其他尺寸一起生成此文件。

可以使用矩形图像作为源吗？

可以，但输出将被信箱格式化或加柱子以适应方形 Canvas。为获得最佳效果，从方形开始，或在使用工具之前将源图像裁剪为方形。