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

> Learn how to set up a proper favicon for all browsers and platforms. Ensure consistent display with modern icon formats and platform-specific markup for Apple and Windows.

- Repository: [David Dias/Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist)
- Tags: how-to-guide
- Published: 2026-03-02

---

**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)](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:

```html
<!-- 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)](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:

```html
<!-- 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:

```html
<!-- 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:

```html
<!-- 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`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/browserconfig.xml) in your markup:

```html
<!-- 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)](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L126) line 126 and [line 127](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md#L127), these tools generate ICO, PNGs, SVG, Apple touch icons, and [`browserconfig.xml`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/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:

```html
<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`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/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`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/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`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/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.