Understanding favicon elements

Why You Should Trust This Guide

This page lists the icons you need to implement your favicon correctly. But there are so many resources online that claim the same, each often listing different icons.

So, what makes this one reliable? It's not just a compilation of older articles, merged into a single comprehensive resource. It's the result of many tests, some of which are published as part of RealFaviconGenerator's compatibility results. Anyone can also test RealFaviconGenerator’s favicon through the compatibility test.

favicon.ico

The favicon.ico is the oldest and most classic favicon asset. But how useful is it?

The ICO format is unique: it can contain multiple images of different sizes, allowing user agents to select the version that best fits their needs. The downside is that the entire ICO file, with all its packed images, must be downloaded before any particular image can be used.

Microsoft has long specified that favicon.ico should contain images at 16x16, 32x32, and 48x48. But how relevant is it today? Modern browsers support PNG, a more compact, standard, and convenient format.

However, there is one concrete use case for favicon.ico: PDF files. Browsers discover favicons via HTML markup, which doesn’t work for non-HTML documents like PDFs. When visiting a PDF, say https://example.com/somedoc.pdf, the browser has no way to find the site’s favicon through HTML markup.

This is where favicon.ico is handy. Browsers have an old convention of looking for /favicon.ico (at the root of the site) regardless of HTML declarations. While this is usually unnecessary, it allows browsers to display a favicon even for non-HTML documents.

Other than this specific purpose, favicon.ico doesn’t seem essential anymore. RealFaviconGenerator is still researching if it can be fully replaced with PNG and SVG icons.

PNG Favicon

The PNG format was the default favicon format for many years. However, with broad support for SVG favicons, PNGs are less essential today.

A single PNG size is sufficient: 96x96, which meets Google’s requirements for favicon display in search results.

SVG Favicon

The SVG favicon is now popular in desktop browsers, with widespread support. When available, browsers will typically use the SVG favicon over other formats.

The SVG favicon allows you to create icons for light and dark themes. However, the dark theme icon is somewhat limited: for instance, in Windows Chrome, it only appears when the operating system theme is set to dark. Chrome’s Incognito mode, which is kind of dark, doesn’t trigger the dark theme SVG.

Apple Touch Icon

Apple originally specified various sizes for the Touch icon:

  • 57x57
  • 60x60
  • 72x72
  • 76x76
  • 114x114
  • 120x120
  • 144x144
  • 152x152
  • 180x180

RealFaviconGenerator helped make this list popular years ago, and some articles still recommend these sizes. However, since iOS 8 (now 10 years old), a single 180x180 icon is sufficient.

Previously, a “precomposed” Touch icon existed to prevent iOS from cropping the icon’s corners. This feature was phased out in iOS 7 or 8.

Despite being a PNG, the Touch icon doesn’t support transparency; iOS adds a black background, which affects the appearance of a transparent icon.

In short: submit a single, opaque 180x180 Touch icon.

Web App Manifest

The Web App Manifest is used by Android Chrome and other Chromium-based browsers, making it an essential component for favicons. If not provided, Chrome likely uses the Touch icon as a fallback. However, the Touch icon has rounded corners, whereas Android typically crops icons into circles. For this reason, many developers use different designs for iOS and Android, and the "Touch icon for everyone" strategy is not that great.

Android Chrome expects two icons in the Web App Manifest: 192x192 and 512x512. Chrome uses the 512x512 for the "Add to Home Screen" feature, while the purpose of the 192x192 icon needs further investigation.

Conclusion

Creating a favicon is more complicated than it seems and requires careful research to get it right.

That’s the goal of RealFaviconGenerator: to create the perfect favicon for you so you don’t have to worry about all these details.