Financial Year 2023 End Sale: Get upto 40% OFF on Job-oriented Training! Offer Ending in
D
H
M
S
Get Now
HTML favicon

HTML favicon

22 Jul 2023
Advanced
807 Views
3 min read
Learn via Video Course & by Doing Hands-on Labs

HTML For Beginners Free Course

HTML favicon

HTML favicon is a small file that contains one or more icons representing the website or a blog. Favicon is also known as a tab icon, website icon, URL icon, or bookmark icon.
The HTML Favicon icon is displayed on the address bar of the web page, at the browser's tab, in browser history, bookmark bar, etc. The image format of a favicon is .ico file format. Various file formats are available, but the .ico format is supported by every browser. There are many features other than Favicon which you can learn with the help of HTML Online Training.

How to Create a Favicon in HTML

These are the following steps for creating the favicon:
  • Click on the given URL, to make the favicon: https://www.favicon.cc/
  • When the favicon is created successfully, we can download the favicon by clicking on the download favicon option.
  • After downloading, the favicon with the name favicon.ico is available in the file system drive.

How to add Favicon in HTML

These are the following steps to let you know How to add favicon in HTML file:
  • Open the HTML file. Then use the given syntax to insert the favicon in the HTML file.

Syntax:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  •  This syntax must be used in our HTML file. Then we have to save the file.
  •  Now. You can open the HTML file in any browser. We will see the icon on the web page.
Example
<html> 
<head> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
</head> 
<title> favicon html code </title> 
<body> 
<br> 
<br> 
<p align="center"> 
<img src="image.jpg"> 
</p> 
</body> 
</html>
Summary
HTML favicon can improve the user experience by making it easier to identify and differentiate between different websites in the browser. They can also help in branding a website by displaying a logo or other distinctive image. In this article, we learned what is Favicon and how can we create a favicon HTML code in order to make an attractive website and better user experience
Learn more in our HTML Certification Course.

Take our free html skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE

Share Article
About Author
Sakshi Dhameja (Author and Mentor)

She is passionate about different technologies like JavaScript, React, HTML, CSS, Node.js etc. and likes to share knowledge with the developer community. She holds strong learning skills in keeping herself updated with the changing technologies in her area as well as other technologies like Core Java, Python and Cloud.

Accept cookies & close this