如果你曾盯着浏览器标签页，疑惑为什么某个品牌的 Logo 看起来像一团模糊的褐色污点，那你就是见证了一个失败的 favicon color palette（网站图标配色方案）。很多开发者常犯的错误是直接将复杂的 5 色公司 Logo 缩小到 16x16 像素，然后祈祷奇迹发生。（剧透一下：奇迹从不发生。）

什么是网站图标配色方案？

网站图标配色方案是你品牌视觉识别的高度浓缩版。由于极端的尺寸限制，你无法使用渐变、阴影或复杂的色彩过渡。你需要一组 2 到 3 种高对比度的颜色，确保它们在指甲盖大小的区域内依然清晰可辨。

对比度是你的核心武器

在同时打开 50 个标签页的情况下，你的图标正与白色、灰色和近乎黑色的背景竞争。Stripe 是这方面的大师；他们使用充满活力的紫色，几乎能穿透任何浏览器 UI。如果你的配色缺乏对比度，图标就会消失在浏览器的框架中，失去其核心功能：品牌识别。

三色原则

将配色方案限制在最多三种颜色。理想情况下，使用一种主品牌色和一种高对比度的辅助色（如白色或明亮的二级色）。超过三种颜色通常会导致“像素溢出”，浏览器尝试对边缘进行抗锯齿处理，使图标看起来非常模糊。想了解如何保持清晰度，请参阅我们的 网站图标设计技巧。

适配深色模式

到 2026 年，静态配色方案已经过时了。用户经常在浅色和深色系统主题之间切换。如果你的配色完全是深蓝色，它在 Safari 的深色标签栏上就会“隐身”。我强烈建议使用 SVG 格式，因为你可以直接在图标文件中嵌入 CSS 媒体查询。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    path { fill: #6366f1; }
    @media (prefers-color-scheme: dark) {
      path { fill: #818cf8; }
    }
  </style>
  <path d='M0 0h32v32H0z'/>
</svg>

跨环境测试

在最终确定之前，请在三种背景下测试你的配色：#FFFFFF（白色）、#1A1A1A（深色模式）以及 Chrome 非活动标签页的特定灰色。如果你的图标不能在所有背景下都“跳”出来，你的配色就需要更高的饱和度或描边调整。你可能还需要了解 网站图标深色模式支持 来处理这些特殊情况。

不要再把网站图标当成缩小的 Logo。把它当成一个高性能的 UI 元素。选择两种大胆的颜色，确保它们适配深色模式，保持简单。用户的眼睛会感谢你的。