Add Custom Favicons in Next.js & Dynamically Update with React

hey team we're going to learn how we can add custom fave icons to next js and how we can dynamically update them i'm colby feyhawk and if this is your first time here make sure you hit subscribe for future updates well maybe you don't know the name fave icon you probably know what it is where it's these little icons that set up in your browser or in your bookmarks whenever you're actually bookmarking a site and they're used to really help identify the website that that link is associated with checking out of a zoomed in example of space jelly.dev we have this little icon here where i made a little custom icon that shows cosmo the space jellyfish's little eyes so we're gonna learn how to add a fave icon to our own website and we're gonna do that with nexjs now before we dive in if you're not familiar with xjs it's a framework for the web that allows us to really easily spin up a powerful react application if you want to learn more about nexjs and all of its awesome features definitely check out some of my other videos which you can find on the playlist with the link above but for now we're gonna get started creating a new application from scratch and we're going to do that using create next app so to get started i'm going to follow along exactly with these instructions so i'm going to head over to my terminal and i'm going to type yarn create next app i'm going to give it a name of my favicon app and once it's done next js would have gone out to the web and grabbed an example application pulled it down and checked it out locally onto my computer reset the git history installed all the dependencies where now we can navigate into that directory and we can run yarndev where now we can see we have this localhost 3000 which is our local development server where we now have our new nexjs application now as we look at this application we can see that we actually already have a fav icon here if we open up our code and look inside of our index.js we can see at the top that we already have that fave icon.ico file that's getting added using the next.js head component we can see inside of our public directory that we have this favicon.ico file which looks exactly like it does in the browser if we look at the source code inside of the browser we can even see that tag getting added directly on our site but this is for cells logo we want to add our own custom fave icon so to get started i want to set up my own fave icon where i grabbed the fave icon from spacejelly.dev which i have as a 1024 by 1024 file which is going to allow me to be flexible when i actually create all the different icons for my site now the tricky thing with our faviconda ico files is we can't actually generate those like we might typically do with an image where that ico file is a different type of file so to generate our fav icons we're going to use this site called realfaveicongenerator.net where it's going to allow us to select our image and easily create and generate all of our different fave icons so to start i'm going to select my image from my local file system where favicon generator is going to go through and it's going to process that where now we can even see a preview of how that would look inside of the browser the cool thing is we actually get a lot of other settings that we can play with if we want to customize our fav icons such as if we're using a generic image that we didn't already create specifically for a favicon but we can also see as we're scrolling down that we get a preview of what this looks like on mobile devices such as ios where we can see that this has the black background because we actually added the transparency but we can customize those things too when we're actually trying to save these out and finally we can also see that on android chrome because it supports that transparency we get a nice look about how that is going to react on an actual android device but finally when we scroll down to the bottom of the page after we see all those previews ultimately what we want is we want to click this generate your fave icons in html code once it's done we have two important things that we want to grab first of all we have this fav icon package that we want to click to download i know because of my screen size it's a little bit hard to see here but we can see that we got that zip file and if we unzip it we have a bunch of files that we can navigate through in preview where we have a variety of different sizes of the different files that we can use for our fav icon and for our app icons now what we ultimately want to do is we want to open up our code project and we want to find that public folder where we want to take all of those different files and we want to drag them all over to that public directory and yes we do want to replace that to favicon.ico file now personally i like to also version control the actual source of the file that i have the 10 24 by 1024 just so i can have that able to easily be used if i need a bigger size for anything but you definitely don't need to keep that around if you don't want it but now back to the fave icon generator we have this second thing that we want to grab and we want to copy this entire snippet we're back inside of our code what we want to do is replace that favicon line but we're not actually going to include the fave icon ico as one of the lines inside of our file where additionally we want to make sure that we convert all these different tags to the react jsx format because by default they don't have the closing on all their tags but if we look through this snippet what we can see is it's referencing all those files that we just copied over to our public directory all these different types of tags are going to provide us the various ways that we can actually preview that fav icon whether it's in a standard desktop browser or if it's on one of those mobile devices now just as a side note the reason why we're not including that fave icon to ico inside of those tags is because by default if the browser doesn't see any of those other files it's going to automatically look in the root directory for that faviconda ico file but we don't actually want our browsers to use our favicon.ico we only want that in there as a backup what we do want our browsers to use are these larger files with the higher resolution but now if we head back over to our application and refresh the page we can actually see that it updates now to our new custom fav icon we can see in the source here that we have all those different tags that we added right inside of our actual application now one thing we didn't cover is we are additionally copying over a file called the site.web manifest and if we look inside of it we see a few things that are important where we see those app icons that are getting specified specifically for android chrome while i don't have a chrome for android device that i can actually show here if we head over to our browser and we open up the application tab of our developer tools we can see that we have this manifest section where if we scroll down we can actually see all those icons that we set for our application so we know that those are working and the applications that can use those icons have them available now the web manifest isn't only for those icons as you can see there's some other fields like name short name description these are all good things that you want to fill out for your application but we're just not going to cover that for now so if you want make sure you head over to that site web manifest and fill out all those other details for your app but now we have our fav icon but what if we wanted to make sure that we have the same fave icon for any other part of our site now another important file included in xjs is the app file which this is going to allow us to provide global layout for anywhere inside of our application like if we see here we're already including a global css file by default but this means we can wrap this component with really whatever we want including adding adding anything to our head component so to start at the top i'm going to import the head component from next head and i'm actually going to go over to my index.js file and i'm going to copy that entire head component where inside of my app.js file i'm going to expand this i'm also going to wrap it with a react fragment so that i can actually have one side by side rather than actually wrapping it with another unneeded div but i'm going to paste that in there and i'm going to remove it from my index.js file now if i go back to my application and refresh the page we should still see that we have that fave icon but let's test this out to see what it would look like if we have a separate page like an admin page so what i'm going to do is i'm going to actually get rid of everything inside of here because i'm going to create a link to this new page that i want to create where i'm going to add a paragraph tag and i'm going to say i want to have a link which i'm going to import this component in a second where i'm going to have my link that goes to the admin page where i'm going to have my href and i'm going to place this new page at slash admin but now like i said at the top oops i gotta get rid of this arrows because that's not valid but at the top i'm going to import this link tag so now we should see that very simple admin link but now let's actually add that admin page so i'm going to go ahead and actually just clone my home page i'm going to call that admin.js we're inside all i'm really going to do is just change the title to admin just so that we know that we're navigating to a different page and then finally i'm going to make this link to go back home now if we head back to our application i can click this admin link and we can see that it navigates over to admin and what we can see is we still have this fav icon now importantly if we look inside of the source we can see that it's getting all those same tags that we added to that global file now like i mentioned before the fave icon to ico would have by default worked in this situation because it's in the root of our project but like i said before we do want to make sure that we're actually adding the correct fave icons now if you had already hit the home page and navigated to the admin page second in that instance you still might have seen that correct fave icon however if somebody navigates to one of your other pages first they might not see that fav icon right away but now we have our globally accessible fav icon where we can make sure all of our pages have that default icon but what if we want to actually add a different icon for the admin for instance i created this other variation of my space jelly.dev icon where i just added a lock so that we can make it seem like that's our admin section now to start just like before i'm going to head over to our fav icon generator and i'm going to navigate and actually select that icon where just like before it's going to convert that into all the different files that i'm going to need in order to make this possible inside of my application then finally i'm going to generate it and just like before i'm going to download my fav icon package however this time i'm going to do things a little bit differently so first i'm going to open up that zip directory and we can see all of our files with the lock icon but this time i don't want to actually change all of those different files all i want to change are those two fave icon files that are going to actually show up in the browser which is all we're going to use in this particular example for our dining for our dynamic icons now if we remember from before we actually already have those two exact same file names already inside of the public so the first thing i want to do is actually rename this where i'm going to simply add that tag of admin right inside of that file so that we have something different to specify and then i'm going to simply drag those over to my public folder the cool thing about using this head component is we can really use it anywhere inside of our application and whatever we use the last thing that we used it which in our case if we use it in the admin it's going to come after our app.js file it's going to override those global defaults so inside of my admin.js file i'm going to add that head component and i'm going to first copy over those two lines for the pngs and paste those right inside of my head component and finally we want to make sure we add that admin tag so that it's actually specifying the right files so now if we start off on our homepage and we navigate over to the admin page we can see that it was updated to that lock icon right inside of our browser tab we can even see that inside of the source we have those original defaults but we also have those admin ones where it's going to overwrite it and provide us the right icons now there's a caveat here if we click to go back to home we can see that this icon actually didn't update back to the original icon that's because when we're actually setting into the browser now this is just my speculation but because we added those icons those were the last icons that updated the browser so because we're not updating the browser with these previous icons since they already exist in the react state it's not going to update the browser to the previous ones so to fix this i'm going to go ahead and copy that same snippet and add it back to our home page adding it back to where it originally was just for those two lines but now we can see it already updated to our original icon if we click over to admin we got our lock and back we see our little cosmo now this is definitely not an ideal way to do it typically the way that i would handle it is i would create a shared layout file that way i can be more dynamic in how i manage my different head components to make sure everything is updating exactly how i wanted to for instance on myspacejelly.dev file i have my actual layout.js which is a typical react component but we can see that i include all those different tags including other metadata for my application that way i can wrap my component for each of the pages i can also include all my other metadata for that specific page and it's all going to be dynamic and still create those defaults for any pages that i don't specify the specific tags now the reason why it's not going to update from the app.js file is because it's not going to re-render the react component tree every time the page changes where if we use the layout that's going to actually re-render as part of that tree so if we look inside here if we don't actually have dynamic fave icons across our site we can definitely safely use this right inside of our app.js file so now we have our fav icon where if we go to the admin we're able to show a different one depending on the different route we're on but what if we wanted to actually dynamically update it based off of user act interaction or something that actually happened on the page if we look inside of our file one thing that's true about how we're actually adding this is this is all react meaning we can make this just as dynamic as we do any other part of our application so to show how this works i'm going to create a button where anytime somebody clicks that button such as if you click the like button it's going to go through it's going to update the fav icon for a second and then switch it back to the default so to do that the first thing i'm going to do is at the top i'm going to import use state from react and then at the top of my component i'm going to create a new instance of state where i'm going to create a state called favicon along with set fave icon so we can actually update it where we're going to add use state with the default value of an empty string and then finally i want to actually create a button that's going to update that state so i'm going to create a new function i'm going to call it handle on click where inside of that the very first thing i'm going to do is i'm going to set the state to what i want it to be and in my case i'm going to create a like button or a favorite button so i'm going to set that state as favorite and then finally i'm going to create a set timeout function where every time that runs i'm going to revert that favicon state back to its original value and i'm going to have that happen three seconds after it does and then finally i'm going to add a console.log statement just so that we can test this out where i'm going to add fave icon state where i'm going to simply console log out that value now finally we need the button to actually make this work and i'm actually going to just paste this in to make it a little bit easier but what i'm going to paste in here is a paragraph tag where i have a standard html button i have a on click element where i'm actually firing that on handle on click function i'm adding a little bit of styles just so it looks a little bit nicer and i have my line where i'm going to say smash that like button inside of our app we can already see that we have that default fave icon state which is going to be our empty string but if i click that smash that like button we can see it updates to favorite and then if we waited that three seconds we now see that empty state reverted back so now we want to take that state and use it to actually update this fave icon so back at the top where we see our head component again because this is react we can really take advantage of making these dynamic values like we would any other react component or prop so i'm going to make these into dynamic values for the href but first i'm going to make it so i can pass in an expression i'm going to set these to a template literal tag so that we can actually pass in a dynamic value but i'm going to say if we have a fave icon i'm going to set a particular value otherwise i want to use that default favicon value and what i'm going to do is i'm going to replace that original value so if we have a favicon value or state i'm going to say i want that value to be the fave icon state along with a little dash to make sure that we're getting the right file now as you might have realized we haven't actually created that new file for our favorite state so let's do that quick just like we did with our admin icon so just like the other ones i created this variation where we simply have the little heart inside of the circle that we're going to use for our favorite fave icon so i'm going to go ahead and i'm going to select that image oops just like we did before where it's going to go through it's going to generate the previews for us if i scroll down to the very bottom of the page i'm going to hit generate but now i can open up that package just like the other icons that we created where once that actually decompresses i can see that i have all my other icons just like before and particularly we want these two where we have our fave icon 16 by 16 and our 32 by 32 so just like we did with our admin i'm going to rename these where i'm going to add the favorite string right inside of there so that once we're ready we can use those dynamically and then i'm going to drag them over into my application so we now have our default fav icon we have our admin icon and we have our favorite fave icon but now in the browser i'm going to refresh the page but we can see that if i click smash that like button we got our state but we also had that icon update inside of the browser tab now again i know it's hard to see since i can't actually zoom in on this browser chrome but let me do that a couple more times just to make sure that we see this every time that it's going to change that fave icon to the heart just like we wanted and then after three seconds like that timeout we set it's going to revert back to our original icon while we don't have a ton of flexibility with the actual fave icon tag and file itself we do have a lot of flexibility for how we actually control what's actually getting shown so we can make this as dynamic as we want where just like gmail if we wanted to add an unread count or any kind of indicator that's going to help display some kind of value to our visitors we can do that by adding dynamic fave icons while browsers give us all the freedom to actually create what we want inside of a browser window we don't have a ton of ability to customize outside of the browser window and fave icons are one of those things that date back really far towards the beginning of the web where we can still have that control so we can make sure that we're able to show a little piece of our site anytime somebody uses our links or bookmarks outside of our actual application what's your favorite use case for favicons have you seen any really cool dynamic fave icons across the web let me know in the comments if you want to learn more about how you can do a lot of awesome things inside of nexjs you can check out my next js playlist where i have a ton of awesome videos helping you learn how to use next.js for the web like how you can use next.js to create an mdx powered blog or how you can add login with twitter using nextauth.js if you like this video make sure you hit thumbs up and subscribe for future updates thanks for watching

Channel: Colby Fayock

Views: 710

Rating: 4.9215684 out of 5

Keywords: next js custom favicon, next js favicon, custom favicon react, react favicon, react favicon change, react favicon dynamic, dynamic favicon react, dynamic favicon nextjs, add a favicon to a website in html, how to add a favicon, how to add a favicon to nextjs, add a favicon to nextjs, how to create favicon for website, how to make favicon, how to add favicon, how to generate favicon icon, how to generate favicon, favicon generator, real favicon generator

Id: 6P8RvKb0_tU

Length: 19min 8sec (1148 seconds)

Published: Fri Sep 03 2021