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>
HTML favicon – Interview Questions
Q 1: What is a favicon?
Q 2: Where is favicon defined?
Q 3: Which tag is used for favicon?
Q 4: Common favicon file format?
Q 5: Why is favicon important?
HTML favicon – Objective Questions (MCQs)
Q1. What is a favicon?
Q2. Which tag is used to add a favicon in HTML?
Q3. What attribute specifies the favicon URL?
Q4. Which attribute defines the type of favicon file?
Q5. How do you add a favicon named favicon.ico?