HTML Favicon

A favicon (short for "favorite icon") is a small image that represents a website or web page. It appears in the browser tab, bookmark list, and sometimes in the address bar. Including a favicon helps with brand recognition and makes it easier for users to identify your site among many open tabs.

How to Add a Favicon

To add a favicon to your HTML page, you typically use a <link> element in 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>Document</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Examples of Favicons

Basic Example:

<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">

Using PNG Format: If you prefer PNG format, you can use:

<link rel="icon" href="/path/to/favicon.png" type="image/png">

Different Sizes for Different Devices: You might want to include multiple sizes for different devices and resolutions:

<link rel="icon" href="/path/to/favicon.ico" sizes="16x16" type="image/x-icon">
<link rel="icon" href="/path/to/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png" sizes="180x180">

Using SVG Format: For a scalable vector graphic:

<link rel="icon" href="/path/to/favicon.svg" type="image/svg+xml">

Key Points

File Location: Ensure the path to the favicon is correct relative to your HTML file.
Cache Issues: Sometimes browsers cache favicons. You might need to clear your browser cache to see changes.
Multiple Formats: To ensure compatibility across different browsers and devices, consider providing favicon images in multiple formats and sizes.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us