Learn Java, Angular, SQL with Coding Exercises & Career Tips

Favicon Tag

A favicon (short for 'favorites icon') is a small image that appears in

The browser tab next to your webpage title
The address bar (on some browsers)
The bookmarks list when a user saves your site

It is a small but essential branding element that gives your site a professional look and helps users easily recognize it.

How to Add a Favicon in HTML
Favicons are added using the <link> tag inside the <head> section of your HTML document.

Syntax:

<link rel="icon" href="path/to/favicon.ico" type="image/x-icon">

rel="icon" tells the browser this is the site's icon.
href is the path to your favicon file (can be .ico, .png etc.).
type defines the image file type (commonly image/x-icon or image/png).
Optional: sizes="16x16" or 32x32 for size-specific icons.

Example:

<!DOCTYPE html>
<html>
 <head>
  <link rel="icon" href="logo.png" type="image/png" sizes="16x16">
  <title>Favicon</title>
 </head>
 <body>
  <h1>Favicon Tag Example</h1>
 </body>
</html>

Output:

The logo.png icon will appear in the tab bar next to the page title.

Tips for Using Favicons

Use a square image like 16x16, 32x32 or 48x48 pixels.
Common file formats is .ico, .png, .svg.
Store the favicon in your root folder or a dedicated images or icons folder.

SEO & UX Benefits

Improves brand visibility
Adds a touch of professionalism
Helps users recognize your site among many open tabs