Oh righty, so in photo p, we're going to start out, we're gonna go File New. And we're gonna make our project 512 by 512 into a square. That's the biggest width we're going to need. We're also going to change the DPI to 96. And we want the background to be transparent. Okay, so there are many things you could do here and you can get as creative as you want experimenting with colors and shapes.

And you could even look up other tutorials about logo design if you want. But for our purposes, I'm going to keep things very simple. So there are a ton of cool fonts built into photo P and we're going to be taking advantage of that. So we're gonna start out we're going to open our text here and We're going to type just the first letter of my name, which is a J. And we're going to change the size, we're going to make it 700. And we're going to change the font.

So you can see there are many, many, many, many different fonts. I'm going to search for the font that I already know that I want to use, and that is silk screen. So we're going to click on that, it's going to load the font. And we can now highlight this, I'm actually going to make it bold as well. And then we're going to drag this into place. So you can see that when I do this, that actually that's snapping to center vertically, and that's snapping to center horizontally, so that's exactly in the center of the page.

I would recommend only using one letter because it fills out the square and that will make for a better looking icon and a better looking fabric on it in my opinion. You could use two or maybe three letters if you want but I would recommend sticking to one So, I'm going to leave this layer as black, but you could change the color if you want and stop there, if you like. But the other thing I'm going to do is I'm actually going to make a second copy of this. So we're going to duplicate layer. And on this copy, I'm actually going to rasterize which means it's no longer text, it's a shape. And then I'm going to use my paintbrush tool to change the color.

Okay, and so, I'm going to want to change my primary color here and I'm going to use the RGB value from our primary color which is 199 red. 26, green, and 26 blue. Okay, so let's do that now. All right, so it's a nice read. The next thing I'm going to do is I'm just going to shift it slightly to the left. So we're going to select our selector here.

And just like that, could bring it up a little bit. Let's do it like there. So you can see we've added like a pseudo 3d effect, which I think looks kind of cool. And that's pretty much it. So now we're going to start by saving it as a PSD, just in case we want it later. And the other thing we're going to do is we're going to export this as a PNG, we need to save it as a PNG in order to maintain the transparent background, which is important for the favicon in the browser.

As browsers are different colors, some can be white, some could be black, some could be gray. So by having that transparency, it allows it to just pick up the main part of our icon. Alright, so we're gonna save that And we're going to go into our folder and we're going to copy these or cut them, I should say. And we're going to go into our coding projects into our main assets folder. And we'll make a new folder, icons. And we'll paste that in there.

So we'll just rename this icon. Let's call it j icon, why not. And this one that we're actually going to use in our project, we're going to rename this one. Actually, we'll rename this the same thing. We're gonna actually run it through the favicon generator anyway. Alright, so our total time to create this unique icon is about five minutes.

Pretty cool. All right, now, we're going to go to the real favicon generator, as I said, so I'll have the link to this website. I think it's currently the best way to create the multiple icons. We're going to Need for our pw A. So all we're going to do is we're going to select a picture. And we're going to go into our coding projects into our assets icons folder.

And we're going to copy this j icon. So you can see that this shows what it will look like in a bunch of different devices. And we can actually modify things a little bit if we don't like the way it looks. So for example, I could add a solid background. I think that that looks better, the plain background there. And in this case, I will just leave it for Android.

And let's say for this, I want our background to be black instead. And yeah, I think that stuff looks pretty good. All right, and we can even style it for a touch bar, which is pretty cool. So I could just, you know, and I'll just change that. Maybe not black. Let's So let's go with like a red, dark red.

All right, cool. Okay, so we're just going to generate our favicons. And in our code, we're not going to use the code, we're just going to use the favicon package. So we're just going to click this to download it. And we're going to go into our folder. We're going to cut this and we're going to put this into our assets folder, here, and then we're going to extract to our folder here.

Now that we've extracted our favicon package, we're going to go to a new window and we're going to go to our actual project. So we're going to go to our project into our source assets. So you can see that we already have an icons folder and this is because when we first made our pw a and already created all these icons for us. So we actually only need two of these, we only need 192 and 512. So what we're going to do is we're going to copy those over these first two right here. Okay, and we're just gonna rename them to this.

So icon dash and then the size times the size. So we'll get rid of these. And lastly, we're going to copy over our favicon dot Ico file. The benefit of this file is that it can actually be a slightly different size depending on what's needed. And finally, now we're going to get back to the code to make sure that we have all this stuff plugged in properly. Okay, so First thing we're going to do is we're going to go into our index dot HTML file.

So let's close all this for now. And we're going to go here. And we're going to change where our icon is pointed at. and assets icons of conduct Ico. Okay, that's it for our favicon. And onto the icons themselves, we're going to modify our manifest JSON file.

So it's called manifest dot web manifest dot JSON. And we're going to remove the sizes of our icons that we did not use. So we didn't use any of these. So we're going to get rid of those. And we didn't use 384 either. So we need that.

So now we just have these two 192 and 512. While we're here, we can also change our theme color to just be black. So six zeros. You can choose to modify your app name here. And keep in mind that the short name should be less than 12 characters if you're going to try to do it properly. And yeah, I think we're pretty much done.

So let's go back and check on our project, we can close this, get rid of this, we're going to inspect. So you can already see that we have our favicon up here. That looks great. And if we go into our application, and we click on our manifest, you can see that we have our two icons here. 192 and 512. Perfect.

So that concludes our icon related work. In the next one, we're going to lighthouse audit our project. I'll see you in that one. Bye for now.