是否可以为支持主题颜色的浏览器使用不同的图标？

Question

有没有办法通过meta标签或manifest.json为支持主题颜色的浏览器设置不同的图标？我有一个黑色主题酒吧，但在桌面浏览器上使用的主要是黑色的图标。我想为移动浏览器设置备用白色图标，但我不想假设移动浏览器===主题颜色支持，因为它并不总是如此案件。

桌面图标：

移动图标示例：

Answer 1

通用答案

您可以使用两个主图像来实现此目的：

• 黑暗设计，用于灯光标签，用于favicon.ico和HTML中声明的小PNG图标（例如<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">）
• 在深色背景上使用的灯光设计，用于高分辨率图标并在清单中声明（本身在HTML中声明为<link rel="manifest" href="/site.webmanifest">）。

使用此设置Android Chrome will pick your light design while desktop browsers will pick the dark one。

RealFaviconGenerator

完全披露：我是此服务的作者

RFG可以为您处理此问题。在为Android设计图标时，请转到＆＃34; Dedicated picture＆＃34;选项卡并选择您的灯光设计。