loading...

Discussion on: Dynamic Favicons

Collapse
mike_hasarms profile image
Mike Healy

Why is the JS necessary? Does the media query in the media attribute not respond to a changed user preference?

Collapse
geoff profile image
Geoff Davis

Good question! I looked at the library that was recommended, and it seems it's mostly in case a user's browser doesn't support the prefers-color-scheme query

github.com/rumkin/favicon-switcher

Collapse
adamgreenough profile image
Adam Greenough

Are there operating systems that have a dark mode with common browsers that don't have support for prefers-color-scheme? 🤔 Seems like it would be such a minority that it's not worth loading the JS for such a small enhancement. Only IE11 on Windows 10 it seems like.

Thread Thread
johnletey profile image
John Letey Author

As I've mentioned in my comment above - you don't have to go down the JS route.

However, the reason why I've chosen this way - is because the favicon automatically updates when you switch themes, which makes for a very good user interface.

It's your choice, but I'd prefer the three lines of code over messing with the SVG code 😅

Thread Thread
mike_hasarms profile image
Mike Healy

I like that (media query embedded in the SVG CSS)

Collapse
johnletey profile image
John Letey Author

I'm gonna prefix this with I don't think my way is the only way to do this.

This way works for me - and it's very simple.

As you've mentioned, you can just put the media tag inside the SVG code of your favicon.

But of what I've seen with this - it doesn't automatically switch, and you have to reload

The reason why I love this solution is because it's automatic as soon as you toggle themes.

If you are interested in going down the SVG route - I'd suggest you look here.