Previous
Written by: rJTutorial Team | Last Updated:

HTML Favicon

A favicon (short for "favorite icon") is a small but essential visual identifier for your website. It typically appears in the browser's address bar, on browser tabs, within bookmarks, and even on mobile home screens when a user saves your site. While small, it plays a massive role in branding and user experience, helping users quickly identify your site among dozens of open tabs.

Developer Tip: A favicon isn't just for desktop browsers. High-quality icons are also used by operating systems when users pin your site to their taskbar or mobile home screen, making your web app feel like a native application.

To add a favicon to your HTML document, you use the <link> element. This tag must be placed inside the <head> section of your HTML code. By defining it here, the browser can load the icon before the rest of the page content renders.

Here is a standard example of how to implement a favicon using a modern PNG file:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My Professional Site</title>
 
 <!-- This line adds the favicon -->
 <link rel="icon" type="image/png" href="/assets/img/favicon.png">
</head>
<body>
 <h1>Hello, World!</h1>
 <p>Look at the browser tab to see the favicon in action.</p>
</body>
</html>
Best Practice: Always place your favicon link near the top of the <head> section. This ensures the browser identifies and fetches the icon as early as possible during the page load process.


In this example, we use several attributes to tell the browser how to handle the icon:

  • rel="icon": This attribute tells the browser the relationship between the current document and the linked file. In this case, it's the site's icon.
  • type="image/png": This defines the MIME type of the file. While .png is popular for high-quality icons, you might also use image/x-icon for legacy .ico files or image/svg+xml for modern scalable icons.
  • href="/favicon.png": This is the URL path to your image file. It can be a relative path (like images/favicon.png) or an absolute path (starting with / or https://).
Common Mistake: Beginners often forget that file paths are case-sensitive on most web servers. If your file is named Favicon.png but your code says favicon.png, the icon will fail to load on Linux-based hosting environments.

Choosing the Right File Format

In the early days of the web, you had to use the .ico format. Today, developers have more flexibility:

  • ICO: Great for backward compatibility with older versions of Internet Explorer. It can contain multiple sizes in one file.
  • PNG: The modern standard. It supports transparency and provides a much better file size-to-quality ratio.
  • SVG: The "future-proof" choice. SVG icons are tiny in file size and look perfectly sharp at any resolution or zoom level.
Watch Out: If your icon has a transparent background, ensure it looks good on both light and dark browser themes. An all-black icon will "disappear" if a user is using a dark-mode browser tab.

Standard Sizes for Favicons

You can create a favicon using design tools like Figma, Adobe Illustrator, or free online generators. While browsers will often scale down large images, it is more efficient to provide the correct sizes to save bandwidth:

  • 16x16: The standard size for browser tabs.
  • 32x32: Used for desktop shortcuts and taskbars.
  • 180x180: The standard for Apple touch icons (used when someone saves your site to an iPhone home screen).
Developer Tip: If you update your favicon but don't see the changes, it’s likely a caching issue. Browsers cache favicons aggressively. To force an update during development, you can add a version query to the filename, like this: href="favicon.png?v=2".

By including a high-quality favicon, you give your website a finished, professional look that helps build trust with your users immediately.

Previous