A HTML Favicon, short for “favorite icon,” is a small image or icon that is associated with a website and appears in the browser’s address bar, tabs, and bookmarks. It helps to identify the website and make it more recognizable to users.
To add a favicon to your website, follow these steps:
- Create a square image file of your favicon. The recommended size for a favicon is 16×16 pixels or 32×32 pixels.
- Save the image file with a suitable name, such as “favicon.ico”.
- Place the favicon file in the root directory of your website.
- Add the following HTML code to the
<head>section of your web page:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>The first link element specifies the location of the favicon file using the href attribute. The type attribute is used to indicate the specific MIME type of a file that is being referenced within an HTML document.
The second link element specifies the same information as the first, but is used for older versions of Internet Explorer that do not support the first link element.
By default, modern web browsers will look for a file named “favicon.ico” in the root directory of your website. However, you can also specify a different file name and location using the href attribute.
Having a favicon is a small but important aspect of web design that can help to make your website more professional and recognizable.