When lightmode breaks your favicon

Light and darkmode favicons

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[saar]

one of those things you'd never consider, but will likely run into at some point

[adamuk]

Burning eyeballs 😂😂😂 Made me laugh today. Thanks KP 👍

[LinkEX]

I like the passive-agressiveness. Not only in the delivery, but with a naming scheme that implicitly makes the light mode icon the non-default variant.

[rakshpai]

If the favicon is svg, you can use a media query in a style tag in the svg to detect light/dark mode. You can even use it to set custom variables, which can then be used in the svg for stroke/fill values.

[thpwninatr]

fun fact: any browser that doesn't understand the media query will see the first one and set that as the favicon, then see the next one and set that instead (and so one until there are no more), so make sure the light mode version is last.

[Take-the-Ticket]

Wow :) Never happened to me but now I know what to look for. Thanks!

[message.akunna]

I just literally had this issue, fixed with your recommendation, almost redesigned the favicon.

[harisshahcs]

Man 😭 where was this video when I needed it the most?
I was working on a project & there were two favicons one for dark & one for light mode, I did some pretty expensive calculations to make it work.
Now going to change it to this easy solution. Thank you so much, Kevin 🙌

[MartinFinnerup]

Alternatively, you can add a dark border around the shape on the favicon. That would also make it visible in both modes, and would support old browsers, if needed.

[alphacode]

first time that one of these shorts is actually useful, thanks!

[talisepman]

"People who like burning their eyeballs on light mode..." took me out 🤣🤣🤣

[Dylan_thebrand_slayer_Mulveiny]

"Now people who enjoy burning their eyeballs..."

Omg yes. One of the devs I collaborate with INSISTS on using light mode, and I HATE having to do debugging with him over discord screen share.

[johanrg]

Me looking like a vampire when accidentally landing on a white web page.

[koin]

LOL the dark mode dev with hood and shades was classic. This gave me a good laugh. Sincerely, a dark mode dev with the lights out. 😂😎

[NotKyleChicago]

You have clients that look at the favicon? 🤔😂

[andrewo.]

“People who like burning their eyeballs” 😂

[kenw]

Very useful, loved the addition of people who like burning there eyeballs

[OrgiinalPortugal]

kevin you just flashbanged me in the middle of the night with that switch lol

[Celitary]

Most useful I've seen all year - Keep doing those, you're doing the programmer's good work!

[Dr_Larken]

That’s not a problem, because nobody in their right mind would ever use anything other than dark mode! There’s a reason Darth Vader kept trying to persuade everyone to join the Darkside because it’s awesome!