动态图标

在具有明确状态的页面上，例如 GitHub 拉取请求或 Actions 工作流，浏览器标签中的图标会更新以反映当前状态。待处理的检查变为成功的绿色勾号、失败的红色 X 或合并 PR 的紫色图标。这将静态品牌标志转变为动态的、可一目了然的状态指示器。

我还为 LobeHub 在生产和开发模式下添加了不同的图标。

为什么有效

这个细节掌握了环境信息的艺术。在标签过载的世界中，用户很少一次只查看一个页面。他们打开了数十个标签，且上下文切换是常态。

通过将状态直接嵌入图标中，GitHub 将其用户界面扩展到浏览器的边框。它提供了关键信息，而无需用户点击标签。

这减少了认知负担，节省了时间——您可以通过扫描标签立即识别构建或 PR 的状态，而不是通过阅读它们的标题。这是对用户专注和杂乱数字工作空间的深切尊重。

何时将其引入您的产品

• 对于长时间运行的过程：在监控任务的页面上使用，例如数据导出、文件上传或 CI/CD 管道。图标可以传达“进行中”、“完成”或“失败”。
• 对于具有不同状态的页面：理想用于在工作流中移动的项目，例如支持票据（“打开”、“待处理”、“关闭”）或文档（“草稿”、“审查中”、“已发布”）。
• 当用户打开多个实例时：如果用户经常打开多个文档或项目，动态图标可以帮助他们在不点击每个标签的情况下区分标签。

您见过的例子

• Gmail：在标题中显示未读邮件的数量。
• Google Meet：在会议录制时显示红点。

示例 AI 提示

请根据状态使图标具有响应性。我准备了两个图标：
 
- /public/favicon.ico
- /public/favicon-dev.ico