- 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
<link> tag in the HTML file after the
<title> tag in the
- 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>
- 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.