 Welcome to another episode of GUI Challenges, where I build interfaces my way, and then I challenge you to do it your way. And with our creative minds combined, we're going to find multiple ways to solve these interfaces and expand the diversity of our skills. And today's GUI Challenge, we are building a favicon. And not just a favicon.ico or a favicon.png, we're building a favicon.svg. We have an adaptive, light and dark themed favicon, and I'm going to show you how I did it. Let's hear that intro. You've probably put a favicon on your site before. I'm sure they're pretty easy to get started with. The traditional one that's, you know, 20 years old or something is a .ico file. And a little later, you could use a .png file. And then all of a sudden we got like manifest icons and all sorts of stuff. And icons can be quite a lot to manage these days. And one of the main benefits other than being an adaptive icon opportunity with SVG icon is that you can supply one icon for all of the different sizes and use cases that someone might come up with. And that could mean it's in the side mark, like your bookmarks bar. Okay, if I go to my bookmarks, yeah, right. Here's the SVG favicon here in the bookmarks area. If someone saves your site to a reading list, you're going to get your icon in the reading list. So there's a lot of really nice opportunities to show your brand in these other areas when someone's like not specifically at your page, but they're considering it. So this icon needs to be adaptive to color, which is going to, it's like a nice to have, but it should be adaptive to size. And so using an SVG, we have this scalable graphic and look, I can even use my SVG favicon right here in the middle of the page. And so that's what we're looking at here. It's just the SVG favicon here nice and large so we can see it. So if you've put a favicon on your page and you're maybe juggling three or four or maybe more because you're, you know, supplying an icon for a PWA and maybe some other use cases. SVG icon can come in really handy and let's test out what it looks like in the light theme here. And as we're just switching our OS, so we'll switch to the light theme. We can see that Chrome picks up the new icon, Firefox picks up the new icon. We zoom in here, we can see it's nice and crisp. Yeah, that looks really great. And down here, we can see that we now have the purple outline. We have a white skull color. And if we go back to the dark theme, we can see these things change. So look, now I don't have quite such a vibrant outline on here. It kind of pushes back a little bit. It's a little bit more subdued in the dark theme, but I left the pink hat because the pink hat's so cool. And I thought it just popped really well off of there. And that is the effect that we're going for is this really high quality, scalable, adaptive SVG favicon. And turns out today, we're not going to be writing very much CSS. We're going to be writing some XML. We're going to be writing some SVG and let's dive right into that. What do you think? So here I am in my HTML. And the first thing we want to do is load up an SVG icon. Let's look at how to do that. So if we scroll down into our head tag, we see our link tag here for our original favicon, so favicon.ico. And that's going to be supplied to all the browsers that don't know how to handle an SVG. And that's what's nice here is we can supply our SVG favicon in the next line. And if a browser understands it and they are down to render it, they can just pick it right up. Otherwise they can ignore that line and it's no big deal. But here's our type saying image slash SVG plus XML. And that's your key to getting that into there. Now what happens when it loads this SVG is the fun part. And we'll come down here and look at our SVG in this tab down here. So we've made an SVG tag. Nothing surprising here, right? We're passing literally just SVG into this icon area here, handwritten. And this is where it gets really interesting is this style tag here. We can use style tags inside of SVG and we can put some colors on our paths that we have inside of there. So we have a favicon stroke. That's where it's going to be the purple. We have an eight pixel stroke on there. Skull outline is filled wide. The eyes and nose are filled. The hat and bill rights. So we can see that I'm colorizing all of these things with selectors. If we scroll down into the path data, we can see the selectors here. So here's our group for an ID called Skull has the Skull outline or eyes and our nose, the jaw line. If we come down here, here's the hat. So we have the hat, the hat fill, the hat outline and the hat bill. So those are all the pieces of our SVG with nice little names and with the names all nice. And with the ability to have some styles, we have this app media prefers color scheme dark selector media query. That's then going in and finding each of these and making some exceptions for the dark theme. So we're changing the stroke to a gray. We're changing the outlines, the hat outlines and then eyes and the nose outlines to not the purple to a nice gray. And then we give the Skull a nice light gray. So it's not quite white. It's not going to be glaring and glowing off of someone's tab. It's going to be nice and pushed back a little bit. People will still see that the icon is a Skull. I'm pretty certain of it. And that is pretty much the extent of the trick here. So without going into too much about how I created this SVG, which is I took it straight from the illustrator file, which a designer made. I loaded it up into SVG OMG. I scraped off all of the stuff I didn't need. And then I isolated down these nice paths and put them in some groups. So I did the grouping here because that's not how the illustrator file came and I added the nice IDs to give them a nice easy way to target the styles. And then I just went and styled it as I needed to. So it's kind of like I took a really complex jumbled up SVG five icon and I took all of the craft off of it, cleaned it up, made it nice and then give me a nice foundation for styling the dark and light theme of it. And that is it for this GUI challenge. We built a light and dark adapting favicon. How are you making these? Are you using a generator and juggling a whole bunch of files? Or are you using an SVG icon to sort of give you a single place to manage and upgrade your icons? Let me know in the comments. And as always, check out the article for a full breakdown on how we do this from the ground up and any of your forks. And remixes still be at the bottom of that so you can see everybody else's thoughts on how to do this too. Alright y'all, take it easy and I'll see you in the next GUI challenge.