All right.
So in this lesson we're going to add a father Vatican to our Web site.
Now what is a fatty Con.
Well a fat con is that little icon that sits on your browser tab.
And the reason we're going to add this to our Web site is because we have gotten this error before in
the developer console.
So it said failed to load resource the server responded with a status of four or four for this five
icon.
In other words let's make this error go away the first step is going to run your server if you haven't
got it running already that is.
And if you remember the way to get your server running is by changing directory into your project folder.
So with C.D. and then dragging that project folder over and then you can start that server with the
python command Python hyphen M and then HDP dot server.
And for Port we'll simply go with eight thousand.
Once you've got your server running you can take this address here.
This HDP address and then in your browser you can paste it into the address bar and just navigate them.
Also make sure you've got this code up and running.
Now how do we create that five icon in the easiest possible way.
Well you can add any farther con you want any image you want.
The important thing is that you start with a square image ideally once you've picked your image.
Go to a Web site called Father con hyphen generator dot org.
If you just google for have a con generator you'll be the first one that comes up.
And this is where you're going to add your square image for my square image.
I'm just going to pick our company logo.
So I go to downloads and then simply pick out my logo here which is a square image and then what I'm
gonna do is on tick this one here and I'm going to leave this one here check to generate icons for web
Android.
Microsoft I was iPhone iPad and so on so I'm going to hit this button.
And then what happens is this handy little tool here is going to give me a zip file to download and
I can click on this thing and simply download a zip file.
And this is the point where you're going to see the value of using a tool like this.
If I had to my downloads folder and I take a look at what's inside this zip file of the generated icons
what I see is that I didn't just get one icon.
I get loads and loads of different five icons in different resolutions.
So this one here is 36 by 36.
This one's 96 96.
So depending on the platform and depending on where my Web site will be displayed there's always gonna
be the Wright Farrakhan available in the Wright resolution and generating all of this by hand is a little
bit tiresome which is why I quite like using something like the five icon generator in addition to all
these icons.
It's also giving me all the HMO that I need to add in order for these icons to be displayed properly.
Now I know this looks like a huge block of code and quite frankly we're actually not going to use all
of it for this tutorial.
Different platforms have different resolutions so there's different icons for each one and ideally you
would include all of them but we're going to keep our code simple.
We're going to keep our project simple and we're actually just gonna pick out one of these Fava cons
so that our era will go away and we're not bothered by what we're seeing in the developer console anymore.
So what I'd like you to do is I'd simply like you to copy this line right here.
This is the line for these 16 by 16 Farrakhan.
That's in the form of a PMG.
So just go ahead and copy that and then head on over to your index thought HDL file and just below where
we're importing our custom font we're going to paste that in there.
So we've got this bit of H2 mail right here.
And we can even add a little comment here.
So this is a fabrication and I'm going to comment this out by using a keyboard shortcut.
So I'm going to press command slash here on my keyboard.
But if you're in Windows then your shortcut might be a little different.
So I'm going to guess it's going to be control slash if you're on Windows now that I'm linking to my
fav icon in my index that each mail file actually also have to follow through and actually add it to
my project.
In other words I'm going to have to take my fav icon from my extracted zip file here and this is the
16 by 16 PMG.
And when I take it and I'm going to drag and drop it into my Explorer paint him.
And what that will do is it will actually add it to my project.
So there we go.
That's all there is to it.
Now what we can do is save our file here and then back in Chrome we can refresh our site and we should
see the five icon appear here in the browser tab.
And if you open the developer console then you should also not see any more errors here and that's all
there is to it in the next lesson.
We're gonna be moving on to a more complex topic namely how to draw on this canvas here.
I'll see you there.