A favicon is a small icon associated with a website. It commonly appears in the browser tab, bookmarks, browsing history, and other browser interfaces. Adding a favicon helps users recognize your website and gives it a more professional appearance.
In HTML, you can specify a favicon using the <link> element inside the <head> section of your document.
In this tutorial, you will learn what an HTML favicon is, how to add one to your website, which image formats you can use, and how to troubleshoot common problems.
What Is an HTML Favicon?
A favicon is a small graphic that represents a website. It is often a logo, a letter, or a simple symbol associated with the website’s brand.
For example, a website named Web4Learners could use a small blue icon containing the letters W4L.
The favicon is usually referenced using a <link> element inside the HTML <head> section.
<link rel="icon" href="favicon.ico" type="image/x-icon">This tells the browser where to find the website’s favicon.
To understand where the favicon link belongs, read our HTML Head tutorial.
HTML Favicon Syntax
The basic syntax for adding a favicon is:
<link rel="icon" href="favicon.png" type="image/png">Here is what each attribute means:
rel="icon"identifies the resource as a favicon.href="favicon.png"specifies the path to the image.type="image/png"indicates the image’s media type.
The href value can be a relative path or an absolute URL. Make sure the file exists and is accessible to the browser.
How to Add a Favicon to an HTML Website
Follow these steps to add a favicon to your webpage.
Prepare Your Favicon Image
Create a small icon that represents your website. Common formats include ICO, PNG, and SVG, although support and recommendations can vary by browser and use case.
For example, place a file named favicon.png in your website’s root directory.
Add the Favicon Link to the Head
Insert the favicon link inside the <head> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="icon" type="image/png" href="/favicon.png">
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>In this example, /favicon.png refers to a file at the website’s root path.
If your favicon is stored in an images folder, use a path such as /images/favicon.png instead.
Common Favicon Image Formats
Different image formats can be used for favicons.
| Format | Description |
|---|---|
| ICO | A traditional favicon format with broad browser support |
| PNG | Supports transparency and is widely supported |
| SVG | Supports scalable vector graphics in modern browsers |
| GIF | Can be used in some contexts, but is less common for favicons |
For many websites, PNG or ICO is a simple and practical choice. SVG can be useful when you want a sharp icon at different sizes and your target browsers support it.
Using Multiple Favicon Sizes
You can provide multiple favicon files for different browser and device requirements.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">The browser chooses an appropriate resource based on its capabilities and requirements. The sizes attribute describes the dimensions of an icon when applicable.
Some devices and platforms also use separate touch icons or web app icons. Those may require additional markup or manifest configuration.
Why Is My Favicon Not Showing?
If your favicon does not appear, check the following:
- Incorrect file path: Confirm that the favicon URL points to the correct file.
- Unsupported format: Use a format supported by your target browsers.
- Browser cache: Browsers may continue displaying an older favicon. Try a hard refresh or clear the relevant cache.
- Invalid image: Check that the image file is valid and loads correctly.
- Missing link element: Confirm that the favicon link is inside the document’s
<head>section.
You can also open the favicon URL directly in your browser to confirm that the file is accessible.
Best Practices for HTML Favicons
- Use a simple, recognizable design.
- Choose an icon that matches your website’s branding.
- Ensure the icon remains clear at small sizes.
- Use valid image files and correct paths.
- Provide suitable formats and sizes for the browsers and devices you support.
- Test the favicon after publishing your website.
Frequently Asked Questions
Is a favicon required for an HTML website?
No. A webpage can work without one, but a favicon helps users identify the website in browser interfaces.
Where should I put the favicon link?
Place the <link rel="icon"> element inside the HTML <head> section.
Can I use a PNG image as a favicon?
Yes. PNG is widely supported and is a common choice for website favicons.
Does a favicon improve SEO rankings?
A favicon is not a direct ranking factor. However, a recognizable favicon may improve brand recognition and the appearance of your site in supported browser or search interfaces.
Can I use an SVG favicon?
Yes. Modern browsers support SVG favicons, although you should consider compatibility with your target browsers and provide a suitable fallback when necessary.