Favicon 生成器

为什么一张图永远不够

浏览器标签页大约 16 px 见方，书签栏 32，桌面快捷方式 48，iPhone 主屏幕 180，而已安装的 Web 应用会要 192、512 和 1024 用于启动画面和商店。把一张 1024 px 的图交给浏览器缩放，结果会模糊或出现锯齿，因为浏览器只会用当下的过滤器缩放图标——所以惯例做法是让每个尺寸都预先正确地缩小并锐化。

favicon.ico 是容器，不是图片：一个文件可以装下 16、32 和 48 px 三个图标，浏览器按需挑一个。这个页面写的正是这种文件，每个尺寸都以 PNG 形式存进容器——这是 Windows Vista 及更新系统读取的方式，也能让 48 px 图标在高密度屏幕上保持清晰。

favicon 还必须是正方形。宽 Logo 会先被裁成最大的居中正方形，裁切锚点决定保留哪一部分——多数标识用居中；如果字标的首字母承担识别度，就用左或右。

形状、留白与背景难题

现代浏览器标签页使用圆角或圆形图标；这里的做法是按亚像素覆盖率淡出 alpha 来隐藏四角，而不是硬切——这正是一个在 16 px 下看起来仍然圆润的圆，和一个看起来像坏掉的圆之间的差别。

留白是可读性的另一半：贴着图标边缘的标记在标签页里显得局促，5–10% 的呼吸空间通常就能解决。留白四周均匀，按图标比例计算，并用你选择的背景色绘制——如果你要求透明，就保持透明。

还有一半「形状」不归你决定：iOS 和 Android 会自己给主屏幕图标套遮罩。iOS 把 180 px 那张图放在黑底上，Android 启动器则按自己的形状裁剪，所以那些文件里的透明角根本不会显示成圆角——它会被平台涂成黑色或白色。因此给这两个平台写出的图标永远是填满的不透明方块，底色用你选的背景色；如果你选择保留透明，就用主题色兜底。形状设置管的是浏览器图标，浏览器会把它们画在自己的背景上。

透明是陷阱。它在浅色浏览器主题下看起来正确，在深色主题下却会消失，所以由细深色线条构成、没有背景的标记通常需要一个纯色背景。预览面板会按真实效果显示 48 px 图标，这是判断它的唯一方式。

你必须亲手完成的部分

有两件事无法在这里完成，结果面板会说明：文件必须复制到网站根目录，link 代码行必须放进页面的 head。manifest 文件和代码片段都已经替你生成，所以这是复制粘贴，而不是一项研究工程。

浏览器会激进地缓存 favicon——常常是几天，有时是整个配置文件。替换之后，强制刷新或全新的隐私窗口是立刻看到新图标的唯一方式，这是浏览器行为，不是你刚生成的文件有 bug。

manifest：名称、主题色，以及它指向的文件

site.webmanifest 是普通 JSON，把一个完整站点名、一个用于拥挤主屏幕的短名称和一个主题色——给已安装 Web 应用周围浏览器 UI 上色的十六进制值——按本页写出的文件名，绑定到 192、512 和 1024 px 图标，外加两张 maskable 副本，并用 start_url 指定安装后的入口，这样从深层页面安装的应用不会一打开就落在那页上。桌面页面指向 manifest，manifest 指向图标；这条链才让已安装的 Web 应用显示清晰图标。

你输入的字段会落在那里，紧挨着它们描述的尺寸。留空就输出默认值；填好之后，zip 里的 manifest 可以直接和页面同时打印的 link 代码行一起粘贴。

深色模式，以及站点被「安装」的那两处

标签页画在浏览器自己的背景上，而底色深浅取决于主题，所以为白底调好的标记到了夜里可能整个消失。再上传一张为深色主题绘制的 Logo，包里就会多出 favicon-16x16-dark.png 和 favicon-32x32-dark.png，用 media="(prefers-color-scheme: dark)" 引用。不认识这个属性的浏览器会回退到浅色那一对，所以不会坏在任何一边。

同一个下载也覆盖页面被安装而不是被打开的那两个地方：browserconfig.xml 与 mstile-150x150.png 是固定到 Windows 开始菜单的磁贴；manifest 则点名 192、512 和 1024 px 图标，以及两张把标记收进「启动器可能裁剪到的内切圆」里的 maskable 副本。