Fantastic Favicons and Where To Find Them

I've finally made my own favicon (inspired by the un-imitable Robb), instead of just using the generic Astro one that everyone gets when you make a website. I wanted to go the extra mile though and make sure it matched the theme of the site. After a bit of digging I discovered that SVG supports media queries, so all the fun light/dark mode detection we can do with CSS on the web, also works in your favicon (at least assuming you're using a browser that supports SVG favicons. [^1]) After vectorizing my work, I added some classes to the paths, put it all in a single SVG like so: All I have to do is treat it like any other SVG favicon and it just works. Sadly, it doesn't work in Safari, so Safari will always have a light mode favicon. Not the end of the world, just a bit of a bummer. [^1]: Can I use SVG favicon?