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

Trang chủ » Html Icon In Head Title » How To Add A Favicon To Your Website With HTML | DigitalOcean

Có thể bạn quan tâm

  • Blog
  • Docs
  • Get Support
  • Contact Sales
  • Tutorials
  • Questions
  • Product Docs
  • Cloud Chats
  • Search Community
Tutorial Series: How To Build a Website with HTML1/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 4/23 How To Use Inline-level and Block-level Elements in HTML 5/23 How To Nest HTML Elements 6/23 How To Use HTML Attributes 7/23 How To Add Images To Your Webpage Using HTML 8/23 How To Add Hyperlinks in HTML 9/23 How To Use a <div>, the HTML Content Division Element 10/23 How To Change the Color of HTML Elements 11/23 How To Set Up Your HTML Website Project 12/23 How To Add an HTML <head> Element To Your Webpage 13/23 How To Add a Favicon to Your Website with HTML 14/23 How To Style the HTML <body> Element 15/23 How to Create the Top Section of Your Homepage With HTML 16/23 How To Add a Background Image to the Top Section of Your Webpage With HTML 17/23 How To Add a Styled Profile Image To Your Webpage With HTML 18/23 How To Add and Style a Title To Your Webpage With HTML 19/23 How To Create Additional Webpages on Your HTML Website 20/23 How To Center or Align Text and Images on Your Webpage with HTML 21/23 How To Create the Body of Your Homepage With HTML 22/23 How To Add a Footer To Your Webpage With HTML 23/23 How To Add Twitter Card and Open Graph Social Metadata to Your Webpage with HTML

Tutorial

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

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.

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

Learn more about our products

Next in series: How To Style the HTML <body> Element ->

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.

SubscribeSpin UpBrowse Series: 23 articles
  • 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 allAbout the authorsDefault avatarErin Glass

author

Senior Manager, DevEd

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

Still looking for an answer?

Ask a questionSearch for more helpWas this helpful?YesNo CommentsFollow-Up Questions1 Comments

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 or Sign Up to Commentsyedadaniyahaider • July 8, 2021

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

  • Reply
Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.

Try DigitalOcean for free

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

Sign up

Popular Topics

  • AI/ML
  • Ubuntu
  • Linux Basics
  • JavaScript
  • Python
  • MySQL
  • Docker
  • Kubernetes
  • All tutorials
  • Talk to an expert
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

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.

© 2024 DigitalOcean, LLC.Sitemap.

Từ khóa » Html Icon In Head Title