Definition:
A favicon is a small icon displayed next to your page title in your browser. You can use any image you like but the image should be in high contrast for better results.
Favicon image always displays before your web page title. You can see a screenshot below that red highlighted circle mark is a favicon image.
How to add a Favicon image to your webpage?
First of all, save your favicon image to the root directory of your webserver or create a folder in the root directory named “images” and keep your favicon image in that folder. A common name for a favicon image is favicon.ico.
Second, now is the time to link your favicon image to your page. So, add the <link> element to your HTML documents after the <title> element and give a reference to your favicon.ico folder.
See an example below:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a home page</h1>
<p>This is a home page paragraph.</p>
</body>
</html>
Now save your HTML documents and reload your browser. You should be able to see your favicon icon.
Output:
You may be interested in the following topics:
- HTML Favicon
- HTML Links
- HTML Colors
- HTML Quotations
- HTML Comments
- HTML Formatting
- HTML Styles
- HTML Paragraph
- HTML Headings
- HTML Attributes
- HTML Elements
- What is HTML?