How to Add a Favicon to Your Website
A favicon (short for favorite icon) is a small, iconic image that represents your website in browser tabs, bookmarks, and history listings. It's a crucial element for branding and improving user experience. In this article, we'll walk through how to add a favicon to your website using a specific example.
What is a Favicon?
A favicon is a small square image, typically 16x16 or 32x32 pixels, that appears next to your website's title in the browser tab. Despite its small size, it plays an important role in helping users quickly identify your site among many open tabs.
Example Favicon
URL: https://www.maheshgupta.com.np/favicon.ico
How to Implement a Favicon
Adding a favicon to your website is simple. You just need to include a link element in the <head> section of your HTML document that points to your favicon image.
<link rel="icon" href="https://www.maheshgupta.com.np/favicon.ico" type="image/x-icon">
Step-by-Step Guide
Prepare Your Favicon
Create or obtain a square image. The recommended format is ICO, but PNG and SVG are also widely supported.
Upload Your Image
Place your favicon file on your web server. Note the URL where it's accessible.
Add the HTML Code
Insert the link element in the head section of all your HTML pages.
Test Your Implementation
Refresh your website and check if the favicon appears in the browser tab.
Create Your Own Favicon
Upload Your Logo
Upload your logo image to generate a favicon preview.
No image uploaded yet.
Complete HTML Example
Here's how a basic HTML page looks with the favicon implemented:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<!-- Favicon Link -->
<link rel="icon" href="https://www.maheshgupta.com.np/favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example page with a favicon.</p>
</body>
</html>
For maximum browser compatibility, consider providing your favicon in multiple formats (ICO, PNG, SVG) and sizes (16x16, 32x32, 48x48). You can use multiple link elements with appropriate "sizes" attributes to cover different use cases.