« Previous Next »

Favicon

A favicon (short for "favorite icon") is a small icon that appears in the browser tab, bookmarks, and shortcuts. It helps users visually identify your website.

How to Add a Favicon

Include the following <link> tag inside the <head> section of your HTML document:

<head>
  <title>My Website</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

Favicon File Notes

The favicon file is usually named favicon.ico and placed in the root directory.
You can also use .png, .svg, or .gif formats, but .ico is the most universally supported.
Recommended sizes are 16x16 or 32x32 pixels.

Example Using PNG

<link rel="icon" type="image/png" href="favicon.png">

Best Practice

Save the favicon in the same folder as your index.html file to avoid broken paths.

Advanced Tip

For full support on all devices and platforms, generate a favicon set using: https://realfavicongenerator.net/

Example

Output :

Practice Exercises

Task 1: How to add favicon in HTML head?

Goal: Learn how to add a website title along with a PNG favicon inside the <head> element.
💡 Hint: Use <link rel="icon" type="image/png" href="..."> inside <head>.

💡 Show Solution

<html>
  <head>
    <title>AIT - Academy of Information Technology</title>
    <link rel="icon" type="image/png" href="AIT.png">
  </head>
  <body>
    <h1>Welcome to AIT</h1>
    <p>Learn HTML, CSS, JavaScript, and more at the Academy of Information Technology.</p>
  </body>
</html>

Output :

AIT - Academy of Information Technology

Welcome to AIT

Learn HTML, CSS, JavaScript, and more at the Academy of Information Technology.

Explanation: The <link> tag connects the external icon file with the webpage, while rel="icon" tells the browser to render it on the browser tab next to the page title.

« Previous Next »