什么是网站图标生成器？
这款网站图标生成器可从上传的图片、输入的首字母或一个表情，生成网站所需的全部图标尺寸。选择一种来源，即可获得包含 16×16、32×32 和 48×48 的 ICO 文件、可无损缩放的 SVG，以及适用于 Apple Touch 图标和 Android 主屏幕的 PNG 版本，直接放入项目即可使用。
可以从图片开始，也可以输入一到三个字母并搭配字体和形状，或直接选一个表情。工具随后会渲染六个 PNG(16、32、48、180、192、512 像素)、一个清晰的 SVG，以及一个多分辨率 ICO，后者包含 Windows 标签页至今仍需要的三个小尺寸。所有文件打包成 ZIP，内含 site.webmanifest 和可直接粘贴到 <head> 中的 link 标签。方形的 SVG 或 PNG 来源缩放效果最干净。
使用方法
- 选择来源：上传一张方形图片（PNG、JPG 或 SVG，建议 512×512 或更大）、输入首字母并选择字体和形状，或挑选一个表情。
- 预览所有标准尺寸的生成图标（16px、32px、48px、180px、192px、512px）。
- 下载完整的图标包ZIP文件，包含ICO文件、所有PNG尺寸以及可直接粘贴到页面头部的HTML link标签。
何时使用
- 为新网站或 Web 应用添加浏览器标签页和主屏幕图标。
- Logo 重新设计后,在现有网站上统一更新品牌图标。
- 生成符合 manifest 规范的 PWA 图标,用于「添加到主屏幕」。
结果
一位开发者上传了创业公司1024×1024的Logo。工具生成了完整的图标集，包括favicon.ico（16/32/48）、apple-touch-icon.png（180×180）和Android图标（192/512），以及HTML meta标签代码。
常见问题
- 为什么 favicon 需要那么多不同的尺寸?
- 每个平台请求的尺寸都不一样:Chrome 标签用 32 像素,书签用 16,iOS 主屏幕用 180,Android 主屏幕用 192,PWA 启动画面用 512。一次输出全套,图标在任何位置都能保持清晰。
- 上传 PNG、SVG 还是 JPG 更好?
- SVG 最好,它能无损缩放到任意尺寸。其次是 512×512 的 PNG。JPG 也能用,但有损压缩可能让图标边缘出现光晕,在 16 和 32 像素下尤其明显。
- ICO 文件里到底装的是什么?
- ICO 是一种容器格式。这里生成的 ICO 包含三层位图(16、32、48 像素),Windows 会根据显示位置(任务栏、文件列表、浏览器标签页)自动选择最合适的那一层。
- 解压后这些文件应该放到项目的哪里?
- 解压到网站的 public 根目录,和 index.html 放在一起。提供的 link 标签使用根路径(/favicon.ico、/apple-touch-icon.png),所以纯 HTML 项目或者 Next.js、Astro、Vite 等框架都不用额外配置。
- 我换了 favicon,可浏览器还显示旧的怎么办?
- 浏览器会非常激进地缓存 favicon。可以强制刷新页面(Windows 上 Ctrl+Shift+R,Mac 上 Cmd+Shift+R),或者在 link 标签后加查询串如 /favicon.ico?v=2 来强制重新拉取。一般一天内缓存会自动失效。