00:00 So here we have our purple favicon and let's say that we wanted to change it to orange. All right, so I'm going to save that. I hit refresh. Nothing happens. Not good. Not what I want at all. And so what we're going to do is we're going to copy this or we'll just move it. We're not going to need it here anymore. We're going to move it up into our app directory.

00:18 So we're going to call this assets. This is just my decision. It's not really a convention. It doesn't actually have any bearing on how things work. I just like to put my assets in a folder called assets. We're going to move the favicon over there. So it still says fill orange. This

00:32 is going to actually cause no problem for us because the favicon is in the disk cache. So we can refresh. And even though that file is no longer present in the public directory, we moved it over to app slash assets. The browser doesn't even ask the server for it

00:48 because it has it in the cache. So let's continue and make it so that we can get our orange favicon like we want. Coming over here to our root. So now let's import the favicon asset URL from assets

01:05 favicon.svg. And before I use it, I want to console.log the favicon asset URL so that you all can see what that actually looks like. It's right here. It's slash build slash underscore assets slash favicon dash fingerprint dot SVG. And every time I change this, if I change it from

01:24 orange to red, then we save this. We're going to get a new fingerprint. And so the contents of the file that we're importing are going to control that hash. And that's how we just make sure that we're always getting the latest version of that file. And then the browser can stick that

01:40 in its cache as the key. So let's put it back to orange and then come back over here and move the favicon asset URL back to our href right here, favicon asset URL. And now with that, I hit save

01:56 and boom, we get an orange favicon that totally doesn't look good. And so our PM is going to be like, you know, actually, I liked it better the way that it was before. And I can't remember what it was before. So let's just say purple for right now. There we go. So anytime we make a change, we

02:12 can change this to red, save that and boom, it's totally saved and updated. And on top of that, because it goes into our build directory, we can actually look at that here as that's favicon right there, because that's where it ends up. We have our server configured to very heavily cache that

02:29 because we can rely on the fact that those files are immutable. And so we have a max age of one year. It says it's immutable. We can look at the cache headers right here. Let's scooch this over just a bit. And here we have public max age. That's one year in seconds and immutable. So the

02:46 browser is like, oh, okay, this will never change. I won't even bother asking the server for it again. We'll just store it in my own little cache. Now, of course, people can disable their cache. They can right click and hard reload or empty the cache and hard reload. So this doesn't necessarily

03:02 mean that we will never hit the server again. In this case, there are some situations where we absolutely may hit the server again for this file. However, by default, the regular browser behavior will be, I won't talk to the server anymore, because I know that this file is

03:20 immutable and will never change. And then for us, if we ever do change it, we change that URL. And so the browser, when it goes to look for that cached file, it finds, oh, this is a brand new URL. I've never seen it before. So let me go talk to the server. So this way, we can update whatever

03:35 assets, in our case, we're doing a favicon. But if you had some sort of PDF, that you can always make sure that you have the latest up to date version. And that is really, really nice for both our product managers and ourselves. So we don't have to worry about keeping weird URLs up to date.