跳到主要内容
LeedyBox
支持我们

Favicon 图标生成器:生成 favicon.ico、PNG 和 Apple 触摸图标

在浏览器中用图片或文字生成 favicon.ico、PNG 网站图标、Apple 触摸图标和 Web 应用清单,并提供可复制的 HTML 标签。

来源

将图片拖放到此处,或选择一张图片

PNG、JPG、WebP、GIF(第一帧)、BMP 或 SVG。至少 512 × 512 像素的正方形图片效果最好。

背景、形状和内边距
背景
形状
0

图标会按所选形状裁剪,形状以外的区域保持透明。内边距很小或没有内边距时,小图标更容易辨认。

预览

16
32
48
180 (Apple)
192
512

16、32 和 48 以实际大小显示;较大的图标会缩小显示。棋盘格图案表示透明区域。

在浏览器标签页中

浅色标签栏
我的网站
深色标签栏
我的网站

以浅色和深色主题显示的简化标签栏。请检查图标在两种主题下是否都清晰可见:透明背景上的深色标志在深色标签栏上可能会看不见。

文件

某些 Apple 设备会将主屏幕图标的透明部分显示为黑色,因此 apple-touch-icon.png 保存时不含透明度:透明区域会用此颜色填充。形状设置不会应用于该文件,因为 iPhone 和 iPad 会自行为主屏幕图标加上圆角。

用于 HTML 标签和清单文件中。“/”表示网站的根文件夹。

浏览器可以使用主题颜色为地址栏或窗口标题着色。应用背景颜色会在已安装的 Web 应用启动时显示。

请选择图片,或切换到文字以开始。

site.webmanifest 的内容

说明

  • 请将文件上传到网站的根文件夹(即包含首页的文件夹),或在上方输入其他文件夹,使 HTML 和清单中的路径与之匹配。
  • favicon.ico 包含以 PNG 数据存储的 16 × 16、32 × 32 和 48 × 48 图像。当前的浏览器以及 Windows Vista 或更高版本都能读取这种格式;一些非常旧的程序只能读取未压缩的图标图像。
  • 较小的源图片(例如 64 × 64 的图片)会被放大用于较大的图标,因而显得模糊。如果可以,请使用至少 512 × 512 像素的图片或 SVG 文件。
  • 文字图标使用生成图标时所用设备上安装的字体。PNG 和 ICO 文件会保持这一外观,但在其他设备上重新生成图标时,结果可能不同。
  • SVG 文件由您的浏览器绘制。SVG 文件从其他文件或网站加载的图片、字体或样式不会被加载,图标中可能会缺少这些内容。
  • 浏览器会将网站图标长时间保存在缓存中。替换网站图标后,旧图标可能还会显示一段时间;强制刷新、使用无痕窗口或在 HTML 中更改文件名可能会有帮助。
  • 图片和文字在您的浏览器中处理,不会上传到 LeedyBox。

使用前请检查结果。 本工具按“原样”提供,不附带任何保证,结果可能不完整或有误。 服务条款

请只使用您有权使用的标志和图片。发布之前,请在您关注的浏览器和设备上测试图标。

使用方法

  1. 选择“图片”并选择或拖放您的标志,或者选择“文字或表情符号”并输入最多三个字符。
  2. 设置背景、形状和内边距,并在浅色和深色主题下检查预览和浏览器标签页。
  3. 可选:输入网站名称、简称、主题颜色以及存放文件的文件夹。
  4. 按“生成 favicon 文件”,然后逐个下载文件,或打包为 favicon-package.zip 全部下载。
  5. 将文件上传到您的网站,并将复制的 HTML 标签粘贴到页面的 head 部分。

常见问题

我的图片会上传到服务器吗?

不会。图片或文字在您的浏览器中绘制和转换,文件在您的设备上生成,不会向 LeedyBox 发送任何内容。页面加载时只会从 leedybox.com 下载 ZIP 库。

可以使用哪些图片?有什么限制吗?

支持 PNG、JPG、WebP、GIF(第一帧)、BMP 和 SVG 文件。SVG 文件最大可为 10 MB。非常大的照片(约 5000 万像素以上)需要大量内存,在手机上可能处理失败。至少 512 × 512 像素的正方形图片或 SVG 文件效果最清晰。

为什么我的网站图标看起来模糊或难以辨认?

16 像素的图标空间非常有限。简单的形状、强烈的对比和一两个字母,比细节丰富的标志或长文字效果更好。较小的源图片在生成较大尺寸时会被放大,因而显得模糊。请检查预览,并尝试减小内边距或使用简化版的标志。

这些文件中哪些是我需要的?

favicon.ico 以及 16 和 32 像素的 PNG 文件供桌面浏览器使用,apple-touch-icon.png 供 iPhone 和 iPad 使用。192 和 512 像素的图标以及 site.webmanifest 会在网站被添加到主屏幕或作为 Web 应用安装时使用。将所有文件与 HTML 标签一起使用即可涵盖常见情况。

为什么 apple-touch-icon.png 不含透明度?

某些 Apple 设备会将主屏幕图标的透明部分显示为黑色。因此,本工具会用您选择的颜色(默认为白色)填充透明区域,并保留直角,因为 iPhone 和 iPad 会自行为其加上圆角。