子域名 Favicon 设置指南：告别浏览器标签页 404

如果你曾经搭建过一个 staging.yoursite.com 的测试环境，却发现在浏览器标签页里它和生产环境长得一模一样，那你肯定体会过这种经典的 UX 痛点。为子域名设置专属的 favicon 不仅仅是为了好看，它能极大地提升用户（以及你的开发团队）的生产力。

看看 GitHub 是怎么做的。打开主站，你会看到标准的黑白章鱼猫。但如果你切换到 docs.github.com 或 gist.github.com，你会发现标签页图标的颜色和布局都有微妙的变化。他们这么做是因为“标签页囤积症”是真实存在的，视觉上的区分能防止开发者手滑关错环境。

为什么子域名的 Favicon 需要独立策略

我的明确立场是：你运营的每一个重要子域名都应该有独立的视觉标识。指望浏览器默认去继承主域名的图标，只会带来满屏的 404 错误和破损的标签页。

当用户访问 app.example.com 时，Chrome 不会自动去检查 example.com/favicon.ico。相反，它会在后台请求 app.example.com/favicon.ico。如果你的子域名指向一个完全独立的服务器架构（比如主站用 WordPress，而子域名是托管在 Vercel 上的 React 单页应用），这个隐式请求就会彻底失败。浏览器最终会放弃，留给你一个丑陋的默认地球图标。

前期准备

在修改配置之前，请确保你能直接访问子域名应用的 HTML <head> 部分。你还需要准备好基础的 Logo 文件以便进行调整。如果你使用了反向代理，请确保你有权限修改路由规则。

如何为子域名实现 Favicon

严格按照以下步骤操作，确保你的子域名图标在所有浏览器和设备上都能完美加载。

第一步：设计一个有辨识度的变体

不要只是简单地复制粘贴主 Logo。稍微修改一下，以表明该子域名的用途。对于测试环境，我通常会叠加一个亮橙色或黄色的徽章。对于开发者 API 子域名，主 Logo 的单色版本往往效果奇佳。

设计好变体后，通过 Mzu favicondl 运行它，生成所需的 SVG、PNG 和 ICO 格式。你需要的是一个轻量级的图标包，而不是会拖慢首屏加载速度的巨大高清图片。

第二步：在 HTML 中使用绝对路径

开发者在处理子域名时常犯的最大错误就是使用像 href='/favicon.ico' 这样的相对路径。如果你的子域名和主站共享代码库但路由方式不同，相对路径很快就会变得一团糟。

相反，你应该明确指定指向子域名专属图标所在位置的绝对 URL。以下是你应该放入子域名头部的标准 HTML 代码：

<!-- 现代浏览器的 SVG 图标 -->
<link rel='icon' type='image/svg+xml' href='https://app.example.com/icons/favicon-app.svg'>
<!-- 旧版浏览器的 PNG 降级方案 -->
<link rel='icon' type='image/png' sizes='32x32' href='https://app.example.com/icons/favicon-app-32.png'>
<!-- iOS 的 Apple Touch Icon -->
<link rel='apple-touch-icon' href='https://app.example.com/icons/apple-touch-app.png'>

通过强制使用绝对 URL，无论你的内部路由如何处理请求，都能消除浏览器查找图标位置时的任何歧义。

第三步：处理多租户 SaaS 子域名

如果你正在构建一个 SaaS 应用，每个客户都有自己的泛域名（例如 customer1.myapp.com），你可能希望根据租户动态提供图标。在这种情况下，硬编码 HTML 是行不通的。

你需要通过服务端渲染框架或客户端脚本动态注入 favicon 链接。确保你的路由逻辑将传入的 host 头映射到正确租户的静态资源文件夹。例如，如果你使用 Nginx，可以将 $host 变量映射到特定目录路径。这里有一个处理动态子域名路由的简短代码片段：

server {
    listen 80;
    server_name *.myapp.com;

    location = /favicon.ico {
        alias /var/www/tenants/$host/favicon.ico;
        access_log off;
        expires max;
    }
}

这样既能保持 HTML 代码整洁，又能为平台上的每个租户提供个性化的品牌展示。

需要避免的常见陷阱

跨域资源共享 (CORS)： 如果你的子域名从中央 CDN（如 cdn.example.com）获取图标，浏览器可能会拦截它。你必须配置 CDN 发送正确的请求头。查看我们关于修复 favicon CORS 跨域问题的指南以获取确切的服务器配置。
激进的浏览器缓存： 浏览器对缓存的 favicon 抓得死死的。如果你更新了子域名的图标但它没有改变，那你就是掉进缓存陷阱了。始终在你的资源 URL 后面附加一个版本查询字符串（如 ?v=2）。想深入了解，请阅读我们的 favicon 缓存清除最佳实践。
过时的 Shortcut Icon： 永远不要在子域名上使用 rel='shortcut icon'。这是 Internet Explorer 时代的遗物，现代浏览器要么忽略它，要么会解析错误。坚持使用 rel='icon' 即可。

正确配置子域名图标只需多花几分钟时间，但它为你的 Web 架构带来的专业感是毋庸置疑的。别再让空白方块毁了你的浏览器标签页，给你的子域名它们应得的独立身份吧。