How to Set Up a Proper Favicon for All Platforms and Browsers

To ensure your favicon displays correctly across every browser and device, provide a fallback favicon.ico at the site root, add modern PNG and SVG icons via <link> tags, and include platform-specific markup for Apple and Windows devices.

Setting up a proper favicon requires more than a single image file. According to the thedaviddias/Front-End-Checklist repository, comprehensive favicon implementation demands specific file formats, strategic placement, and platform-specific declarations to guarantee compatibility from legacy Internet Explorer to modern mobile browsers.

The Root-Level favicon.ico for Legacy Browsers

Legacy browsers, particularly Internet Explorer, only recognize the classic .ico file format when placed at the site root. As documented in [README.md](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L110-L113) lines 110–113, you should place favicon.ico at the root of your site.

While modern browsers can locate this file automatically, explicitly linking to it ensures compatibility:

<!-- Place favicon.ico in the site root for legacy browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

Modern PNG and SVG Favicon Formats

Contemporary browsers support superior formats that offer better compression and scalability. The Front-End Checklist recommends PNG for broad compatibility and SVG for high-DPI displays.

According to [README.md](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L119-L120) lines 119–120, use a 32×32 pixel PNG as your primary modern favicon:

<!-- Modern PNG favicon (32×32 px recommended) -->
<link rel="icon" type="image/png" href="/favicon.png">

For crisp scaling on high-resolution screens, implement an SVG favicon as suggested in lines 121–122:

<!-- Scalable SVG favicon for high‑DPI displays -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Platform-Specific Favicon Requirements

Different operating systems and browsers expect distinct icon formats and markup declarations.

Apple Touch Icons

iOS devices use touch icons when users add your site to their home screen. Provide at least a 200×200 pixel PNG file:

<!-- Apple Touch Icon (at least 200×200 px) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Windows Tile Configuration

Windows 8 and 10 use a dedicated XML configuration file for pinned site tiles. Reference browserconfig.xml in your markup:

<!-- Windows tile configuration (browserconfig.xml) -->
<meta name="msapplication-config" content="/browserconfig.xml">

Automated Favicon Generation Tools

Manually creating every required size and format is error-prone. The Front-End Checklist recommends automated generators to produce complete favicon packages.

As listed in [README.md](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L126) line 126 and line 127, these tools generate ICO, PNGs, SVG, Apple touch icons, and browserconfig.xml:

• RealFaviconGenerator – Creates comprehensive favicon packages with platform-specific optimizations
• Favicon-Generator.org – Produces standard icon sets required for cross-browser compatibility

These generators typically output markup similar to:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-config" content="/browserconfig.xml">

Summary

• Place favicon.ico at the site root to support legacy browsers like Internet Explorer, as required by the Front-End Checklist specifications in README.md lines 110–113
• Implement PNG and SVG variants using <link> tags for modern browsers, with 32×32 pixel PNG as the baseline format
• Include platform-specific markup for Apple Touch Icons and Windows Tiles to ensure proper display on iOS home screens and Windows pinned sites
• Use automated generators like RealFaviconGenerator to create the complete icon set without manual sizing errors

Frequently Asked Questions

Do I still need a favicon.ico file in 2024?

Yes. While modern browsers support PNG and SVG formats, Internet Explorer and some legacy systems only recognize .ico files placed at the site root. The thedaviddias/Front-End-Checklist explicitly recommends maintaining this fallback in README.md lines 110–113 to ensure universal compatibility.

What is the best favicon size for modern browsers?

The Front-End Checklist recommends a 32×32 pixel PNG as the standard modern favicon size, documented in README.md lines 119–120. For high-DPI displays, supplement this with an SVG favicon that scales infinitely without quality loss.

How do I create favicons for dark mode browsers?

Use the SVG format with CSS media queries embedded in the SVG itself, or provide separate icon files with media attributes in your <link> tags. Automated tools like RealFaviconGenerator can generate dark-mode variants that adapt to system preferences.

Should I place favicon files in the root directory or a subfolder?

Always place favicon.ico at the site root for legacy browser compatibility. However, other formats (PNG, SVG, Apple Touch Icons) can reside in subdirectories like /images/ or /assets/ as long as your <link> and <meta> tags reference the correct paths. The Front-End Checklist emphasizes that the .ico file specifically must be root-accessible.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}