能适配深色模式的 favicon
只有 SVG 能够响应浏览器主题。在 SVG 内部嵌入一个带 prefers-color-scheme 查询的 <style>——浏览器在渲染图标时会应用它。这样深色 logo 在深色标签栏上依然可见：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
像这样引用它：<link rel="icon" href="/icon.svg" type="image/svg+xml">。同时保留一个普通的 favicon.ico，供不会执行媒体查询的浏览器和 Google 搜索使用。
Safari 固定标签页图标
当有人在桌面版 Safari 中固定你的标签页时，它会使用一个单独的扁平、单色 SVG（即“mask icon”）——只有形状，没有渐变：
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
color 属性设置固定图标的着色。为此请导出你标志的单色版本；任何带有精细细节或多种颜色的图形都会渲染成一团实色。
maskable 图标与安全区
Android 的自适应图标会根据启动器把你的图像裁剪成圆形、圆角方形（squircle）或圆角矩形。普通图标的边角会被切掉。把 manifest 中的图标标记为 maskable，并把重要内容保持在中央的“安全区”内——大约是中间的 80%，即四周各留约 10% 的边距：
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
设计时使用满出血的背景色，并把 logo 舒适地放在那道边距以内，这样任何形状都不会裁切到它。
theme-color：图标周围的那条栏
它本身不是 favicon，但在移动端就紧挨着它——theme-color 会为浏览器界面/地址栏着色。它也能随主题变化：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
真正的 .ico 里到底有什么
一个合格的 .ico 是一个容器，同时装有多张位图——通常是 16、32 和 48 像素。浏览器会为具体的显示场景（标签页、书签栏或 Windows 快捷方式）挑选所需的尺寸，因此它永远不必把一张 16px 的图像放大或把一张 512px 的图像缩小。而一个其实只是把单张 PNG 改名而来的“favicon.ico”会失去这种能力，在某些尺寸下看起来发虚。本生成器会写出真正的多尺寸 ICO。
Google 搜索的 favicon 规则
要让你的图标出现在搜索结果旁边，Google 要求同时满足以下所有条件：favicon 位于一致的 URL；它是正方形且尺寸为 48×48 的倍数（48、96、144……）；它与网站位于同一主机上；承载它的页面可被索引；并且图标在视觉上清晰。Google 会用自己的爬虫抓取并缓存它，且与页面分开处理——因此在更改之后，请预留几天到几周的时间，并确认 /favicon.ico 向 Googlebot 返回 200。
让文件保持小巧
- SVG：剔除编辑器的元数据和注释；一个干净的图标 SVG 通常小于 1 KB。
- ICO：只用 16/32/48——不要添加 64/128/256，它们只会让文件变大而毫无益处。
- PNG：512 图标是最重的；用无损压缩工具处理一下它。
在它真正显示的地方测试
不要只相信单一浏览器。请检查：普通标签页（浅色和深色）、书签、iOS 的“添加到主屏幕”、Android 安装，以及 Google 重新抓取后的搜索结果。测试时强制干净读取的一个快捷办法，是使用隐私窗口，再在图标 URL 上加一个 ?v= 查询参数。