网站图标生成器

用图片或文字一次生成 favicon.ico、应用图标和 site.webmanifest,还可以将背景变为透明。

不上传文件 · 所有处理都在此浏览器中完成

输入与选项

输入方式
背景处理
#FFFFFF
12%
图标形状
6%
应用信息 (site.webmanifest)

iOS 会将透明区域显示为黑色,因此 apple-touch-icon 会填充此背景色。

预览

棋盘格 = 透明区域

选择图片后将在此处显示。

My Website
https://example.com
My Website

下载

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • site.webmanifest

粘贴到 <head> 中的代码

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

将 favicon.ico 放在网站根目录,浏览器会自动找到它。

常见问题

图片会上传到服务器吗?

不会。读取图片、移除背景、调整尺寸和生成 ZIP 都在此浏览器中完成。

纯色背景移除是如何工作的?

将与所选颜色相近的像素变为透明。默认只移除与边缘相连的区域,因此标志内部的相同颜色会被保留。提高容差可以移除更大范围的颜色。

会生成哪些文件?

会生成 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。

文件应该放在哪里?

解压后放到网站根目录,并将提供的代码粘贴到 <head> 中。只要 favicon.ico 位于根目录,浏览器就会自动找到它。