-
Hajipur, Bihar, 844101
HTML Favicon
A favicon is the small icon that appears in the browser tab next to the page title. It helps users recognize your website quickly and gives your project a more polished look. Almost every professional website uses a favicon, and adding one to your HTML page is simple once you understand how it works.
In this chapter, you will learn what a favicon is, how to create one, which file formats work best, and how to add it to your webpage using HTML. You will also see examples and common situations where favicon links behave differently across browsers.
What is a Favicon?
A favicon (short for “favorite icon”) is a small image that represents a website. It appears in several places:
-
Browser tab
-
Bookmarks
-
Shortcut icons on desktop or mobile home screen
-
History list
-
Browser address bar (in some browsers)
Favicons are usually square icons, most commonly sized 16x16 or 32x32, although modern browsers support larger sizes too.
When you add a favicon to your website, visitors find it easier to locate your site among many open tabs. It also makes your work look more professional.
Supported Favicon File Formats
Browsers support multiple formats for favicons. Here are the most common ones:
1. ICO (Most Common)
The .ico format is the traditional favicon format. It works on all browsers, including very old versions. A single .ico file can store multiple icon sizes.
Example: favicon.ico
2. PNG (Most Used Today)
PNG icons are crisp and modern. Most websites use a .png favicon because it is easy to create and supports transparency.
Example: favicon.png
3. JPG or JPEG
These are less commonly used because they do not support transparency. Still, browsers accept them.
4. SVG (Scalable Icon)
SVG favicons are sharp at any size. They work well for modern browsers but may not be supported in some older ones.
Example: favicon.svg
Best practice
If you want maximum compatibility, use both:
-
A
.icofile for fallback -
A
.pngor.svgfile for modern browsers
Where to Place Your Favicon File
There are two common approaches:
Approach 1: Put favicon in the root folder
If your file is named exactly favicon.ico and placed in the root directory, many browsers will load it automatically, even if you do not write any HTML code.
/root-folder
index.html
favicon.ico
Approach 2: Put favicon in an images folder
This is a more organized approach. You will need to provide the correct path in the HTML file.
/root-folder
/images
favicon.png
index.html
How to Add a Favicon in HTML
You add a favicon inside the <head> section of your HTML document.
Example: Adding a PNG Favicon
<head>
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
Here:
-
rel="icon"tells the browser that this is the favicon. -
type="image/png"specifies the format. -
hrefsets the file location.
Example: Using an ICO Favicon
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
This works on all browsers.
Example: Using an SVG Favicon
<head>
<link rel="icon" type="image/svg+xml" href="icons/logo.svg">
</head>
SVG favicons look very sharp on high-resolution screens.
Using Multiple Sizes
Some websites provide multiple favicon sizes so browsers can choose the best fit.
<head>
<link rel="icon" type="image/png" sizes="16x16" href="favicons/icon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/icon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicons/icon-48.png">
</head>
This improves clarity on different devices. Mobile screens, in particular, benefit from larger icons.
Why Your Favicon May Not Display
Sometimes the favicon does not appear immediately. This usually happens due to browser caching.
Here are common reasons:
-
Browser cache
Browsers remember old favicons. Clear cache or open in a private window. -
File not found
If the path is wrong, the browser cannot load the file. -
Incorrect file format
Your file may not be saved in the format you think.
For example, exporting a PNG but naming it.ico. -
Missing sizes for iOS or Android
Mobile devices often require higher resolution icons like 180x180 or 192x192. -
No
<head>section link
If you rely only on automatic loading, some browsers may still need the link tag.
Testing Your Favicon
You can test it using these methods:
-
Open your webpage in a private window.
-
Open it in different browsers.
-
Bookmark your page to see if the icon appears.
-
Add the site to your mobile home screen.
-
Use browser developer tools (Network tab) to check whether the favicon file is loading.
Example: Complete HTML Page with a Favicon
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<h1>Welcome</h1>
<p>This page includes a favicon.</p>
</body>
</html>
This is a simple structure showing how the favicon fits into the page.
Recommended Favicon Sizes for a Professional Website
Modern sites use several sizes:
| Device or Browser | Recommended Size |
|---|---|
| Browser tab | 16x16, 32x32 |
| Windows desktop | 32x32, 48x48 |
| iPhone / iPad | 180x180 |
| Android devices | 192x192, 512x512 |
| Progressive Web Apps | 512x512 |
You do not need all of them for a simple project, but knowing these helps when designing a larger website.
Tips for Creating a Good Favicon
-
Keep the design simple.
-
Avoid too many colors or details.
-
Use a transparent background for better results.
-
Use a square canvas to avoid stretching.
-
Check how the icon looks in 16x16 size.
Many online tools can convert images to favicon format if needed.
Summary of HTML Favicon
A favicon is the small square icon that appears in the browser tab, bookmark list, and shortcuts. You can use formats like ICO, PNG, JPG, or SVG, with PNG being the most common today. To add a favicon, place your icon file in your project folder and link it inside the HTML <head> section using the <link rel="icon"> tag. Browsers sometimes cache favicons, so changes may not appear immediately. Using proper sizes and clear file paths ensures the favicon loads properly across all devices.
Practice Questions
Q1. Add a favicon to an HTML page using the .ico file.
Q2. Write code to use a PNG file as a favicon.
Q3. Place a favicon inside a folder and reference it using relative path.
Q4. Use both .ico and .png as favicons in the <head>.
Q5. Apply a favicon hosted at an external URL.
Q6. Add an Apple touch icon for iOS users.
Q7. Test how favicon appears in different browsers.
Q8. Check how to add multiple favicon sizes.
Q9. Remove a favicon and observe browser behavior.
Q10. Create a custom favicon using an online favicon generator and implement it.
