Voiceover: Welcome to the last work section.
We have come such a long way so far.
Our website looks super great
and has some cool animations.
Now in this section, we'll do some
optimizations on our web page,
and then I will show you how you can
launch your own websites to the internet.
But before doing that, let's add a final touch
before we make our webpage ready for launch, a favicon.
Favicons are those little icons you see
on browser tabs and on your bookmarks bar.
It is part of the identity of any website
and makes users recognize your website.
So don't skip this step.
There is a very easy, online tool to do this.
We just need an image to serve as our icon.
So, let's do that for now.
So this is the tool I was talking about,
so it's the Favicon Generator.
And with this we can create icons for the browser,
of course, for the iOS home screen,
for Android home screen, and for Windows 8,
and, yeah, for Windows in general.
So, we just need to pick our image.
In this case, I'm going to use the logo.
And the black one of course, so I'm going to
use this one to create the favicon.
And here we go.
So the first icon here is actually for iOS,
and since ours is transparent,
we'll need to add a background color,
which will be white.
And then we have Android here as well.
And I will also add this white color.
And this is not so important, actually.
What really matters is down here.
And we go now,
click here because we want to
choose a path where we're going to put our icons,
because we don't want them in the root,
so in the main project folder.
So let me check what this is.
So I want them here, then in the Resources,
and I'll actually create a folder for them here,
Icons
or Favicons
and so, it's Resources and then Favicons.
So I want Resources
and then Favicons.
So this is where we'll put the icons.
And then, let's generate it.
Okay, so we just download this and we grab
this code here, and insert it into our website.
So let's just paste off this down here.
It's a lot of code, but well, don't worry.
And now we just need to put this stuff
into our folder, actually.
And here it is.
So, Favicons.
All right, so, put them into Resources
and we can replace that folder we had
because it has the same name.
And so, here are all our icons.
So let's check this out.
So the icon is not showing up here as it should.
And I actually don't know why,
but I'm sure that it is working
on your computer, because as we can see in here,
everything is working fine, supposedly.
Which means that the images are in the correct place
and, yeah, this code, of course, is also correct.
So I don't know why it doesn't appear here in my case,
but probably on your computer it will appear.
So, okay, now you know how to add
that special touch to your website as well.
Now, I could just have stopped here
and then launched our website or show you
how to launch your website.
But I want to show you even more.
I want our website to be perfect,
and so every detail matters.
So, let's now optimize our website's
page speed in the next lecture.