MUTools

图片

Favicon 生成

favicon 生成工具可以从一张图片一键制作 favicon.ico 和各设备所需的网站图标,并自动输出安装用的 HTML 代码。无需上传,只要把图片读入浏览器,全套尺寸的图标即可一次备齐。

请将图片(PNG / JPG / WebP / SVG)拖放到这里

支持 PNG / JPG / WebP / SVG,最大 20 MB(建议使用正方形图片)

上传的图片全部在您的浏览器内处理,不会发送至外部服务器。

Favicon 生成是什么?

favicon 生成工具可以从一张图片一键制作 favicon.ico 和各设备所需的网站图标,并自动输出安装用的 HTML 代码。无需上传,只要把图片读入浏览器,全套尺寸的图标即可一次备齐。

输出内容包括:浏览器标签页使用的 favicon.ico(16 / 32 / 48px 多分辨率)、iPhone 主屏幕使用的 Apple Touch 图标(180px)、Android Chrome 与 PWA 使用的 192 / 512px 图标,以及 site.webmanifest(manifest.json)。若上传的是 SVG,还会一并附带面向现代浏览器的矢量 icon.svg。

背景色、留白(padding)与圆角都可即时调整,并实时反映到预览中。无论是给透明 PNG 的 Logo 加上白色背景,还是制作圆角图标,都能随心所欲。manifest 的应用名称、主题色也可填写,并连同安装用的 HTML 片段一起复制、下载。

上传的图片全部在用户的浏览器内处理,不会发送至外部服务器。即使是公司机密 Logo 或尚未公开的设计稿也可放心使用。免费、免注册,全程在浏览器中完成。

使用方法

  1. 将图片(PNG / JPG / WebP / SVG)拖放到拖放区,或点击选择(也支持从剪贴板粘贴)。
  2. 按需调整背景色、留白与圆角,预览会即时更新。
  3. 填写 manifest 设置(应用名称、短名称、主题色、背景色)。
  4. 可单独下载生成的各个图标,或点击「下载 ZIP」打包获取全套文件。
  5. 将 ZIP 内的文件放到网站根目录,并把显示的 HTML 代码粘贴到 <head> 中。

使用场景

  • 想为新上线的网站或博客设置在浏览器标签页、收藏夹中显示的 favicon。
  • 不仅要 favicon.ico,还想一次性备齐 iPhone / Android 主屏幕及 PWA 用图标。
  • 希望从 Logo 图片生成各设备适配的图标集,并直接复制安装用 HTML 使用的网站开发者。
  • 想把公司机密 Logo 或尚未公开的设计稿在本地制成图标,而无需上传到外部。
  • 希望从 SVG Logo 同时备齐面向现代浏览器的 SVG favicon 与各尺寸位图的场景。

注意事项

  • 输出内容包括 favicon.ico(16 / 32 / 48px)、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png(180px)、android-chrome-192x192.png、android-chrome-512x512.png 以及 site.webmanifest。
  • favicon.ico 是将 16 / 32 / 48px 合并到一个文件中的多分辨率图标。
  • Apple Touch 图标不支持透明,因此即使背景设为「透明」也会以白色填充。
  • 建议使用接近正方形的图片。宽高比不一致的图片会居中放置并补上留白。
  • 仅当上传 SVG 时,矢量格式的 icon.svg 才会包含在打包文件中。

常见问题

图片会被上传到服务器吗?
不会。生成全部在您的浏览器内完成,图片不会发送至外部。即使是公司机密 Logo 或个人图片也可放心使用。
favicon.ico 里包含哪些尺寸?
是把 16 / 32 / 48px 三种分辨率合并到一个 ICO 文件中。浏览器会根据标签页、收藏夹等显示位置自动选用最合适的尺寸。
安装用的 HTML 该粘贴到哪里?
请将 ZIP 内的文件放到网站的根目录,并把显示的 <link> / <meta> 标签粘贴到 HTML 的 <head> 中。
应该上传什么样的图片?
支持 PNG / JPG / WebP / SVG。使用背景透明的正方形 PNG 或 SVG,各尺寸都能得到清晰的效果。
site.webmanifest(manifest.json)是什么?
它是供 Android Chrome 和 PWA 指定图标、应用名称、主题色的配置文件。本工具会根据填写内容自动生成,并一并打包进 ZIP。