 Hello, today we are going to be creating fab or generating fab icons for our website. What is a fab icon? When you go to a website, up in the tab of your web browser, there'll be a little icon sometimes for that website. It's also important if you're adding shortcuts to your home screen on your phone, it's nice to have that icon. That's the fab icon that's usually used. It's also used in a few other places like in Google searches, it might show the icon for your website. Different browsers and different devices will use different icons, so you need to have a few different formats and then you just put a little bit of code in your HTML. So that's what we're going to look at today. There's a website that I've been using for years. There's lots of websites out there. This one I have found to be the best, I've used it for years. As the standards have changed, they've updated their website and they just make it super simple. So I'm going to show you what a fab icon is, how it works and then we'll create one for a page. Here we are at my website. If you look up here in the tab, there's a little icon. It's the same as this picture of Tux right here, my fab icon. So how does that work? So if I was to go to a mobile device such as here in Brave, this is my website. If I was to say add to home screen, there I'll say add and then add to home screen and when I close this out, you'll see it has the icon there. Unfortunately, Android, a few versions back, they automatically put the web browser icon on top of your icon, which is a little annoying. Depending on your launcher, you could get rid of that. Let's go ahead and generate one. What you're going to do is Google search for fab icon generator. The one I like is realfabicongenerator.net. I'll put a link in the description. Here we'll select an icon. I'm going to use an SVG but you can use a PNG or a JPEG. We'll go ahead and click on that and it's going to upload it and what's going to do is it's going to resize it to all these different sizes and formats for different devices. If it is a really low resolution, it will warn you you should use a higher resolution. It's going to give you a preview here. This is what's going to look like on a desktop in the tab, on a Google search, on a mobile search. What it's going to look like on iOS. You can see this icon may not be the best for iOS because it has that square around it and they're cutting off the corner. It looks a little weird. You could choose to change it at this point and Android. It looks fine for Windows Metro. That's what it's going to look like. Mac OS Safari always just looks horrible. Clearly, they just want some sort of mask icon there. There might be some options you can change here to make that look better. I don't even worry. I don't care about them. Next, we're going to choose where we want to put this icon. If we're doing something for our entire site, you're going to put it in the root directory of your site. I each page, I'm going to have a different icon. Here, I'm just going to say icons. When I create a page, I'm going to create a subdirectory called icons, in which case I'm going to put all the icons in there. The only other thing you might want to change is here. If you go app name, you can click here and change the app name, which will change what it says when you make a shortcut on your mobile device and should change like mine says, films by Chris up here, but I'll just leave that as a default. I will say generate. We'll take a few moments to generate. By default, if you don't have a Fav icon, it's going to look like this little earth symbol here, or might be different depending on your web browser, but a little global symbol there. What I'm going to do is, I'm in this directory for that site. It's filmsbychris.com, forward slash scripts, forward slash 2023, forward slash Fav icon underscore example two this time. I'm in that directory on my web page and in here is just the HTML, so it's just this web page, very, very basic. I'm going to make a directory called icons because that's where I said I'm going to put my icons. I will move into that directory and on the Fav icon generator page, it has created Fav icon package for me. I can download it by clicking on this, but since I'm working on my web server, what I'm going to do is I'm going to copy that link and I'm just going to Wget that Fav icon zip file. I will unzip it and then I can at this point remove the Fav icon zip file. So you can see it's created all these different size PNGs for different formats, platforms, I guess I should say, and also creates a little manifest file here. The only other thing I need to do is go back into my index HTML and in my header here, I am going to copy and paste this code just like that. Now if I go back to this page and I refresh it, now it has that little icon there. And if I was to go to my mobile device, scripts, forward slash 2023, Fav icon example two, don't really see anything in the browser here on a mobile device. But if I click add to home screen, you can see it's using that icon. I can give it a new name. If I changed the app name on the Fav icon website, it will make put that in there, but I can name it whatever I want and then click add and add to home screen. And again, it will add that icon there with the little brave or whatever web browser use icon there. I this is a test device on my most of my devices. I use a launcher called lawn chair. And with that, I can long press it and say edit or customize and then I can pick whatever icon I want. But unfortunately, Android years ago, they decided to put this little they didn't used to put the icon of the browser there, which is super annoying because you can also set this up when you click on it. Like in this particular case, notice there is no toolbar at the top. So the Fav icon generator website, I'm assuming it's in their manifest file that we were looking at it tells it to get rid of that toolbar. So it really feels like a native app. There's no address bar at the top. It's still using brave in the background. But when I clicked on it, it's going to give the icon as a loading screen until it loads this page load pretty fast. If not, it would show that icon for a little bit longer. But again, full screen, well, besides your little toolbars here, but I mean, it doesn't have the address bar. I don't think my website, see, my website still shows the address bar up here because I created the Fav icon so long ago. I probably should update that. But with the new generated code, it doesn't show that and it makes it feel like a native app besides that little brave icon on top of your icon. So this is super useful. People can add shortcuts to your website. It's very clear what site it is because of the icon. The only drawback to this, as I have found, for example, sometimes when people will update brave all their shortcuts on their home screen will disappear. I've seen it happen a number of times to different people. It's happened to me. It's super annoying. And that's why these days I usually package my websites as APKs if I'm going to share them with somebody that prevents that from happening. And I went over that in a previous video on doing just that. So check out my previous videos. I thank you for watching. Please visit filmsbychrist.com. That's Chris the K. There's a link in the description as always. I hope that you have a great day.