The project layout should now start to make sense. We have a bunch of files in the main folder left, so let’s go over them. Starting with the favicon.

Favicon

We have a “favicon.ico” in the folder, but it doesn’t show up at the top of the tabs in your browser - why?

Because you probably just dragged the page into the browser, this doesn’t resemble a website served from a server.

To see it actually work, you have to run the Live server via Visual Studio Code, for example.

Creating your own Favicon set

Obviously the first thing after understanding what it is and how to see it, you will want to change it to give your site a more personal touch.

My suggestion is to initially take a look around the internet as to what Favicon Generators are out there, because they will get you up and running fast, and also include everything you probably will need, for free!

One of the first ones I found is favicon.io.

Take a look, explore and test out how it works!

Did you know you can also view the websites served by the Visual Studio Code Live Server plugin on your mobile devices too?

Additionally

You can also read more about Favicons here: