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.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: HTML Images

Next: HTML Links

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.

Terms Disclaimer About Us Contact Us