Favicons in 2025: Standards, Formats & Best Practices

In 2025, the favicon is no longer just a graphic gimmick, it’s a key element of a website’s visual identity. It appears in the browser tab, bookmarks, and Google search results. This guide is for webmasters, frontend developers, and site creators who want to manage their favicons in a modern way, without multiplying file formats unnecessarily.

I. Evolution of Favicons: From .ico to .svg

Favicons were long just simple favicon.ico files placed at the root of a website. These small 16x16 pixel squares appeared in browser tabs and bookmarks. But as the web, screens, and browsers evolved, this single format began to show its limitations.

1. The .ico Era (1999–2015)

The feature was introduced by Internet Explorer 5, which automatically looked for a file named favicon.ico at the root of the site. Although never formally standardized, the practice was gradually adopted by all major graphical browsers. The .ico format offered some advantages:

• Only format recognized by Internet Explorer and early versions of Firefox/Chrome.
• Can contain multiple sizes in a single file (16x16, 32x32, 48x48).
• Implicitly read by browsers (even without a <link> tag).

But it also came with a number of disadvantages:

• Windows-proprietary format.
• Limited or poorly handled transparency depending on the browser.
• Heavy file size, not easily compressed.
• Not vector-based: blurry on Retina or high-resolution displays.

2. Embracing Modern Formats (2015–Today)

Starting in 2015, with the gradual decline of Internet Explorer and the growing adoption of Chrome, Firefox, and Safari, browsers began to offer better support for modern formats like .png and, later, .svg. Web developers gained more flexibility and were finally able to move away from the .ico format without sacrificing compatibility.

The .png format quickly became a favorite due to several key advantages:

• Natively supported by all modern browsers (desktop and mobile).
• Full transparency (alpha channel) for clean, crisp icons.
• More efficient compression than .ico.

The .svg format, although adopted more gradually, has since earned its place among recent browsers:

• Vector format, rendering perfectly sharp icons at any screen resolution.
• Extremely lightweight and can be styled with CSS or JavaScript.
• Supported by Chrome, Firefox, Edge, and gradually by Safari (with some limitations on iOS).

A common practice is to use multiple <link rel="icon"> tags to cover all use cases and ensure maximum compatibility. This often results in declarations like:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">

Or a variation combining .ico and .svg:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

These approaches aim to anticipate differences in browser behavior while preparing for the adoption of modern formats.

This period marks a shift toward a more flexible, lightweight, and efficient favicon strategy, laying the groundwork for the modern practices still applied in 2025.

II. Which Favicon Formats in 2025? Benefits and Recommendations

In 2025, managing favicons has become significantly simpler. Thanks to advances in modern browsers, it is now possible to move away from outdated formats like .ico in favor of formats better suited to today’s needs: scalability, lightness, mobile compatibility, and accessibility.

1. Why Stop Using .ico?

While still functional, the .ico format is now considered obsolete for most modern use cases.

Unless you're working with legacy systems (old intranets, outdated browsers), there’s no longer a reason to include a .ico file in a modern project.

2. SVG Format: The Modern Choice

The .svg format is now the preferred choice for modern favicons. It delivers crisp rendering at any zoom level or screen resolution and can be styled using CSS.

• Scalable: automatically adapts to any size without loss of quality.
• Lightweight: a .svg file is typically smaller than its .png or .ico equivalent.
• Compatible with all modern browsers (Chrome, Firefox, Edge, Android).

However, note that Safari, especially on iOS, still has partial support for .svg favicons in certain contexts (home screen, sharing, etc.). Hence the need for a fallback.

3. 48×48 .png Fallback: Guaranteed Compatibility

To ensure universal support, it is strongly recommended to provide a .png fallback, particularly a square version of 48x48 pixels. This size is recognized by most browsers as the default and also meets Google’s requirements for displaying the favicon in search results.

• Supported by Safari, iOS, and search engines like Google.
• Ensures a crisp image in environments where SVG is not supported.
• Large enough to be downscaled to 16x16 or 32x32 by browsers.

PNG is therefore an essential complement to SVG, covering all use cases without bloating the project.

On iOS, .png files are also used for home screen icons via the <link rel="apple-touch-icon"> tag. While not strictly favicons, they are often confused with them, hence the importance of having a well-designed and properly sized icon.

Displaying the Favicon in Google Search Results

The .png format is also key to meeting Google’s requirements for displaying the favicon in search results, especially on mobile. Google recommends a favicon of at least 48x48 pixels, square, readable at small sizes, and hosted on the same domain as the indexed page. The file must be properly declared using the <link rel="icon"> tag in the HTML document head.
Although Google also accepts .ico and .svg formats, a high-quality .png ensures consistent display and avoids unwanted visual fallbacks.
Source: Official Google Search Documentation

III. The Bulletproof Method for 2025

1. HTML Code

In 2025, you no longer need favicon.ico. An SVG icon for modern browsers, along with a 48x48 PNG fallback, covers 99.9% of use cases. Simple, modern, and effective:

<!-- Main favicon for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- PNG fallback for maximum compatibility -->
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">

• rel="icon": declares the default icon
• type="image/svg+xml": specifies the SVG format (preferred)
• sizes="48x48": defines the actual size of the PNG image for browsers that use it

2. Browser Compatibility

3. Best Practices & Common Mistakes

Best practices:

• Provide a well-optimized SVG (square icon with good contrast)
• Test across multiple platforms

What to avoid:

• Adding unnecessary sizes (16x16, 32x32, etc.)
• Using an unreadable SVG (too thin or overly detailed)
• Forgetting to include the type attribute in the <link> tag

4. Bonus: Dark Mode Favicons

In 2025, many operating systems and browsers support dark mode, and websites follow suit by adapting their interfaces. However, few developers think to adapt their favicon as well. Yet, it’s entirely possible to offer a dedicated version for users who have enabled dark mode.

To do this, use the media="(prefers-color-scheme: dark)" attribute in a <link rel="icon"> tag pointing to an alternative favicon version.

<link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">

This approach offers a more cohesive and elegant experience, especially if your default favicon becomes unreadable on dark backgrounds. Simply create a visually adapted version (often with a light background or inverted design) and declare it alongside the default icon.

Note: Be careful not to overload your document with too many favicon declarations, prioritize clarity and always test behavior across different browsers to ensure the correct icon is displayed based on the active theme.

IV. Conclusion

The favicon, often wrongly overlooked, remains in 2025 a key element of a website’s visual identity. It contributes to immediate recognition in tabs, bookmarks, and even Google search results. Thanks to modern browser advancements, there’s no longer any need to multiply formats and sizes as in the past.

A simple combination of an .svg for scalability and a 48×48 .png fallback is now sufficient to cover almost all use cases while reducing code complexity and maintenance.

By adopting this minimalist and reliable approach, you ensure a clean, consistent, and modern appearance for your website, without relying on outdated practices from a bygone era.

In the next article, we’ll dive into Touch Icons for iOS, Adaptive Icons for Android, and the configuration of the manifest.json file for Progressive Web Apps. You’ll learn about recommended formats, home screen dimensions, and best practices for delivering a polished and consistent mobile experience.

Read more: Web Icons in 2025: Touch Icons, Adaptive Icons & manifest.json