How to Add a Favicon to Your HTML Document
How to Add a Favicon to Your HTML Document
A favicon (short for "favorite icon") is a small image that represents your website. It appears in the browser tab, bookmarks, and other places where your site is referenced. This guide will walk you through the steps to add a favicon to your HTML document.
Key Concepts
- Favicon File: Typically a .ico, .png, or .gif file, the favicon is a small image that visually represents your website.
- Linking the Favicon: You need to link the favicon file in the
<head>section of your HTML document.
Steps to Add a Favicon
- Create Your Favicon: Design a small image (usually 16x16 or 32x32 pixels).
- Save the Favicon: Save it in the root directory of your website, commonly named
favicon.ico. - Add Link in HTML: Use the
<link>tag in the<head>section of your HTML file to link to the favicon.
Example Code
Here is a simple example of how to link a favicon in your HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>Key Points to Remember
- File Formats: While .ico is the most common format, modern browsers also support .png and .gif.
- Browser Caching: Sometimes, browsers cache favicons. If you update your favicon and it doesn’t show up, try clearing your browser cache.
- Multiple Sizes: For better compatibility across different devices, consider providing multiple sizes and formats of your favicon.
By following these steps, you can effectively add a favicon to your website, enhancing its branding and user experience!