跳过主要内容

Favicon 生成器

把你的 logo 做成浏览器标签页、书签和手机主屏上的图标——一次构图写进站点需要的每一个尺寸，文件全程不离开你的设备。

背景颜色
无
取自你的 logo，也会写进 manifest 的颜色；清空即透明。

文件不离开设备，不存储，也不需要账号。

它会在哪里出现

SigilrySigilry

Sigilry

https://sigilry.app

Sigilry — logo 生成器，交付的是一个可编辑的 SVG

一句话需求进去，一个成型的 logo 出来——交付的是一个可编辑的 SVG，用 Figma 打开依然能挪动里面的元素。favicon 与 App 图标另有两个免费生成器。

Sigilry

https://sigilry.app

Sigilry — logo 生成器，交付的是一个可编辑的 SVG

一句话需求进去，一个成型的 logo 出来——交付的是一个可编辑的 SVG，用 Figma 打开依然能挪动里面的元素。favicon 与 App 图标另有两个免费生成器。

你会拿到什么

  • favicon.ico16, 32, 48 px标签页、书签和搜索结果
  • favicon.svg矢量同一枚图标的矢量版，给读矢量的浏览器
  • apple-touch-icon.png180×180 px这个页面加到主屏时 iOS 用的图标
  • icon-192.png192×192 px装成应用时用的小尺寸图标
  • icon-512.png512×512 px大尺寸那枚，也是可能被遮罩裁到的那枚
  • site.webmanifest浏览器据以安装的名称、颜色与图标清单
  • head-snippet.txt同样那几行标签，存成文件方便复制
  • README.txt这套文件是什么，以及不是什么

怎么用

  1. 01

    把 logo 放进来

    PNG、JPEG、WebP 或 SVG，最大 8 MB。它留在你的设备上：文件在你的浏览器里被解码、构图、编码。

  2. 02

    看它在哪里出现

    logo 会画进这个页面讲的那些地方，用的是它们真正使用的尺寸；下面还有这个工具对你这张文件要说的话。

favicon 是什么，它出现在哪些地方

favicon 是浏览器画在页面名字旁边的一小块方图——出现在标签页、书签、搜索结果和手机主屏上。它也是品牌手里唯一一个在 16 像素下被读的资产，所以它是为这些位置构图出来的，而不是缩小了塞进去。

浏览器标签页
favicon.ico16×16

每个打开的标签页都带着它，就在页面标题旁边。图标立不立得住，看的就是这个尺寸。

书签和高分屏标签页
favicon.ico32×32

同一个文件，画得更大：书签栏和高分屏要的是这一帧，它和 16 那一帧装在一个 .ico 里。

搜索结果
favicon.ico48×48

Google 会在结果旁边画一枚站点图标。它的要求是至少 8×8，实际用起来要大于 48×48。

手机主屏
apple-touch-icon.png180×180

有人在 Safari 里把页面加到主屏时，iOS 存下的就是这一张。圆角方块是 iOS 画的，文件本身是方图。

装成 Web 应用
icon-192.png、icon-512.png192×192、512×512

站点被安装时浏览器要的两个尺寸，写在 site.webmanifest 里，和名字放在一起。

任何读矢量的浏览器
favicon.svg不限尺寸

一个文件，任何尺寸都锐。Chrome、Edge、Firefox 和 Safari 26 及以后都读它；旁边的 .ico 只留给读不了的那些客户端。

为正方形构图，而不是缩小塞进去

工具先量出 logo 实际画到哪儿，把导出时自带的透明边裁掉，再把剩下的部分放进你选的那个边距之内。整套文件都是这一次构图的结果，所以预览里那张方图，就是每个位置拿到的那张。

导出的文件保留着自己的空边，而缩放整个画布，正是 logo 在标签页里变小、偏移的原因。这就是它和“图片缩放”的区别，也是这一页对你的 logo 做的全部：里面什么都不挪，颜色也不改。

这些文件要放在站点根目录

粘进 <head> 的那些标签指向根目录——/favicon.ico、/apple-touch-icon.png——所以文件要和 index.html 放在一起，而不是放进 assets/ 或 images/。

根目录上什么都没有时，标签页画的是一张空白页图标，搜索结果旁边是一个通用地球，别的文件夹里放了什么并不影响这件事。

manifest 是名字和图标清单，不是一份应用声明

有人安装站点时浏览器才读 site.webmanifest：它拿里面的名字做主屏标签，拿那两张 PNG 做图标。这里没有 start_url，也没有 display，因为那两项会把你写的名字和两个方图变成一句“你的站点是一个可安装应用”的声明——你要的是图标。

里面的颜色就是你选的底色，名字就是你填的那个。这套文件不会替你造出第二个更短的名字。

这个工具不做什么. 它对你给的 logo 做构图和编码，不重画它。带细线或小字的 logo 在 16 像素下仍然是糊的，预览下面的句子会照实写出来，而不是替你抹平。它只写 Web 这一套：Safari 的固定标签页图标、Windows 的磁贴、社交分享图都是另外的位置，有各自的规则。

常见问题