Favicon Integration and Social Network Summary
In this guide we'll walk through how to integrate a custom favicon into a website along with examining all of the tools we used to build the website.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this final guide, we'll review the application, and add a favicon.

Favicon is the little icon or logo you see on the tab of your webpage, and they get downloaded to your system after you visit the webpage once.

I already have the favicon image in our github repository, so feel free to download it to your main application folder.

Next, go to index.html, and at the very bottom of the <head> tag, add a link to the favicon, like this:

  <link rel="shortcut icon" type="image/png" href="favicon.png">
</head>

This should do the trick for you.

If you refresh the page, you can see a small logo on your tab. With this, we're done with the application. Great job if you went through it. It was a professional application that I'm sure would have given you a feel of how to go about creating such projects for your clients in the future.

While working on professional applications, you'll be handed over a design like this made by a professional designer or a template, and you'll have to take it from there. This hands-on experience will help you then.

Feel free to use this code as a framework, and customize it the way you want.

With this, you're well on your way to become a professional HTML developer. As always, please let me know if you have any questions or feedback, and I'll be happy to answer them for you.

Good luck with everything!