// Tutorial //

How To Add a Favicon to Your Website with HTML

Published on July 28, 2020 · Updated on December 15, 2021
Default avatar
By Erin Glass
Senior Manager, DevEd
How To Add a Favicon to Your Website with HTML

In this tutorial, we will walk through the steps involved in adding a favicon to your webpage using HTML. You can use any image you like for your favicon, but keep in mind that simple, high-contrast images often work best given the favicon’s small size. You can also generate a custom favicon through sites like favicon.cc.

A favicon is a small image that is located in the browser tab to the left of a webpage’s title. The image below illustrates the location of a favicon.

Image of Favicon

To add a favicon to your site, create a folder in your project directory called images (if you don’t already have one) and save your desired favicon image in this folder. If you don’t have an image, you download this Sammy the Shark image that we have hosted on our demonstration website. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series.

Next, add the <link> element (highlighted below) to your index.html file right below the <title> element. Your code should now be like this:

...
<title> Sammy’s First Website </title>
<link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location"/>
...

Make sure to replace Favicon_Image_Location with the relative file path of your favicon image. Save the index.html file and reload it in your web browser. Your browser tab should now contain a favicon image.

You should now know how to add favicon images to websites using HTML.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers - for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

Learn more here


Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

About the authors
Default avatar
Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Thanks for telling how we add favicons to html it helped me

Try DigitalOcean for free

Click here to Sign up and get $200 of credit to try our products over 60 days!