跳到主要内容
Hemen DönüştürDetartech 推出的免费文档和图片转换工具
简体中文

站点图标（favicon）生成器

上传你的标志，就能在一个 ZIP 里拿到网站需要的所有图标：包含 16、32 和 48 像素的 favicon.ico、给 Google 用的 48 像素 PNG、给 iPhone 用的背景不透明的 Apple Touch Icon、给 Android 用的 192 和 512 像素图标、已处理好安全区的可遮罩图标，以及 site.webmanifest。如果你上传的是 SVG，还会附带 icon.svg。你能预览它在标签页、Google 搜索结果和主屏幕上的样子，并复制现成的 <head> 代码；全部在浏览器中完成。

  • 免费，无需注册
  • 文件不会离开你的设备
  • 每个文件最大 50 MB

请先添加你的标志或图标图片。支持 PNG、SVG、JPG 和 WebP；建议使用不小于 512 × 512 像素的正方形图片，效果最好。

你的文件不会离开你的设备；图片在浏览器中处理。输出不会带上 EXIF 和位置信息。

如何制作站点图标（favicon）

  1. 添加你的标志

    上传 PNG、SVG、JPG 或 WebP 格式的标志。建议使用不小于 512 × 512 像素的正方形图片，效果最好；SVG 也可以。

  2. 设置名称、颜色和留白

    输入网站名称和简称，选择主题色和背景色，需要时再加一些留白。预览会显示图标在标签页、Google 搜索结果和主屏幕上的样子。

  3. 下载图标包并放到网站上

    下载 ZIP，把文件上传到网站根目录，并把显示的 <head> 代码添加到你的页面中。

哪些内容会保留？

保留

  • 标志的比例：非正方形的图片会放进正方形内，绝不会被拉伸
  • 透明（在标准图标中；如果你选了背景色，则会用该颜色填充）
  • 如果你上传的是 SVG，icon.svg 会原样附上

会改变

  • 每个图标都会以高质量重新采样到各自的尺寸
  • Apple Touch Icon 和可遮罩图标的背景始终不透明：用你选的颜色，选择“透明”时用白色
  • 在可遮罩图标中，内容位于 80% 的安全区内

不会带入

  • 不会从 PNG 或 JPG 生成矢量图（SVG）；icon.svg 只在输入 SVG 时才有
  • EXIF 和其他元数据不会写入图标

适合什么时候用

新网站的完整图标集

光有一个 favicon.ico 已经不够了：iPhone 主屏幕、Android 和 Google 搜索结果各自需要不同的文件。上传一次，就能得到所有名称和尺寸都正确的文件。

让图标出现在 Google 搜索结果里

Google 会用一个边长为 48 像素整数倍的正方形文件，在搜索结果中显示网站图标，而且这个文件必须允许抓取。图标包里包含这个文件，以及对应的 <head> 链接。

可以像应用一样添加的网站（PWA）

想让网站能添加到主屏幕，需要 manifest 和 192、512 像素的图标。可遮罩图标可以避免 Android 把图标裁成圆形或圆角方形时，你的标志被切掉一块。

需要了解的限制

  • 建议使用不小于 512 × 512 像素的正方形图片，效果最好；用更小的原图生成的大图标会发虚。
  • 在 16 和 32 像素的图标里，细线和小字会看不清；粗线条、高对比度的标志效果更好。
  • 主题色只会作用于移动浏览器的地址栏，并且取决于浏览器设置。
  • Google 搜索结果里的图标可能需要几天甚至几周才会更新，浏览器也会缓存图标。

常见问题

一个网站需要哪些 favicon 文件？

目前的做法是：根目录下的 favicon.ico、给 Google 用的 48 像素 PNG、尽量提供 icon.svg、给 iPhone 用的 180 像素 apple-touch-icon.png、给 Android 用的 192 和 512 像素图标，以及 site.webmanifest。这个生成器会全部生成，并给出 <head> 链接。

什么是可遮罩图标？

可遮罩图标把内容放在安全区内，并且背景是完全填满的，这样 Android 可以根据设备把它裁成圆形、圆角方形或其他形状。这里，内容被放在 512 像素图片中央 80% 的区域内。

为什么 Apple Touch Icon 是不透明的方角图标？

因为 iOS 会把透明区域显示成黑色，并且自己处理圆角。所以这个图标是完全填满、没有圆角的，背景用你选的颜色（选择透明时用白色）。

为什么我的图标没有出现在 Google 搜索结果里？

图标文件不能被 robots.txt 屏蔽，必须从首页的 <head> 链接过去，并且必须是边长为 48 像素整数倍的正方形。修好之后，可以在 Search Console 中请求重新编入首页索引；更新仍可能需要几天或几周。

上传的图片不是正方形会怎样？

图标会不变形地放进正方形里，两侧留出空白。如果想让画面铺满整个正方形，请先用裁剪工具把它裁成 1:1。

它能从 PNG 生成 SVG 图标吗？

不能。自动把像素转成矢量，可能会悄悄改变图标的外观，所以只有你自己上传 SVG 时，才会附上 icon.svg。

这个工具免费吗？

是的，完全免费。无需账号、订阅，也没有水印。

我的文件会被上传吗？

不会。图片在你的浏览器中处理，不会离开你的设备。输出不会带上 EXIF 和位置信息。

相关转换器