Kaochepai.com
简体中文
首页 图片转 Favicon

图片转 Favicon

将任意 Logo 或图片转换为 16、32、48、64、128 像素的 favicon——100% 在浏览器中完成。

源文件

将图片拖到此处

或点击选择文件

.png.jpg.webp.gif.bmp

选项

Favicon 是什么？

Favicon（ favorites icon 的缩写）是显示在浏览器标签页、书签栏、历史记录、地址栏以及移动端主屏快捷方式中网站名称旁边的小方形图标。常见尺寸为 16×16 或 32×32 像素，但现代高 DPI 屏幕通常使用 48×48、64×64 甚至 128×128 的图标，以便在 Retina 和 4K 屏幕上保持清晰。Favicon 能让用户一眼识别网站，强化品牌识别度，并提升任何 Web 项目的整体专业感。

虽然 .ico 容器曾是历史标准，但现代浏览器通过 <link rel="icon"> 元素支持 PNG、GIF、SVG 和 WebP 格式的 favicon。PNG 是目前最受欢迎的格式，因为它支持透明、兼容性广、并且能从任何图像编辑器或在线工具轻松生成。这款 favicon 生成器输出指定尺寸的 PNG 文件，你可以直接在 HTML 中引用，无需额外转换。

需要哪些 favicon 尺寸？

不同使用场景需要不同的 favicon 尺寸。普通桌面浏览器标签页通常显示 16×16 图标，而高 DPI 笔记本会渲染 32×32 版本以保持清晰。浏览器地址栏和新标签页的"常用网站"磁贴通常使用 32×32 或 48×48。当用户将你的网站添加到 iOS 或 Android 主屏幕时，系统会使用更大的图标——iOS 通常为 180×180，Android 则为 192×192 / 512×512。下表总结了最常见的 favicon 尺寸及其用途。

尺寸典型用途
16×16经典浏览器标签页 favicon、书签栏
32×32高 DPI 桌面浏览器标准 favicon、地址栏
48×48Windows 任务栏固定、部分浏览器新标签页
64×64桌面快捷方式、较大的书签显示
128×128Chrome 应用商店、较大 PWA 图标、macOS 程序坞

如果只需一个 favicon，32×32 PNG 是最稳妥的默认选择——所有现代浏览器都支持，并且在标准和高清屏上都很清晰。使用本工具的"全部尺寸"选项可下载一整套图标，覆盖所有场景。

如何将 favicon 添加到网站

生成并下载 favicon 后，将 PNG 文件复制到网站根目录或 /assets/ 目录，然后在每个 HTML 页面的 <head> 中加入以下代码。每条 <link rel="icon"> 标签指向不同尺寸；浏览器会根据当前显示器选择最匹配的图标。

<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">
<link rel="apple-touch-icon" href="/favicon-128.png">

为了最大兼容性，建议在站点根目录也保留一个 favicon.ico；一些旧浏览器和工具仍会默认请求该 URL。现代浏览器会使用 <link> 标签中引用的相应尺寸 PNG。

何时需要使用 favicon 生成器

任何希望在拥挤的浏览器标签栏中显得精致、易识别的网站都需要 favicon。生成 favicon 是许多常见工作流中一个快速而高收益的步骤：

  • 新网站上线。 在发布前添加 favicon，让标签页和书签从第一天起就显专业。
  • 品牌升级。 从新 Logo 快速重新生成 favicon，无需打开图形编辑器。
  • 渐进式 Web 应用。 生成可安装 PWA 和主屏快捷方式所需的图标集。
  • 开源项目。 为文档站点或演示项目创建 favicon，便于识别。
  • 客户交付。 在最终网站交付物中附上一整套 favicon 尺寸。
  • 个人博客与作品集。 用自定义图标在读者的标签栏中脱颖而出。

如何生成 favicon

用这款工具生成 favicon 只需几秒，完全在浏览器中完成。无需上传、无需注册、无需安装。按以下步骤操作：

  1. 上传图片。 拖拽 PNG、JPG、WebP、GIF 或 BMP 文件，或点击浏览选择。方形图片效果最佳。
  2. 选择尺寸。 选择单个 favicon 尺寸（16、32、48、64 或 128 像素），或选择"全部尺寸"下载完整图标集。
  3. 生成。 点击"生成 Favicon"，工具会通过 Canvas API 按所选尺寸重新渲染图片并预览每个结果。
  4. 下载。 点击"下载 Favicon"保存 PNG。选择"全部尺寸"时会依次下载每个尺寸。

由于所有步骤都通过 JavaScript 和 Canvas API 在本地运行，源图片不会离开你的浏览器。这使工具完全私密、快速，并适合处理敏感品牌素材。

这款 favicon 生成器免费吗？

完全免费，无注册、无水印、无限制。

输出什么格式？

带透明通道的 PNG。所有现代浏览器都支持将 PNG 作为 favicon 格式。

能生成 .ico 文件吗？

本工具输出 PNG。PNG 在所有现代浏览器中可用；.ico 主要用于非常旧的浏览器，它们会自动回退到 /favicon.ico。

图片会被上传吗？

不会，所有处理都在本地完成，图片不会离开你的浏览器。