PNG 转 Favicon

把 PNG 转成 favicon.ico、apple-touch-icon 和各尺寸 PNG 图标。免费 PNG 转 favicon 工具，无需注册。

Favicon 生成器 — 从图片生成 favicon.ico

上传一张图片，一键转换生成 favicon.ico、apple-touch-icon 以及各尺寸 PNG 图标，适用于浏览器标签页、PWA、iOS 主屏幕、Android 应用等。

拖放图片到此处或点击上传

PNG, JPG, SVG

建议上传至少512x512像素的方形图片，以获得最佳效果

支持的尺寸

16x16浏览器标签

32x32浏览器标签（高分辨率）

48x48Windows桌面

192x192Android应用

512x512PWA应用

180x180iOS设备（apple-touch-icon）

包含详细的使用说明和示例代码

使用方法

1点击上传框，选择一张 PNG（建议 512x512 或更大）。
2在 16x16 和 32x32 下预览——这是最常见的显示尺寸。
3点击「生成 Favicon」。
4下载 ZIP（favicon.ico、各尺寸 PNG、apple-touch-icon、manifest）。
5把附带的 <link> 标签加到网站的 <head> 里。

常见问题

怎么把 PNG 转成 favicon？+

上传你的 PNG，点击「生成 Favicon」，下载 ZIP——里面有 favicon.ico、apple-touch-icon 和各尺寸 PNG 图标，以及要加到 HTML 的 <link> 标签。

该上传多大的 PNG？+

至少 512x512 像素的正方形 PNG。转换器会把它缩到浏览器和设备所需的每个 favicon 尺寸，所以大而清晰的源图效果最好。

也会生成 favicon.ico 吗？+

会——favicon.ico 和 PNG 图标一起生成。旧浏览器和一些工具仍会直接请求 /favicon.ico，所以它始终作为通用兜底被生成。

可以用 JPG 或 SVG 吗？+

可以——同一工具支持 JPG 和 SVG。完整选项请用 Favicon 生成器。

相关工具

Favicon 生成器 Favicon 获取器 Favicon 检查器

图标使用说明

如何在您的网站上实现生成的图标

图标预览

favicon-32x32.png

favicon-192x192.png

apple-touch-icon.png

使用步骤

将所有图标文件上传到您网站的根目录或指定的图标目录
在您网站的HTML '<head>'部分添加以下代码：

<!-- Basic icon -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG icons for modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- Apple Touch Icon for iOS devices -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA manifest file -->
<link rel="manifest" href="/site.webmanifest">

不同尺寸的用途

favicon.ico:传统浏览器标签和书签的图标
16x16:浏览器标签图标
32x32:较高分辨率的标签和Windows任务栏
48x48:Windows桌面图标
192x192:Android应用图标
512x512:PWA应用图标
apple-touch-icon.png:iOS设备添加到主屏幕的图标

网站清单文件(site.webmanifest)

如需支持PWA功能，可创建名为site.webmanifest的文件，内容如下：

{
  "name": "Your Website Name",
  "short_name": "Short Name",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

PNG 转 Favicon

支持的尺寸

更多图标工具

文字转 Favicon

Emoji Favicon

Favicon 检查器