Is there a way to set a different favicon for browsers that support theme-color, either via the meta tag or manifest.json? I have a jet black theme bar, but a mostly-black favicon for use on desktop browsers. I'd like to have an alternate white favicon for mobile browsers, but I don't want to make the assumption that mobile browser === theme-color support, as that's not always going to be the case.
Desktop favicon example:
Mobile favicon example:
Generic Answer
You can achieve this by using two master images:
- A dark design, to be used over light tabs, used for
favicon.icoand small PNG icons declared in the HTML (eg.<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">) - A light design, to be used over dark background, used for high resolution icons and declared in the manifest (itself declared in the HTML as
<link rel="manifest" href="/site.webmanifest">).
With this setting, Android Chrome will pick your light design while desktop browsers will pick the dark one.
RealFaviconGenerator
Full disclosure: I'm the author of this service
RFG can handle this for your. While designing your icon for Android, go to the "Dedicated picture" tab and select your light design.
来源：https://stackoverflow.com/questions/49939272/is-it-possible-to-use-a-different-favicon-for-browsers-that-support-theme-color