So now we got our first websites deployed.
To conclude this course section,
there are two more topics I wanna dive in.
And the first topic is about favicons.
Now what are favicons?
You might recall that may be early in the course
you saw an error message, regarding a missing favicon.
To be precise, you can see such an error message,
in the developer tools.
If you go to the console, or network tab,
and you then go to your locally running website.
So the site that is hosted,
that is served by this life server extension.
And you then reload this,
by right clicking on the reload icon here, in Chrome,
and choosing empty cache and hard reload
on your local website.
And if you do that,
then you should see this error message,
that it basically fails to load a favicon.ico file.
You also can see this in the network tab,
which shows outgoing network traffic of the website.
There you see that it loaded the CSS files
and some funds from Google funds and so on,
but that then, it also failed to load, that's why it's red,
this favicon.ico file.
Now what's up with this favicon.ico file?
Well, this is a special file,
the browser tries to load automatically.
That's why we have this request in the first place,
because in our website code,
we're actually never looking for such a file.
We're not including any image, or linking to any file
that would have this strange name.
Instead, that's a default file the browser is looking for.
And a favicon is simply a little icon
that's used by the browser,
to display it next to the site name.
For example, here,
we got this globe next to the file name,
which has Chrome's default icon,
if no more specific icon was found.
We can see a more specific icon in action here
for Netlify Drop.
This here, this green diamond,
is the favicon of Netlify.
It's basically their logo in a simplified form.
And you can choose any icon as a favicon,
that should be loaded for your website,
when it's being served by a server.
Now, if you don't have one,
as we have it here, we don't have an icon yet.
That's no problem.
The site works and everything is all right.
But if you do want to have your custom icon here,
all you have to do is add such a favicon to your website.
And that's the first thing I wanna do together with you now.
To generate a favicon,
you can search for Favicon Generator.
And you will find pages that do that for you.
Now, you can try any of these pages, I'll pick
a random one here, basically.
And these pages then give you ways of generating favicons.
Often by allowing you to upload a JPEG, or PNG file,
or any other image,
and then spitting out a finished favicon.
So here, for example, I'm using favicon.io.
I'll choose the image uploader.
And then here we can drag and drop our image,
which we wanna transform into such a favicon here,
or click onto this box to upload one.
And here I simply choose my challenges trophy JPEG file,
and that's what I upload here.
And then, once that's done,
we can click Download, to download the favicon.
And this gives us a zip file, which we can unzip.
And in this case here, for this site,
if we unzip this folder,
what we get are a couple of files,
which are optimized for different targets, devices
and platforms.
The bare minimum file, which we need is this
favicon.ico file.
And I'll start with this file and copy it here.
And then add it to my project.
And here we can add it in the root level folder,
or maybe into the images folder here.
I did now add this favicon.ico file
here into my images folder.
Now, with it inserted here,
we can include this into our page,
to tell the browser where to find this.
And for this, we go into a HTML file.
And there, we can now add a new type of link here.
So we use this link element again,
but now we're not linking to a style sheet,
but instead, here for a REL,
we use icon instead of style sheet.
And for ref, we now point at the folder where it's placed.
In this case, images/favicon.ico.
And then we add another attribute here, the type attribute,
which we should set equal to image/x-icon,
which simply gives the browser a hint about which file
it will find there,
that it's an image in this special icon format.
That's the identifier for this type of file,
which is the commonly used and standard type of file,
which is being used for favicons.
Now with that, if we now reload this page here locally
on the development server, we can see our icon here.
And if we would now redeployed,
we would also see the icon on the deployed page.
Since we haven't done this yet,
I of course, don't see it here.
By the way, if I go back to this page
where I generated the favicon,
you also see the actual code
that should be included into your
pages here.
And here, you also see that you can include
the other files as well,
to cater for different platforms and
devices.
Feel free to do this,
to optimize your site and it's icon even more,
for different devices and platforms.
The favicon.ico file is to base file,
which you might wanna include on all your pages.
And that is what we did here.
I will now just also grab it, grab this link.
And then also add it to full week HTML,
so that there, we also have this icon added.