Favicon 通常是一个装满 PNG 文件的文件夹，浏览器会逐一发起独立的 HTTP 请求来获取它们。/try 项目是一个以对话驱动的沙盒环境，没有可上传二进制文件的静态资源文件夹。解决方法是在 HTML 中多加一行：内联 SVG 或 base64 数据 URL，让图标随文档一起发布。本文介绍该如何处理这个约束、为什么这样做，以及一个让 AI 代理帮你完成的简单提示语。
/try 是 LingCode 的网页原型工具——你描述一个网站，代理负责编写 HTML/CSS/JS，预览实时更新，点击"发布"按钮即可部署到公开 URL。项目的内容就是代理生成的代码，而不是一个可以手动填充文件的文件夹。这对于以对话迭代的方式开发来说非常顺畅，只是在添加真正的 favicon 时有一点小约束。本教程将介绍这个约束以及三行代码的解决方案。
传统的 favicon 配置是这样的：将 favicon.ico、apple-touch-icon.png 和 icon-192.png 放入 /static 文件夹，再在 <head> 中引用它们。浏览器会为每个文件发起单独的 HTTP 请求。
/try 项目没有可从对话外部填充的 /static 文件夹。项目的内容就是代理生成的 HTML/CSS/JS——你在对话中发送的图片附件会被代理以 data URL 的形式内联到代码中，而不是作为独立文件发布。这意味着传统的 favicon 流程（放入 .ico 文件、引用它）在这里并不适用。
好消息是：所有现代浏览器都支持内联 SVG 或 base64 data URL 格式的 favicon。你根本不需要单独的文件。在 <head> 中加一行就能达到同样的效果，而这正是 /try 可以发布的内容。
如果你读过早期的 favicon 教程，可能会看到列出 10 到 14 种尺寸来"完整支持各种浏览器"。其中大多数针对的是已经不再存在的浏览器和设备。2026 年实际需要的只有四种：
| 变体 | 使用场景 | 格式 |
|---|---|---|
icon |
桌面浏览器标签页、书签 | SVG（推荐）或 32×32 PNG |
apple-touch-icon |
iOS Safari"添加到主屏幕" | 180×180 PNG，不透明 |
manifest |
Android Chrome"添加到主屏幕"、PWA | 192×192 + 512×512 PNG，通过 manifest.json 引用 |
theme-color |
移动端浏览器界面（URL 栏颜色） | 通过 <meta> 标签指定一个十六进制颜色值 |
你可以只用第一种发布一个 v0 版本的网站。其他三种是针对特定场景的升级项（iOS 用户添加到主屏幕、PWA 可安装性、移动端品牌化界面）。
对于 /try 网站，最简单可用的 favicon 是内联 SVG。将以下内容添加到 index.html 的 <head> 中：
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='26' font-size='28'>🚀</text></svg>">这是一个 32×32 的 SVG，将一个火箭表情渲染为 favicon——无需单独文件，无需上传，过去三年发布的所有 Chromium、Firefox 和 Safari 均支持。你可以替换表情，或者将 <text> 换成 <circle> 或 <path> 来使用真实 logo。URL 编码的 SVG 可以任意复杂，现代浏览器会直接在行内解析它。
如果需要非表情的 logo，可以在 /try 对话中向代理发送以下提示：
Add a favicon to this site. Use an inline SVG showing the letter "L"
in white on a #5B6CFF circle. Put the link tag in <head>.代理编辑完成后，你将在 /try 预览标签页中立刻看到 favicon 出现。如果没有显示，请强制刷新预览 iframe（浏览器会对 favicon 进行积极的缓存）。
generate_image 工具，接入了 Pollinations AI（免费，无需 API key）。发送"generate a favicon-style image: minimalist purple rocket, flat design, square, 512×512"，代理会返回一个托管图片 URL，并直接嵌入到你的 HTML 中。对于标签页 favicon，这个 URL 可以直接用作 <link rel="icon" href="https://image.pollinations.ai/....">——不过在生产环境中，建议让代理将结果下载并内联为 base64，这样你的 favicon 就不会依赖第三方服务的持续可用性。
iOS Safari 在"添加到主屏幕"时会忽略 SVG favicon。它需要一个 180×180 的不透明 PNG。由于 /try 无法将 PNG 作为独立文件托管，需要将其编码为 data URL：
<link rel="apple-touch-icon" href="data:image/png;base64,iVBORw0KGgo...[long string]...">手动生成 base64 非常繁琐。直接让代理来做：
Add an apple-touch-icon for iOS. 180×180, white "L" on a #5B6CFF
background, no transparency. Encode as a base64 data URL and add the
link tag.代理会生成 base64 字符串并为你注入 <link> 标签。生成的 HTML 会变大（一个 180×180 PNG 的 base64 编码约有 10 到 20KB 的文本），但这是一次性的体积增加，而不是每次请求都要额外获取的资源。
要在 Android 上支持"添加到主屏幕"（并让 Chrome 显示安装提示），你需要一个 Web manifest。传统做法是引用一个 /manifest.json 文件。在 /try 中，将其内联为 link 标签上的 data URL：
<link rel="manifest" href='data:application/json,{"name":"My Site","short_name":"MySite","start_url":"/","display":"standalone","background_color":"%23ffffff","theme_color":"%235B6CFF","icons":[{"src":"data:image/svg+xml,<svg ...>","sizes":"any","type":"image/svg+xml"}]}'>
<meta name="theme-color" content="#5B6CFF">这是一个最小可用的 PWA manifest：包含名称、起始 URL、独立显示模式和一个图标。data URL 中的 %23 只是颜色值中 # 的 URL 编码。配置完成后，Android 上的 Chrome 会在菜单中提供"安装应用"选项，iOS Safari 用户也能在主屏幕上看到正确命名的图标。
这类任务代理处理得很好——只需粘贴需求，一次就能得到正确的编码结果：
Make this site PWA-installable. Add an inline web manifest in the
<head> with name "My Site", standalone display mode, theme color
#5B6CFF, and the existing SVG favicon as the manifest icon. Also add
a theme-color meta tag.点击发布后，在公开 URL 上进行以下三项检查：