Chrome · 浏览器标签页
活动标签页中的 16×16 favicon
本地图标工坊
将 PNG、JPG、WebP 或 SVG 转为 favicon.ico、应用图标和 PWA manifest。下载前先预览图标在浏览器标签页、iOS 主屏幕和 Android 安装提示中的样子。
或点击浏览 —— PNG、JPG、WebP、SVG
实时预览
活动标签页中的 16×16 favicon
180×180 Apple Touch Icon
添加到主屏幕
192×192 PWA 安装图标
已固定
48×48 固定快捷方式磁贴
把图标文件放入网站根目录后,将这段代码粘贴到站点的 <head> 中。
为上线日准备
OneImageTool 会把 Logo、头像、吉祥物或产品标识转成真实网站或应用所需的图标文件。上传图片、把它整理成整洁的方形,在浏览器标签页和手机主屏上预览,然后保存 favicon.ico、PNG 图标、Apple Touch Icon 文件和 PWA manifest。如果源图还需要处理,可以先把它裁成方形,或者压缩过大的导出文件 —— 这两个工具同样都在您的浏览器里运行。
一切都在您的浏览器里运行。当源图是保密的客户 Logo、尚未发布的应用标识,或是一个您不想发到别处服务器的临时点子时,这一点尤其重要。一边微调内边距、背景色和圆角,一边实时查看设备预览。
用同一张源图生成浏览器标签页图标。醒目的标识用"裁剪",需要留白的 Logo 用"适应"并加内边距。
下载多尺寸 ICO,兼容旧版 favicon 和桌面快捷方式。较小的尺寸经过调校,在标签页预览中依然清晰。
生成更大的 PNG 尺寸,用于主屏幕和安装提示。图标包内含预先配置好的 web manifest 和 HTML 片段。
不同于只有标签页的预览,OneImageTool 会展示 iOS 主屏幕、Android 安装横幅和 Windows 磁贴的样机 —— 编辑时全部实时更新。
一次下载,多处使用
好的工作流不会只给您一张小小的图。落地页、文档、应用、PWA 和副业项目都需要多份资源,外加 HTML 片段。用一个 ZIP 拿到浏览器友好的全套文件。
图标包内含 favicon.ico、常见的 PNG 尺寸、一份 web manifest、HTML 片段和 README —— 覆盖常规网站与 PWA 的配置。
五个小步骤
拖入一张 PNG、JPG、WebP 或 SVG。方形源图效果最好,不过宽图也没问题。
选择"适应""裁剪"或"拉伸"。浏览器、iOS 和 Android 预览会即时更新。
添加内边距、圆角,保留透明,或选一块纯色背景。
查看 16px 标签页和主屏幕样机。如果标签页图标看不清,就加内边距或纯色背景。
保存完整图标包:favicon.ico、PNG 文件、manifest、HTML 片段和 README。
从极小到可安装
图标会出现在差别很大的位置。浏览器标签页需要一个几乎没有细节的醒目符号,而 PWA 安装屏可以显示更大的标识。这个转换器能从一张源图生成每一种常见尺寸。
| 尺寸 | 常见用途 | 工具内预览 | 提示 |
|---|---|---|---|
| 16×16 | 浏览器标签页、旧版 favicon | 浏览器标签页样机 | 用强烈的剪影,尽量少细节 |
| 32×32 | 现代 favicon PNG、高清标签页 | 尺寸网格 | favicon HTML 的实用默认值 |
| 48×48 | 桌面快捷方式、Windows 磁贴 | Windows 磁贴样机 | 让图形保持居中 |
| 180×180 | Apple Touch Icon | iOS 主屏幕样机 | 在 iOS 上,纯色背景往往看起来更整洁 |
| 192×192 | Android Chrome、PWA | Android 安装样机 | 用于 manifest.json 的图标条目 |
| 512×512 | PWA 启动页、安装界面 | 尺寸网格 | 从高质量的源图开始 |
让极小版本清晰可读
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 再下载图标包 —— 里面包含一个多尺寸的 favicon.ico 和配套的 PNG 版本。
可以。如果源图没有透明通道,就用一块纯色背景。
方形最省事。"裁剪"会填满画框,"适应"会保留整张图,"拉伸"则强制变成方形。
不会。转换在您的浏览器本地完成,图片绝不会离开您的设备。
浏览器标签页(16px)、iOS 主屏幕(180px)、Android 安装横幅(192px)、Windows 磁贴(48px),另外还有一个从 16 到 512 的完整尺寸网格。
favicon.ico、从 16 到 512 的 PNG 尺寸、Apple Touch Icon、Android Chrome 图标、site.webmanifest、HTML 片段和 README。
免费。基本转换免费、在浏览器里运行,也不需要账号。