How To Add A Favicon To Your Website With HTML | DigitalOcean

• Blog
• Docs
• Get Support
• Contact Sales

• Tutorials
• Questions
• Product Docs
• Cloud Chats
• Search Community

Report this

What is the reason for this report?This undefined is spamThis undefined is offensiveThis undefined is off-topicThis undefined is otherSubmit

Table of contents

1. Tutorial Series
2. How To Build a Website with HTML

TutorialHow To Add a Favicon to Your Website with HTMLUpdated on December 15, 2021Spin Up

By Erin Glass

Senior Manager, DevEd

Table of contentsPopular topics

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.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

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.

Spin UpVisit series page

Browse Series: 23 tutorials

• 1/23 - How To Set Up Your HTML Project With VS Code
• 2/23 - How To View the Source Code of an HTML Document
• 3/23 - How To Use and Understand HTML Elements

Expand to view all

About the author

Erin GlassAuthorSenior Manager, DevEdSee author profile

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

See author profileCategory:TutorialTags:Spin Up

Still looking for an answer?

Ask a questionSearch for more helpWas this helpful?YesNoComments(1)Follow-up questions(0)

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!

Sign in/up to commentsyedadaniyahaiderJuly 8, 2021Show less

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

ReplyThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.

Deploy on DigitalOcean

Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products.Sign up

Popular Topics

1. AI/ML
2. Ubuntu
3. Linux Basics
4. JavaScript
5. Python
6. MySQL
7. Docker
8. Kubernetes
9. All tutorials
10. Talk to an expert

Featured tutorials

1. SOLID Design Principles Explained: Building Better Software Architecture
2. How To Remove Docker Images, Containers, and Volumes
3. How to Create a MySQL User and Grant Privileges (Step-by-Step)

• All tutorials
• All topic tags

Join the Tech Talk

Success! Thank you! Please check your email for further details.

Please complete your information!

• Table of contents

• Deploy on DigitalOcean

  Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products.Sign up

  Popular Topics

  1. AI/ML
  2. Ubuntu
  3. Linux Basics
  4. JavaScript
  5. Python
  6. MySQL
  7. Docker
  8. Kubernetes
  9. All tutorials
  10. Talk to an expert

  Featured tutorials

  1. SOLID Design Principles Explained: Building Better Software Architecture
  2. How To Remove Docker Images, Containers, and Volumes
  3. How to Create a MySQL User and Grant Privileges (Step-by-Step)
  • All tutorials
  • All topic tags

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Sign Up

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Learn more

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Learn more

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

SubmitSubmit

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

View all products

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

Get started

*This promotional offer applies to new accounts only.

© 2025 DigitalOcean, LLC.Sitemap.