Favicon 图标生成器:生成 favicon.ico、PNG 和 Apple 触摸图标
在浏览器中用图片或文字生成 favicon.ico、PNG 网站图标、Apple 触摸图标和 Web 应用清单,并提供可复制的 HTML 标签。
将图片拖放到此处,或选择一张图片
PNG、JPG、WebP、GIF(第一帧)、BMP 或 SVG。至少 512 × 512 像素的正方形图片效果最好。
文字使用此设备上安装的字体绘制,因此字母和表情符号在其他电脑或手机上可能看起来不同。下载的 PNG 和 ICO 文件会保持您在这里看到的样子。
预览
16、32 和 48 以实际大小显示;较大的图标会缩小显示。棋盘格图案表示透明区域。
在浏览器标签页中
以浅色和深色主题显示的简化标签栏。请检查图标在两种主题下是否都清晰可见:透明背景上的深色标志在深色标签栏上可能会看不见。
文件
某些 Apple 设备会将主屏幕图标的透明部分显示为黑色,因此 apple-touch-icon.png 保存时不含透明度:透明区域会用此颜色填充。形状设置不会应用于该文件,因为 iPhone 和 iPad 会自行为主屏幕图标加上圆角。
用于 HTML 标签和清单文件中。“/”表示网站的根文件夹。
背景、形状、内边距和裁剪设置不会应用于 favicon.svg。
浏览器可以使用主题颜色为地址栏或窗口标题着色。应用背景颜色会在已安装的 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。
使用方法
- 选择“图片”并选择或拖放您的标志,或者选择“文字或表情符号”并输入最多三个字符。
- 设置背景、形状和内边距,并在浅色和深色主题下检查预览和浏览器标签页。
- 可选:输入网站名称、简称、主题颜色以及存放文件的文件夹。
- 按“生成 favicon 文件”,然后逐个下载文件,或打包为 favicon-package.zip 全部下载。
- 将文件上传到您的网站,并将复制的 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 会自行为其加上圆角。