Support Responsive Favicons for a Professional Look

So you've put together an awesome favicon for your app but then some user comes around and says actually I like dark mode and now your favicon does not look awesome anymore We need to have a responsive favicon, something that responds to the user's system preference for their light or dark mode and because it's responsive you think yeah that's CSS right? Responsiveness? Absolutely, that's exactly what it is. In a remix app like we have with the epic stack we have this links export on the root or any of the other routes in our application and so we can actually use this to determine the active favicon that the browser is going to use. So we're going to add another one of these and we're going to add a media for prefers color scheme dark and with that we can actually switch to the favicon dark so we'll say favicon dark SVG and that's it we're done look it's applied it looks awesome we can switch between these two and it still looks awesome in both light and dark mode so you can have responsive favicons for your application with really not a whole lot of code and it's pretty straightforward and on top of that it's all web standard stuff so if we look at our elements here go to head and we'll see we've got our favicons right there.

That's all just link tags. There's nothing really special about this, there's no really super special API, this just ultimately gets injected as link tags with each one of these as properties or attributes on those elements. So you do whatever you want to and media is 100% a supported feature of link tags. So that's what we're just gonna use and now we've got this really sick optimization for light mode, dark mode favicons. Pretty sweet, hope that helps.

Have a good one.