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.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.