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. ¹)

After vectorizing my work, I added some classes to the paths, put it all in a single SVG like so:

    [...]
    <path d="m213 87h138v140h-89v86h-49zm49 90h39v-40h-39z" fill="#eaedf3" fill-rule="evenodd"
            class="dark"></path>
    </svg>
    <style>
        @media (prefers-color-scheme: light) { .dark { display:none; } }
        @media (prefers-color-scheme: dark) { .light { display:none; } }
    </style>

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.