00:00 To get things started, I'm actually going to ignore Cody the koala and Marty the money bag really quick, because I want to show you what things look like without using these special remix APIs first. So we're going to just stick this right here. We'll say link. And the link is all going to be the exact same as what

00:18 we have with the remix API. So we're going to have a rel is icon, and the type is image SVG XML and slash favicon SVG. Thank you, Copilot. And we save that. And then we come up here, we get an automatic refresh, and now we're getting our favicon. So we're getting exactly what we want. We can look at our network tab, and we'll

00:38 see there's our favicon.svg. So it's loading properly. And if I refresh, you'll notice we are no longer getting the favicon.ico, and that's because we've actually configured the favicon to be loaded. If I look at the head, there's that link tag that we wanted in the first place. And if I switch over to dark mode,

00:56 we'll just see that media query is now applying. And so we're in a good place as far as that is concerned. Now, this is not the way that we do this in Remix. And the reason is for nested routing. And we will get into that in a future exercise.

01:12 But suffice it to say that the root route, where we are right now, is able to easily render these links. But other routes throughout our application don't have access to the head. So they need to have some mechanism to get whatever you want in those routes up to the parent route.

01:31 And that mechanism is the links component from Remix. So I can say links, and we bring that in from Remix run react. If I save that and we get that reload, we don't have any additional links, and that's because there are no other links configured in our application. But now I'm going to move this link into our link export from Remix.

01:51 So we're going to export a links function, and that's a links function from Remix run node. And then we can return a links configuration. So we'll say rel icon type image SVG plus XML. And then href is favicon SVG.

02:10 And with that now, if I save this, we're actually going to get two of those because I still have this old one right there. So let's get rid of that. We don't need two favicons. And now we're all set. We get the exact same behavior, but this comes with the benefit of being able to work regardless of where we are in the nested routing hierarchy, which we'll

02:29 get into in a future exercise. So with that, we solve our problem. We're able to get links into our application. And this is useful for much more than just the SVG favicon, but also module preloads.

02:44 In fact, we are using link tags for some module preloads already thanks to this scripts that Remix is adding for us. And so links are useful for all kinds of things, connecting other resources for our application. And we're using it for our favicon.

03:02 But in the future, we'll be using it for other things. So we'll see you in the future.