4

I added a favicon to my website, but the favicon is black, and can not seen for example in Mozilla FF dark mode. How can I (using JS or HTML) detect the browser Color?

  • The browser does not have a color. Your question is formulated very poorly but I think that you want to di a favicon with transparent background. `ico` and `png` icons can have it. – Dimitri L. Aug 25 '19 at 16:10
  • Hey, i meant the tab Color from the browser. For example my chrome has grey Color and Mozilla black. My favicon is transparent, but the logo is black, for that reason it can not be seen in Mozilla. I created a grey version of the logo, and I want to call the favicon dynamically, depending of the Color of the browsers tabs. For example if you look at the apple website apple https://www.apple.com/ you will notice that the apple favicon is changing Color depending on the browsers tabs Color. How can I get that value out of a browser? –  Aug 25 '19 at 16:16
  • This is not possible for good reasons (security, privacy, etc...). If you want your icon to look good on black and white, you should add a small border or an actual background color. – Dimitri L. Aug 25 '19 at 16:18
  • M8, it is possible. I have seen it on multiple websites. Like I said, look for example at the website from apple https://www.apple.com/ . They created a dynamic favicon, which is changing its Color depending on my browser. –  Aug 25 '19 at 16:20
  • Related: https://stackoverflow.com/questions/55170708/detect-if-the-browser-is-using-dark-mode-and-use-a-different-favicon – Jakub Muda Aug 25 '19 at 18:33
  • This could help: https://stackoverflow.com/questions/49939272/is-it-possible-to-use-a-different-favicon-for-browsers-that-support-theme-color – TeslaXba Aug 26 '19 at 08:02
  • You can generate app manifest dynamically, which can contain the updated favicon as per requirement. – Ashwamegh Aug 26 '19 at 15:41
  • @webdevba I tried to reproduce the Apple icon color change but couldn't. I visited apple.com with Chrome 76 and switched from the default theme to "Just black" while reloading the page. I didn't notice anything, the icon is #888 whatever the theme (and is okay in both cases). Same with Firefox. Do I miss something? – philippe_b Aug 27 '19 at 08:24
  • Hello @philippe_b, I am sorry it is my bad. The color there stayed the same, and I still haven't found an option to detect the color. It is only possible to detect if the browser is in dark mode or not... I guess I will have to add a favicon with a white background or something like that. Thank you for your help! –  Aug 28 '19 at 07:50
  • @webdevba No problem! I investigated this issue some time ago and I would have gladly looked at how Apple solved the issue :) – philippe_b Aug 28 '19 at 09:07

1 Answers1

4

It is not possible to get the color of the browser. The only possibility is to detect if the browser is in dark mode or not.

Solutions for that case are shown under Is it possible to use a different favicon for browsers that support theme-color? and Detect if the browser is using dark mode and use a different favicon, but there is no way of getting the browser tabs color.