本地图标工坊

图片转图标

将 PNG、JPG、WebP 或 SVG 转为 favicon.ico、应用图标和 PWA manifest。下载前先预览图标在浏览器标签页、iOS 主屏幕和 Android 安装提示中的样子。

本地图标工坊

☞ 全程在你的浏览器中运行 —— 不会上传任何图片

将图片拖放到此处

或点击浏览 —— PNG、JPG、WebP、SVG

为上线日准备

在线将图片转为图标

OneImageTool 会把 Logo、头像、吉祥物或产品标识转成真实网站或应用所需的图标文件。上传图片、把它整理成整洁的方形,在浏览器标签页和手机主屏上预览,然后保存 favicon.ico、PNG 图标、Apple Touch Icon 文件和 PWA manifest。如果源图还需要处理,可以先把它裁成方形,或者压缩过大的导出文件 —— 这两个工具同样都在您的浏览器里运行。

一切都在您的浏览器里运行。当源图是保密的客户 Logo、尚未发布的应用标识,或是一个您不想发到别处服务器的临时点子时,这一点尤其重要。一边微调内边距、背景色和圆角,一边实时查看设备预览。

网站 favicon

用同一张源图生成浏览器标签页图标。醒目的标识用"裁剪",需要留白的 Logo 用"适应"并加内边距。

快捷方式 ICO

下载多尺寸 ICO,兼容旧版 favicon 和桌面快捷方式。较小的尺寸经过调校,在标签页预览中依然清晰。

应用与 PWA 图标

生成更大的 PNG 尺寸,用于主屏幕和安装提示。图标包内含预先配置好的 web manifest 和 HTML 片段。

多设备预览

不同于只有标签页的预览,OneImageTool 会展示 iOS 主屏幕、Android 安装横幅和 Windows 磁贴的样机 —— 编辑时全部实时更新。

一次下载,多处使用

图片转图标工具会生成什么

好的工作流不会只给您一张小小的图。落地页、文档、应用、PWA 和副业项目都需要多份资源,外加 HTML 片段。用一个 ZIP 拿到浏览器友好的全套文件。

图标包内含 favicon.ico、常见的 PNG 尺寸、一份 web manifest、HTML 片段和 README —— 覆盖常规网站与 PWA 的配置。

ZIP_PACKAGE
  • favicon.icoICO
  • favicon-16x16.png … 512x512.pngPNG
  • apple-touch-icon.pngiOS
  • android-chrome-192x192.pngPWA
  • site.webmanifestJSON
  • favicon-html.txtHTML
  • README.txtDOC

五个小步骤

如何使用图片转图标转换器

01

上传

拖入一张 PNG、JPG、WebP 或 SVG。方形源图效果最好,不过宽图也没问题。

02

塑形

选择"适应""裁剪"或"拉伸"。浏览器、iOS 和 Android 预览会即时更新。

03

样式

添加内边距、圆角,保留透明,或选一块纯色背景。

04

预览

查看 16px 标签页和主屏幕样机。如果标签页图标看不清,就加内边距或纯色背景。

05

下载

保存完整图标包:favicon.ico、PNG 文件、manifest、HTML 片段和 README。

从极小到可安装

图片转图标输出的最佳尺寸

图标会出现在差别很大的位置。浏览器标签页需要一个几乎没有细节的醒目符号,而 PWA 安装屏可以显示更大的标识。这个转换器能从一张源图生成每一种常见尺寸。

尺寸常见用途工具内预览提示
16×16浏览器标签页、旧版 favicon浏览器标签页样机用强烈的剪影,尽量少细节
32×32现代 favicon PNG、高清标签页尺寸网格favicon HTML 的实用默认值
48×48桌面快捷方式、Windows 磁贴Windows 磁贴样机让图形保持居中
180×180Apple Touch IconiOS 主屏幕样机在 iOS 上,纯色背景往往看起来更整洁
192×192Android Chrome、PWAAndroid 安装样机用于 manifest.json 的图标条目
512×512PWA 启动页、安装界面尺寸网格从高质量的源图开始

让极小版本清晰可读

下载前的设计检查清单

favicon 很小 —— 细线条、小字、复杂的照片和截图常常会变糊。导出前用实时的标签页和主屏幕预览测试可读性。

如果 16px 的标签页预览难以辨认,就试试更粗的裁剪、更多的内边距或纯色背景。居中、对比清晰的形状,从大图缩小到图标时表现要好得多。

效果良好

简洁的 Logo、扁平的吉祥物、方形标识、粗体首字母和高对比的符号。

谨慎使用

细节繁多的照片、细线条、截图、长单词和贴边的标识。

粘贴即用

生成的图标文件该放在哪里

对于静态站点,把文件放在网站根目录,或一个会随生产环境部署的资源文件夹里。把 HTML 片段粘贴进 <head>。上线后保持 favicon 的 URL 稳定,书签和已安装的快捷方式才会继续沿用同一个图标。

测试时 favicon 缓存很顽固 —— 试验时请用隐私窗口,或给文件改名。

public/
├── favicon.ico
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

快速解答

图片转图标常见问题

图片转图标是什么意思?

就是把一张普通图片转成用于 favicon、桌面快捷方式、应用图标、PWA 图标和小型项目 Logo 的各种图标文件与尺寸。

可以把 PNG 转成 ICO 吗?

可以。上传一张 PNG 再下载图标包 —— 里面包含一个多尺寸的 favicon.ico 和配套的 PNG 版本。

可以把 JPG 或 WebP 转成图标吗?

可以。如果源图没有透明通道,就用一块纯色背景。

我的源图需要是方形吗?

方形最省事。"裁剪"会填满画框,"适应"会保留整张图,"拉伸"则强制变成方形。

我的图片会被上传吗?

不会。转换在您的浏览器本地完成,图片绝不会离开您的设备。

会显示哪些预览?

浏览器标签页(16px)、iOS 主屏幕(180px)、Android 安装横幅(192px)、Windows 磁贴(48px),另外还有一个从 16 到 512 的完整尺寸网格。

ZIP 里包含哪些尺寸?

favicon.ico、从 16 到 512 的 PNG 尺寸、Apple Touch Icon、Android Chrome 图标、site.webmanifest、HTML 片段和 README。

这个工具免费吗?

免费。基本转换免费、在浏览器里运行,也不需要账号。