A favicon (short for “favorite icon”) is a small icon associated with a specific website or web page, typically displayed in the browser’s address bar, bookmarks, and tabs. It helps users quickly identify and navigate to their favorite sites.
Basic Syntax
To add a favicon to your website, you use the <link> tag inside the <head> section of your HTML document. Here’s a basic example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Classes Example</title>
<style>
.highlight {
background-color: yellow;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<p class="highlight italic">This paragraph is highlighted and italicized.</p>
</body>
</html>
Steps to Add a Favicon
1. Create a Favicon Image:
Design a small image, typically 16×16 pixels or 32×32 pixels in size.
Save the image in a format like .ico, .png, .gif, or .svg.
2. Upload the Favicon to Your Website:
Place the favicon file in your website’s root directory or a specific directory for images.
3. Add the Favicon to Your HTML:
Add the <link> tag in the <head> section of your HTML document.
Example Using Different Image Formats
<head>
<!-- ICO format (most commonly used) -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- PNG format -->
<link rel="icon" href="/favicon.png" type="image/png">
<!-- SVG format -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>