跳到正文

← 全部工具

免费在线工具

网站图标生成器

拖入 Logo（PNG、JPEG、WebP 或 SVG），或者输入一个字母、文字、表情，就能得到网站需要的文件：六种尺寸的 PNG、favicon.ico、放进网页 head 的代码和 site.webmanifest。图片只在你的浏览器里处理，不会上传。

1. 用图片，或者用文字

超过前两个字符的部分会被忽略。表情的样子取决于你设备上的字体。

正在绘制：Ob

留白部分用背景色填充。在背景不透明、边角为方形且留白不少于 22% 时，方形图片会落在“可遮罩图标”规则保留的中心 80% 圆形之内。这是公开的规则，没有在真实手机上测试过。

2. 生成的图标

正在生成图标…

3. 粘贴到网页的 <head> 里

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#22d3ee">

4. 保存为 site.webmanifest

需要不透明背景、方形边角，并且留白不少于 22%。

{
  "name": "我的网站",
  "short_name": "我的网站",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],
  "theme_color": "#22d3ee",
  "background_color": "#22d3ee",
  "display": "standalone"
}

请把所有文件放在网站根目录，上面的路径才有效；放在别处的话，请相应修改路径。

它做不到的事

  • •它只生成这一套标准文件，不会检查你的网站是否正确引用，而且浏览器对网站图标缓存很久，换了图标可能要过一阵才会显示。
  • •小尺寸图标是浏览器从你的图片缩小得到的。细节多的 Logo 缩到 16 像素可能糊成一团，文字或简单图形效果更好，可以看上面的 16 像素预览。
  • •“可遮罩”选项只遵循公开的安全区规则。不同安卓桌面的处理并不相同，这些图标没有在真实设备上试过。
  • •不支持动图、HEIC 和多图层文件。SVG 由你的浏览器绘制，引用外部文件的 SVG 可能画不完整。

工作方式

  • •图片不是正方形时，会裁成中间的正方形。文字或表情则画在彩色方块的正中。你可以在图案四周加留白，并选择方形、圆角或圆形。
  • •每个尺寸都是从你的图片单独绘制的：16、32、48 像素用于浏览器标签页，180 像素用于 iPhone 主屏幕（apple-touch-icon），192 和 512 像素用于网页应用 manifest。
  • •favicon.ico 由本页自己写出，里面以 PNG 数据存放 16、32、48 像素三张图。压缩包也是本页自己写的，文件原样存放，没有压缩。
  • •“可遮罩”选项遵循公开的规则：图标的重要部分要落在宽度 80% 的圆内。它会加上该规则所需的留白和实色背景，但没有在真实安卓手机上试过。
  • •把文件放到网站根目录，把 head 代码粘贴进网页，再把 manifest 存为 site.webmanifest。浏览器会把网站图标缓存很久，所以新图标可能要过一阵才会出现。

常见问题

我到底需要哪些尺寸？
本页生成常见的一整套：一个 favicon.ico，标签页用的 16 和 32 像素 PNG，iPhone 用的 180 像素，以及网页应用 manifest 用的 192 和 512 像素。48 像素的图既放在 .ico 里，也单独给一个 PNG。
为什么我的 Logo 在 16 像素下又糊又乱？
16 像素的图总共只有 256 个点，细线和小字都会消失。请用简单的图形、一两个文字，或 Logo 中醒目的一部分，并在使用前看一下本页的 16 像素预览。
可以直接用 SVG 做网站图标吗？
不少浏览器支持 SVG 图标，但并不是所有显示你图标的地方都支持，iPhone 的主屏幕图标也要用 PNG。本工具给你到处都能用的 PNG 和 ICO 文件；你拖入的 SVG 只是作为原图使用。
我的图片会被上传吗？
不会。图片在你的浏览器里解码和绘制，文件也在那里生成。没有任何内容被发送或保存，关闭页面后就清除了。

相关工具