Featured image of post CubeIris:Lynxflow 的品牌图标,和自适应 favicon 的一个演示陷阱
设计与品牌

CubeIris:Lynxflow 的品牌图标,和自适应 favicon 的一个演示陷阱

介绍 CubeIris——Lynxflow 的官方 logo,以及自适应 favicon 背后的 prefers-color-scheme 机制:浅底黑线、深底白线、瞳色恒定琥珀。顺带记录一个有普适价值的坑:同一个页面里无法用单张 SVG 同时演示两种配色,预览页必须强制分色渲染。

English

CubeIris:一个六角虹膜

Lynxflow 的品牌图标叫 CubeIris——方与圆的合体:外轮廓是一个六边形(立方体在二维上的影子),中心是一枚圆瞳。六边形的三条对角辐线从瞳孔向外延伸,像虹膜的纤维,也像镜头的光圈。瞳孔本身是一颗恒定的琥珀色圆点 #f0a028,无论底色深浅都不变。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
<style>.ln{stroke:#0b0c0e}@media(prefers-color-scheme:dark){.ln{stroke:#f2efe9}}</style>
<g class="ln" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
<path d="M50,10 L85,30 L85,70 L50,90 L15,70 L15,30 Z"/>
<path d="M50,50 L15,30 M50,50 L85,30 M50,50 L50,90"/>
<path d="M50,50 L50,10 M50,50 L85,70 M50,50 L15,70" stroke-width="6"/>
<circle cx="50" cy="50" r="13" stroke-width="6"/>
</g>
<circle cx="50" cy="50" r="5" fill="#f0a028"/>
</svg>

线条有两档粗细:8/6 原版(六边形和主辐线 8px,次辐线和虹膜环 6px)粗壮,16px 下依然清晰,适合 favicon;7/5 细档更多细节,适合大尺寸展示。全部资产透明背景,现在挂在 logo.lynxflow.co。

自适应 favicon:一张 SVG 顶两张

品牌资产最常见的痛点是 favicon:白底的浏览器 tab 和暗色的浏览器 tab,需要两个图标。传统做法是 favicon.ico 里塞多个 PNG,或者声明两份 <link rel="icon" media="(prefers-color-scheme: dark)">。SVG 有个更优雅的解法——把媒体查询写进 SVG 内部:

1
2
3
4

<style>
.ln{stroke:#0b0c0e}
@media(prefers-color-scheme:dark){.ln{stroke:#f2efe9}}
</style>

浅色系统下线条是墨黑 #0b0c0e,深色系统下翻转成米白 #f2efe9,瞳色琥珀恒定。一张文件,两种渲染,浏览器 tab 自动跟对颜色。这比维护两份 PNG 再在 HTML 里声明两遍干净得多。

坑:同一页面演示不了"自适应"

这套资产包预览页上线后,用户报了一个看起来像 bug 的问题:预览页有个"分屏 tile",左半白底、右半黑底,本意是演示自适应 favicon 在两种底色下的样子。结果左半的白底上出现了几乎不可见的白线。

诊断下来,根因一句话:SVG 里的 prefers-color-scheme 跟随的是浏览器/系统主题,不是它脚下的背景色。

拆开看:

  • 用户系统是深色主题;
  • 分屏 tile 里的 <img src="favicon-86.svg"> 加载这张 SVG 时,整张图命中了 dark 媒体查询,线条全部渲染成米白;
  • 于是右半黑底上白线(碰巧正确),左半白底上白线(不可见,错误)。

这不是 SVG 文件写错了——它作为 tab favicon 用是完全正确的:tab 底色由浏览器主题决定,媒体查询和 tab 底色永远同向。错的是预览页的演示方式:想让同一张图在左半白右半黑的背景下分别配色,任何单张自适应 SVG 都做不到,它只有一个全局的 media query 状态。

修法也不复杂:演示区不再 <img> 引用那份自适应文件,而是把 SVG 源内联嵌入两次——一份去掉媒体查询、直接 stroke:#0b0c0e(强制浅色渲染),另一份直接 stroke:#f2efe9(强制深色渲染)——分别放进两个绝对定位的半宽容器,拼出分屏效果。文件本身一字未动,tab 里照常自适应。

这个细节有普适价值:凡是"演示 prefers-color-scheme 资产"的页面,都必须强制分色渲染,不能拿原始自适应文件直接摆。 单张图的媒体查询只有一票,投给系统主题,不会投给你铺的背景。

资产体系

logo.lynxflow.co 上的完整清单,全部透明背景:

  • favicon-86.svg / favicon-75.svg——自适应,跟随系统主题翻墨黑↔米白,瞳始终琥珀;浏览器 tab favicon 用
  • logo-86-ink / logo-75-ink(.svg/.png)——墨黑线固定版,浅底用:顶栏浅色背景、文档浅底
  • logo-86-warm / logo-75-warm(.svg/.png)——米白线固定版,暗底用:顶栏暗色背景、暗底页

选型逻辑:自适应版只服务于"底色由系统决定"的场景(tab、PWA);一旦底色由你的页面自己决定,就用对应的固定色版,别指望媒体查询替你判断。