Horje
How To Add a Favicon in HTML

A favicon is a small image displayed next to the page title in the browser tab.

You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".

Next, add a <link> element to your "index.html" file, after the <title> element, like this:


Full Example of Favicon in HTML

Now, save the "index.html" file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.
index.html
Example: HTML
 <!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" href="https://itupto.com/images/favico.ico" sizes="32x32" />
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 

Output should be:

Full Example of Favicon in HTML

Favicon File Format Support

The following table shows the file format support for a favicon image:

Output should be:

Favicon File Format Support





Related Articles
What is HTML Favicon HTML Favicon
How To Add a Favicon in HTML HTML Favicon

Single Articles
Full Example of Favicon in HTMLHTML Favicon
Favicon File Format SupportHTML Favicon

Read Full:
HTML Favicon
Category:
Web Tutorial
Sub Category:
HTML Favicon
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
179


Reffered: https://www.w3schools.com/html/html_favicon.asp

Share on: