Back to: HTML Tutorials
Favicon in HTML with Examples
In this article, I am going to discuss Favicon in HTML with Examples. Please read our previous article where we discussed Links in HTML with Examples. At the end of this article, you will learn everything about HTML Favicon with Examples.
Favicon in HTML
A favicon is a tiny file that represents a website or a blog. It’s also referred to as a tab icon or a website icon. In the browser tab, the favicon displays next to the page title.
The image of a favicon is saved as a .ico file. There are several file types, but all browsers support the.ico format. In the browser tab, a favicon image is displayed to the left of the page title. Look at the example below.
How to Create Favicon?
To add a favicon in the Html file we need to store the favicon file inside the root directory. We can create a favicon file on favicon.cc or we can download a favicon from flat icons.
How to insert Favicon in HTML File?
To insert a favicon file in Html <link> element is used to insert external source files and stylesheets inside the HTML document.<Link> is an empty tag it is always placed inside the head tag of the Html document.
Syntax to use Favicon in HTML
The below syntax is used to link the favicon in the Html document.
<link rel=”icon” href=”favicon.ico”>
In Html, the rel attribute is used to define the relationship between the Html document and the linked document.
Example to use Favicon in HTML
Look at the example below to understand how to add a favicon to the website. We can add a favicon in different file formats. For this tutorial, we will use a png file that we have downloaded from flat icons.
Favicon Example:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="robot.png">
<title>Favicon Tutorial</title>
</head>
<body>
<p>We have added favicon to a website</p>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss Colors in HTML with Examples. Here, in this article, I try to explain Favicon in HTML with Examples and I hope you enjoy this HTML Favicon with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.