How to Add Favicon in HTML
An HTML favicon, short for “favorite icon,” is a small image displayed next to the page title in a web browser’s tab or address bar. It also appears in the bookmarks and history of the browser.
A favicon icon is commonly used as a representation of a whole website. Therefore, many web designers use it to give their sites distinguish looks.
Favicons help users quickly identify a website visually. They are typically 16×16, 32×32, or 48×48 pixels in size and are usually saved as .ico, .png, .gif, or .svg files.
How to Add a Favicon in HTML?
The browser’s address bar or tab displays a favicon image to the left of the page title, like this:
To add a favicon in HTML or to a website, you first need to create the image you want to use as a favicon. A favicon is a small image in the icon format, so it should be a simple image with high contrast so that it remains clear and recognizable for your brand even at small sizes.
Once you have your image ready, it is time to add a favicon to your website. You can do it either by saving your favicon image to the root directory of your web server, or by creating a subfolder named ‘images’ in the root directory and save your favicon image in this folder. A common name for a favicon image file is “favicon.ico”.
For a favicon located in the root directory:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
For a favicon located in images or icons folder:
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
You place the following <link> tag just after the <title> tag in the <head> section of your HTML document to link to the favicon file like this:
<!DOCTYPE html>
<html>
<head>
<title>HTML Favicon Example</title>
<!-- Link to a favicon file-->
<link rel="icon" href="path_to_favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample page with a favicon.</p>
</body>
</html>
In the above code, you will have to replace the “path_to_favicon.ico” with the actual path of your favicon file. Now, you save your “index.html” file after adding the favicon link in the above HTML code and reload it in your web browser to see changes. The favicon should appear in the browser tab to the left of the page title, which is the typical location for a favicon icon.
Favicon File Format Support
The “.ico” is the most commonly supported file format for favicon in HTML. It can also contain multiple sizes within the same file. However, we can also use PNG or SVG format like this:
Example: Using a PNG Favicon
<link rel="icon" href="path_to_favicon.png" type="image/png">
Example: Using a SVG Favicon
<link rel="icon" href="path_to_favicon.svg" type="image/svg+xml">
Modern web applications often define multiple sizes of favicons for different devices, such as tablets, phones. You can specify different sizes like this:
Example:
<link rel="icon" sizes="16x16" href="path/to/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="path/to/favicon-32x32.png">
<link rel="icon" sizes="96x96" href="path/to/favicon-96x96.png">
The following below table shows the file format supported by an HTML favicon icon or image:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
In this tutorial, we have explained how to add a favicon to an HTML document or website. Adding a favicon enhances the website’s branding. It appears in browser tabs, bookmarks, and browsing history, helping users quickly identify and navigate to your pages. We hope you have gained a clear understanding of how to link a favicon to your website.
Happy coding!!!
