toolgarden.xyz
EN

图片转 Icon

将 PNG、SVG、JPG、WebP 等图片转换为 ICO、ICNS 或多尺寸 PNG 图标包，支持去背景、缩放和圆角，浏览器本地完成。

图标设置

上传图片制作图标

支持 JPG / PNG / WebP / GIF / BMP / SVG / AVIF，所有处理都在浏览器本地完成

图标编辑

上传图片后编辑图标

预览区域会显示可拖拽缩放的图标和浏览器使用场景。

浏览器预览

Tool Garden
toolgarden.xyz

收藏夹

24px
32px
48px

导出结果

等待生成

选择 ICO 后生成图标，结果会显示在这里。

工具说明

图标转换会把普通图片缩放并封装为适合网站或桌面环境使用的图标文件。图标经常在 16、32、48、128 或 256 像素等小尺寸显示，因此清晰的轮廓、有限的细节和透明背景比原图分辨率更重要。

工具用于从源图片生成常见图标尺寸和格式。方形素材最稳定；非方形图片如果直接缩放可能变形或留下空白，最好先裁成 1:1，并在浅色和深色背景上验证边缘。

使用步骤

  1. 准备方形源图

    裁掉多余留白，保持主体居中，并尽量使用透明背景的高分辨率 PNG。

  2. 选择图标尺寸

    根据浏览器 favicon、应用快捷方式或桌面程序要求选择目标规格。

  3. 检查小尺寸效果

    按实际像素预览，确认线条没有糊成一团，随后下载并在目标环境测试。

支持范围与限制

输出格式
ICO（Windows）、ICNS（macOS）或多尺寸 PNG 的 ZIP 包
常见尺寸
16、32、48、64、128、256、512 px，图标文件内可同时容纳多个尺寸
输入建议
使用正方形、大尺寸、构图简洁的源图。SVG 或 512 px 以上的 PNG 效果最好
小尺寸的取舍
16 px 下细节几乎全部消失，复杂图形会糊成一团；图标设计需要在小尺寸下仍可辨识
透明通道
保留。图标通常需要透明背景，源图建议直接用透明 PNG
用途
网站 favicon、桌面应用图标、快捷方式图标

典型使用场景

  • 生成网站 favicon

    从品牌标识创建浏览器标签需要的小尺寸图标，并检查 16 像素下的辨识度。

  • 制作应用图标素材

    为快捷方式或桌面程序导出要求的方形尺寸，保持透明边缘干净。

  • 为网站生成 favicon

    从品牌标识生成多尺寸 ICO，覆盖浏览器标签页、书签栏和桌面快捷方式几种展示位置。

使用前需要知道的事

  • 复杂照片在极小尺寸下通常不可辨认，图标应使用简化图形和明显轮廓。
  • 不同平台可能要求多尺寸 ICO、PNG 或专用资源包，应以目标平台文档为准。
  • 透明边缘若存在半透明杂色，会在深色主题上形成光晕，导出前需要检查。

相关概念

favicon
浏览器标签、收藏夹和历史记录中代表网站的小型图标。
raster icon
由固定像素网格组成的图标，在非整数倍缩放时可能变得模糊。

常见问题

图片转 Icon 会上传文件吗？
不会。图片读取、缩放、圆角处理、ICO/ICNS 打包和预览都在浏览器本地完成。
支持哪些输入图片？
支持 PNG、JPG、WebP、SVG、BMP、AVIF 等当前浏览器可解码的常见图片格式。
ICO 和 ICNS 有什么区别？
ICO 常用于 Windows 图标和 favicon，ICNS 常用于 macOS 应用图标。页面也提供多尺寸 PNG ZIP，方便网页和 PWA 使用。
可以直接移除背景吗？
可以。页面提供一键移除背景按钮，会在本地浏览器中生成透明 PNG 后继续制作图标。
为什么小尺寸下图标糊成一团？
16 px 只有 256 个像素，容不下细节。图标设计需要在这个尺寸下仍可辨识：通常意味着放弃细线条和文字，只保留一个强轮廓。这是设计问题，不是转换质量问题。
ICO、ICNS 和 PNG 该选哪个？
Windows 应用和网站 favicon 用 ICO，macOS 应用用 ICNS，跨平台或由框架自己处理时用多尺寸 PNG 的 ZIP 包。前两种可以在单个文件内同时容纳多个尺寸。

相关工具