How to add an icon logo in the title bar using HTML?
To add an icon (favicon) to the title bar of a web page, you can use the <link> element with the rel attribute set to "icon" in the <head> section of your HTML document. Here’s how you can do it:
- Prepare the favicon image: Create an image file that you want to use as the favicon. Commonly, the favicon image is a square image with dimensions like 16×16 pixels or 32×32 pixels.
- Upload the favicon image: Upload the favicon image to your web server or hosting service.
- Add the favicon link: In the
<head>section of your HTML document, add the following line inside the<head>tags, replacing"favicon.ico"with the actual path to your favicon image:
<link rel="icon" href="path-to-your-favicon/favicon.ico" type="image/x-icon">
If you have jpg or png or any type of image file, you can easily convert them to a .ico file using ICO Converter.
Here’s an example of how the complete HTML code might look with the favicon link added:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- Add the favicon link here -->
<link rel="icon" href="path-to-your-favicon/favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Your content here -->
</body>
</html>
Make sure to replace "path-to-your-favicon/favicon.ico" with the actual path to your favicon image.
Note that different browsers may support various image formats for favicons, such as ICO, PNG, GIF, and JPEG. For best compatibility, you can create and use a favicon in the ICO format, which is a standard format for favicon images.
