Current section: Styling 7 exercises

Manage Asset Links in a Remix Application


00:00 There's not much to our application, and in fact, if we look at our HTML right here, then we'll see we don't even have anything in the head, we barely have anything in the body, and then just some stuff here that's added by Remix for the scripts and everything. There's nothing in here, but we do have a favicon,

00:17 and if we go to our network tab and do a refresh here, we'll see that favicon is being requested right here. That favicon is inside of our public directory, so public slash favicon.ico, and that is configured by our server to just serve everything that's in the public directory, so this is exactly what we want, but the thing that is actually making this request

00:37 has nothing to do with the way that our server is configured or the way that the website is configured. This is just a default behavior for the browsers. They will automatically make a request to slash favicon.ico if you haven't configured a favicon. The problem with our favicon is that while it looks pretty cool and everything,

00:56 it doesn't actually look all that great in light mode. If we switch over to dark mode, then it does look a fair bit better, but yeah, we want to have something that's responsive that will look nice both in light and dark mode, and so we already have this favicon.svg that uses the prefers color scheme dark,

01:15 and so your job is to configure our webpage to use this as the favicon instead of the default favicon.ico so that we can load the proper favicon and it can be responsive to the user's color preferences.

01:31 So you're going to be creating or using the APIs from Remix to add some links to the head so that that can be properly configured. Have a good time, and we'll see you on the other side of the exercise.