Skip to content
免费工具Design

从单个图像生成您的网站所需的每个网站图标尺寸

上传徽标或图标,该工具会输出现代浏览器、操作系统和 PWA 清单所需的所有尺寸的图标 - 从经典的 16 x 16 ICO 到适用于 Android 主屏幕的 512 x 512 PNG。下载包含 HTML 代码段的可立即部署的包。

免费使用此工具

特征

1

完整尺寸覆盖

为传统浏览器生成 16 x 16、32 x 32 和 48 x 48;适用于 iOS 的 180 x 180 Apple 触摸图标; Android PWA 清单为 192 x 192 和 512 x 512。一次通过即可实现所有常见尺寸。

2

ICO 和 PNG 输出

该包包含一个多分辨率 .ico 文件(包含 16、32 和 48 px 图层)以及每种尺寸的单独 PNG 文件。这两种格式都可以直接在 HTML head 标签中使用。

3

裁剪和填充编辑器

调整裁剪区域以隔离图像的图标部分。添加内边距以防止图标接触图标方块的边缘,从而提高小尺寸下的易读性。

4

后台控制

为现代浏览器保留透明背景,或为 Apple Touch 图标(不支持透明度)设置纯色填充颜色。下载前预览两种模式。

如何使用

1

上传您的图片

将 PNG、SVG、JPEG 或 WebP 文件拖放到生成器中。 512 像素或更大的方形图像可产生最清晰的结果。

2

裁剪和调整

拖动裁剪手柄以隔离图标区域。如果图标需要喘息空间,请添加填充。将背景设置为透明或纯色。

3

预览所有尺寸

该工具会同时渲染每个目标尺寸,因此您可以验证图标在 16 像素时是否可识别,在 512 像素时看起来是否清晰。

4

下载包

下载包含所有网站图标文件和 HTML 片段的 ZIP,您可以将其粘贴到站点的 <head> 标记中以正确引用每个图标。

规格

输出尺寸(像素)16、32、48、180、192、512
输出格式ICO(多层),PNG
输入格式PNG、SVG、JPEG、WebP
推荐输入512 x 512 像素或更大,方形
苹果触摸图标180 x 180 像素,可选纯色背景
加工客户端(无上传)

Related Magic Eraser Tools

常见问题

我应该从多大的图像尺寸开始?

+

从至少 512 x 512 像素的方形图像开始。生成器从该母版中缩小比例,因此高分辨率源确保每个较小的尺寸都清晰。 SVG 文件效果最好,因为它们可以缩放而不会造成质量损失。

我需要全部六种尺寸吗?

+

为了获得最大的兼容性,是的。 16 和 32 px ICO 涵盖旧版浏览器,iOS Safari 书签需要 180 px PNG,Android PWA 安装提示和启动屏幕需要 192/512 px PNG。

如何将网站图标添加到我的网站?

+

下载包包含一个 HTML 片段。将其粘贴到站点的 <head> 部分。它引用浏览器的 ICO 文件以及 Apple 和 Android 设备的 PNG 文件。大多数框架还支持将 favicon.ico 放在根目录中。

对于一个小网站图标来说,标志太复杂了?

使用 Background Eraser 将核心符号与完整徽标隔离,然后将干净的图标输入到网站图标生成器中。更简单的形状在 16 像素下可读性更好。

免费试用