01-htmlTermsLevel_08Favicon

Favicon

Favicon

Level 8 — Metadata, SEO & Head A small icon associated with a website, displayed in the browser tab next to the page title, bookmark listings, browser history panels, and as home screen icons on mobile devices.

1. Prerequisites

  • <link> — The tag used to connect external assets.
  • <head> — The metadata head container.

2. Term Category

Metadata (Universal Browser Support .): Favicon is a fundamental concept in this technology stack. Level 8 — Metadata, SEO & Head

3. Explanation

(1) Design Motivation — "Why did we design this?"

Sighted users often browse the web with dozens of tabs open at the same time. As the tabs get smaller, the text titles collapse, making it impossible to read them.

To help users visually identify websites at a glance, Microsoft introduced Favicons (short for "favorite icon") in Internet Explorer 5.

A favicon is a tiny graphic symbol that represents your brand. By defining a favicon in your HTML, you ensure that your website displays a clear icon in:

  • Browser tabs
  • Bookmark menus
  • Browser history pages
  • Mobile search results snippets
  • Add-to-Home-Screen launchers on phones

(2) Declaring a Favicon

To declare a favicon, you place a <link> tag inside the <head> of your HTML document:

<link rel="icon" type="image/png" href="/images/logo.png">

(3) Modern Formats

In the early days, browsers only supported a proprietary Microsoft format called .ico (which stored multiple resolutions in one file). Today, browsers support modern web image formats:

  • PNG (image/png): The standard modern choice. Supports transparency and high resolutions.
  • SVG (image/svg+xml): The modern vector standard. Scalable to any size without losing crispness, and can adapt to dark/light browser themes!
  • ICO (image/x-icon): Kept as a legacy fallback for older browsers.

(4) The Root Directory Fallback

If you do not include a <link rel="icon"> tag in your HTML, the browser will automatically make a background request to the root of your web server looking for a file named exactly: https://example.com/favicon.ico

If that file exists, the browser will load it as the icon automatically. However, relying on this fallback is discouraged because it doesn't support modern PNG or SVG graphics.

(5) Code Examples

Short Snippet

Basic favicon reference:

<head>
  <link rel="icon" type="image/png" href="favicon.png">
</head>

Fuller Example

A robust configuration supporting legacy browsers, modern high-res screens, and dark-mode vectors:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Favicon Configuration</title>

  <!-- 1. SVG format: scalable and supports dark/light mode browser changes -->
  <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">

  <!-- 2. PNG format: fallback for browsers that do not support SVG icons -->
  <link rel="icon" type="image/png" href="/assets/logo-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/assets/logo-16x16.png" sizes="16x16">

  <!-- 3. Apple Touch Icon: used when a user adds the site to their iPhone home screen -->
  <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">

  <!-- 4. Legacy ICO format: fallback for Internet Explorer -->
  <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
  
</head>
<body>
  <h1>Welcome to my branded site</h1>
</body>
</html>

4. Common Mistakes & Pitfalls

Mistake 1: Setting the wrong MIME type

The mistake: Linking to a PNG file but writing type="image/x-icon":

<!-- BAD: Browser might fail to decode the icon! -->
<link rel="icon" type="image/x-icon" href="icon.png">

Why it's wrong: The browser uses the type attribute (the MIME type) to determine how to decode the image file. If the file is a PNG, but you tell the browser it is a legacy Microsoft ICO, the decoding will fail, and the tab icon will remain blank.

Mistake 2: Using Only Legacy .ico Format Without Modern PNG/SVG Favicons

The mistake: Providing only a low-resolution 16x16 favicon.ico for modern high-DPI displays.

Why it's wrong: Modern smartphones, tablets, and desktop browsers require high-resolution PNG, SVG, or Apple Touch Icons for home screen bookmarks.

Incorrect:

<link rel="icon" href="favicon.ico"> <!-- ❌ Low-res icon on retina displays -->

Fix:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The mistake: Writing <link rel="icon" href="icon.svg"> without type="image/svg+xml".

Why it's wrong: Without explicit type mime attributes, browsers must download file headers to determine format compatibility.

Incorrect:

<link rel="icon" href="icon.png"> <!-- Missing type attribute -->

Fix:

<link rel="icon" href="icon.png" type="image/png">

5. Practice Exercises

Exercise 1: Modern Multi-Resolution Favicon Configuration

Scenario: An author configures site icons using <link rel="icon"> for PNG and ICO formats.

Requirements:

  1. Add <link rel="icon" type="image/png" sizes="32x32" href="...">.
  2. Add standard ICO fallback.
Answer

Implementation

<head>
  <meta charset="utf-8">
  <title>Acme Portal</title>
  <!-- Standard Favicon ICO -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  <!-- High-Res PNG Favicon -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
</head>

Technical Explanation

  1. The <link rel="icon"> Tag: Specifies site icons displayed on browser tabs, bookmarks, and mobile home screens.
  2. The sizes Attribute: Defines icon pixel dimensions (32x32, 16x16, any).
  3. Root favicon.ico Fallback: Placing favicon.ico at domain root satisfies legacy browsers automatically.

Exercise 2: SVG Vector Favicon for Automatic Dark Mode Adaptation

Scenario: Embeds a scalable SVG favicon supporting CSS dark mode media queries.

Requirements:

  1. Link SVG icon via <link rel="icon" type="image/svg+xml" href="favicon.svg">.
Answer

Implementation

<head>
  <meta charset="utf-8">
  <title>Modern Vector Favicon</title>
  <!-- SVG Vector Favicon supporting dark mode -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>

Technical Explanation

  1. SVG Favicon Support: SVG icons scale infinitely to any screen resolution without pixelation.
  2. Dark Mode Adaptation: CSS inside favicon.svg (@media (prefers-color-scheme: dark)) changes icon color automatically.
  3. File Size Efficiency: Single lightweight vector file replaces multiple PNG raster sizes.

Exercise 3: Apple Touch Icon & Web App Manifest Link Integration

Scenario: Configures iOS home screen icons and Web App Manifest links.

Requirements:

  1. Add <link rel="apple-touch-icon" href="...">.
  2. Add <link rel="manifest" href="...">.
Answer

Implementation

<head>
  <meta charset="utf-8">
  <title>PWA Ready Web App</title>
  <!-- Apple Touch Icon for iOS Home Screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- Web App Manifest for PWA installation -->
  <link rel="manifest" href="/site.webmanifest">
</head>

Technical Explanation

  1. Apple Touch Icon: 180x180 PNG icon used when users add website to iOS home screen.
  2. Web App Manifest: JSON file declaring PWA theme colors, app name, and launcher icons.
  3. Mobile Bookmark Branding: Provides app-like launcher icons across Android and iOS.

7. Key Takeaways

  • A favicon is the logo displaying next to titles in browser tabs and bookmarks.
  • Implement it using <link rel="icon"> nested in the <head>.
  • Modern formats include PNG and vector SVG.
  • If no link is set, browsers automatically search the server root for favicon.ico.
  • Ensure the type attribute matches the actual image file format.

Links to this page:

  1. <link
  2. Open Graph Tags (og:)
Built with LogoFlowershow