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.

Written by Shaikh Abdul Shahid

A Full-Stack Developer with experience in PHP, Laravel, JavaScript, and React.
Founder of Online Learner, sharing practical knowledge and programming tutorials.
Building and maintaining real-world web applications since 2017.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: HTML Images

Next: HTML Links

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.