-
Hajipur, Bihar, 844101
HTML
HTML5 Basics
-
HTML Introduction
-
HTML Editors
-
HTML Basic
-
HTML Elements
-
HTML Attributes
-
HTML Headings
-
HTML Paragraphs
-
HTML Styles
-
HTML Formatting
-
HTML Quotations
-
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
-
HTML Tables
-
HTML Lists
-
HTML Block & Inline
-
HTML Div
-
HTML Classes
-
HTML Id
-
HTML Head
-
HTML Layout
-
HTML Responsive
-
HTML Computercode
-
HTML Semantics
HTML Forms
-
HTML Forms
-
HTML Form Attributes
-
HTML Form Elements
-
HTML Input Types
-
HTML Input Attributes
-
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics
HTML Favicon
🔹 What is a Favicon?
A favicon (short for “favorite icon”) is a small icon displayed in the browser tab, bookmark list, and address bar (in some browsers). It helps users easily identify a website visually.
🔹 How to Add a Favicon
To add a favicon, use the <link> tag inside the <head> section of your HTML page.
✅ Basic Syntax:
<link rel="icon" type="image/x-icon" href="favicon.ico">
🔹 Favicon File Types
| Format | Description |
|---|---|
.ico |
Most widely supported (recommended) |
.png |
High quality, but older browsers may not support fully |
.svg, .gif |
Optional formats (modern browsers only) |
🔹 Example with .ico File
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
🔹 Hosting the Favicon
-
Place the favicon file in the root folder of your website.
-
You can also provide a full path or URL in the
href.
<link rel="icon" href="/images/favicon.ico">
🔹 Favicon Sizes and Devices
Modern websites use multiple icons for different devices:
<!-- Standard favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- PNG for modern browsers -->
<link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
<!-- Apple devices -->
<link rel="apple-touch-icon" href="apple-icon.png">
Practice Questions
Q1. Add a favicon to an HTML page using the .ico file.
Q2. Write code to use a PNG file as a favicon.
Q3. Place a favicon inside a folder and reference it using relative path.
Q4. Use both .ico and .png as favicons in the <head>.
Q5. Apply a favicon hosted at an external URL.
Q6. Add an Apple touch icon for iOS users.
Q7. Test how favicon appears in different browsers.
Q8. Check how to add multiple favicon sizes.
Q9. Remove a favicon and observe browser behavior.
Q10. Create a custom favicon using an online favicon generator and implement it.
HTML
HTML5 Basics
-
HTML Introduction
-
HTML Editors
-
HTML Basic
-
HTML Elements
-
HTML Attributes
-
HTML Headings
-
HTML Paragraphs
-
HTML Styles
-
HTML Formatting
-
HTML Quotations
-
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
-
HTML Tables
-
HTML Lists
-
HTML Block & Inline
-
HTML Div
-
HTML Classes
-
HTML Id
-
HTML Head
-
HTML Layout
-
HTML Responsive
-
HTML Computercode
-
HTML Semantics
HTML Forms
-
HTML Forms
-
HTML Form Attributes
-
HTML Form Elements
-
HTML Input Types
-
HTML Input Attributes
-
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics
