← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 1 of 26

HTML Favicon

When you have fifty different browser tabs open at the same time, you do not read the titles on each tab to find the page you want. Instead, you look for those tiny, distinctive logos next to the text. That little image is called a favicon. A favicon is like a miniature billboard for your website's brand identity. It displays in browser tabs, bookmarks, browser history, and even search engine results, making your site instantly recognizable. Without a favicon, browsers will display a generic, boring blank document icon, which makes your professional website look incomplete and untrustworthy.

In this page:

  1. What is a Favicon?
  2. Favicon File Formats (ICO vs. PNG vs. SVG)
  3. Adding a Favicon to Your HTML
  4. Apple Touch Icons for Mobile Devices
  5. Managing Favicon Caching Issues
  6. Favicon Icons in the PWA Manifest

What is a Favicon?

A favicon (short for 'favorite icon') is a tiny graphic associated with a specific webpage or website. It acts as a visual anchor that represents your brand across the browser interface.

Note: Keep your favicon design extremely simple because it will be scaled down to a tiny 16x16 pixel square.

Warning: Failing to supply a favicon can result in annoying 404 error logs on your server as browsers search for it automatically.

Example: What is a Favicon?

markup 
<!-- Favicon: the small icon shown in the browser tab -->

Favicon File Formats (ICO vs. PNG vs. SVG)

In the early days of the web, favicons had to be saved in the Microsoft ICO format. Today, modern browsers support PNG and scalable vector SVG formats, allowing for much sharper, translucent, and even responsive icons.

Note: Use PNG for standard modern layouts and provide a legacy ICO fallback for older browsers.

Warning: Do not simply rename a PNG file to .ico because the browser will fail to parse the invalid container.

Example: Favicon File Formats (ICO vs. PNG vs. SVG)

markup 
<!-- favicon.ico, favicon.png, favicon.svg -->

Adding a Favicon to Your HTML

To add a favicon, you insert a special link tag inside the head section of your HTML document. The link tag requires a rel attribute set to icon and an href attribute pointing to your image path.

Note: Always write your favicon link tags inside the head section, ideally right after the title tag.

Warning: Make sure your link tag is not mistakenly placed inside the body section, as the browser will ignore it.

Example: Adding a Favicon to Your HTML

markup 
<head>
  <title>My Page</title>
  <link rel="icon" href="favicon.png">
</head>

Apple Touch Icons for Mobile Devices

When mobile users bookmark your website or add it directly to their smartphone home screen, standard favicons often look blurry. Apple introduced the apple-touch-icon format to supply high-quality home screen web clips.

Note: Create a 180x180 pixel PNG with a solid background for the ultimate apple-touch-icon layout.

Warning: Unlike standard favicons, mobile home screen icons should not contain transparency, or they might display with black background distortions.

Example: Apple Touch Icons for Mobile Devices

markup 
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Managing Favicon Caching Issues

Web browsers cache favicons aggressively to save network data. This means that if you update your website logo icon, users might continue to see the old version for weeks unless you force a browser refresh.

Note: Use query parameters on your file paths to force browsers to pull the newly updated favicon.

Warning: Simply uploading a new image with the same name will not instantly clear cached icons for returning visitors.

Example: Managing Favicon Caching Issues

markup 
<link rel="icon" href="favicon.png?v=2">

Favicon Icons in the PWA Manifest

When a site is installed as a Progressive Web App, the icons shown on a phone's home screen come from the icons array inside manifest.json, not directly from the favicon link tags in the HTML head. These manifest icons are usually much larger than a typical favicon, since they need to look sharp as a full home screen app icon.

Note: Provide at least a 192x192 and a 512x512 icon in your manifest — these two sizes cover the vast majority of installed PWA home screen requirements.

Warning: Reusing your tiny 16x16 favicon file as the only manifest icon will look badly pixelated once it is displayed as a full-size home screen app icon.

Example: Favicon Icons in the PWA Manifest

markup 
<link rel="manifest" href="manifest.json">
<!-- manifest.json icons array includes 192x192 and 512x512 sizes -->
Common Mistakes
  1. Placing the favicon link tag inside the body tag instead of the head section.
  2. Changing a standard image filename extension to .ico on your desktop without converting the file structure.
  3. Neglecting mobile bookmark configurations, causing home screen web clips to look low-resolution and pixelated.
Chapter Summary
  • A favicon is a brand-identifying graphic displayed on tabs, bookmark menus, and search indexing rows.
  • Insert the link tag with the rel="icon" attribute inside the head container to declare your icon.
  • Supply standard modern formats like PNG or SVG, alongside apple-touch-icons for mobile bookmark layouts.
Browser Support

Standard favicon formats are universally supported by all desktop, mobile, and legacy browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Quotations Next Lesson → HTML Page Title

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.