HTML Favicon

html favicon
  • HTML Favicon is a small image that is displayed in a browser tab, to the left of the page title.
  • Favicon is needed for branding and marketing purposes and also to make the web page look more professional.
  • If you would like to add it in your webpage then it should be high contrast image or icon.
  • Favicon can contain one or more icon to represent a website or a blog.

Add Favicon using HTML :

To add a favicon to your website, following are the steps :
1) Put the favicon in root directory
2) Rename the icon to favicon
3) Extension must be .ico
4) Add <link> tag in the HTML file after the <title> tag in the <head> tag

Syntax :

  • Use the below given syntax to insert the favicon in the web page :
<link rel="icon" type="image/x-icon" href="D:\Techno\favicon.ico">

Characteristics of favicon :

Favicon must have the following characteristics :

  • Standard Name with a File Format: Once an image is created and named, the default has a favicon.ico (ICO files done with X-ICON Editor).
  • Size of an Image File:16 * 16, 64 * 64, 128 * 128 pixels and moreover, files should not exceed 100KB.
  • Colour: maybe 8 bites, 24 or 32 bites
  • Image: Should be in gif or png format.

For Example :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>HTML FAVICON</title>
    <link rel="icon" type="image/x-icon" href="D:\Techno\favicon.ico">
  </head>
  <body>

  </body>
</html>

Output :

  • In the above image, the icon marked with a red arrow and encircled red is the favicon.
  • If you would like to see how it can be done step by step in video you can watch it below.

Note :-

Watch HTML Anchor tag and Link video on YouTube – Click here
Types of HTML Elements – Click here

Topic

Join Telegram Group