App Icons vs Favicons: ICO vs PNG and What Each Platform Expects

Icons are everywhere in modern software, from the tiny image in a browser tab to the large square on a phone's home screen. Despite looking similar on the surface, these icons serve different purposes, follow different format rules, and get displayed in very different contexts. Mixing them up or using the wrong format leads to blurry tabs, missing bookmark icons, or app store rejections.

The two most common categories are favicons and app icons. A favicon (short for "favorite icon") is the small image that appears in browser tabs, bookmark lists, and browser history. An app icon is the image that represents a native application on a desktop or mobile operating system. Both start as image files, but they differ in format requirements, size expectations, and how the platform discovers and uses them.

This article explains what each type of icon is, when you should use the ICO format versus PNG, and what the major platforms actually expect. Whether you are building a website, packaging a desktop application, or shipping a mobile app, you will know exactly which format and sizes to provide.

What Is a Favicon?

A favicon is the icon a web browser displays alongside your website. You see it in the browser tab next to the page title, in your list of bookmarks, in browser history, and in some cases in the address bar or search results. The term comes from Internet Explorer's original implementation, which looked for a file named favicon.ico in the root directory of every website.

Historically, favicons had to be in the ICO format. Internet Explorer required it, and there was no alternative. The ICO format's ability to embed multiple sizes in a single file made it a practical choice: one file could serve the 16x16 image for the tab and the 32x32 image for the bookmark bar. Modern browsers (Chrome, Firefox, Safari, Edge) now also accept PNG favicons specified via a <link> tag in the page HTML, but they still fall back to /favicon.ico if no explicit link tag is present.

For maximum compatibility across all browsers, including older versions and crawlers, providing a favicon.ico file at your website root is still the safest approach. This ICO file should contain at least 16x16 and 32x32 sizes. Many developers also include 48x48 for high-DPI browser tabs. You can supplement this with PNG link tags for platforms that prefer them, but the ICO file acts as your safety net.

What Is an App Icon?

An app icon represents a native application within an operating system's interface. On Windows, it appears on the desktop, in the taskbar, in the Start menu, and in the ALT+TAB switcher. On macOS, it shows up in the Dock, Launchpad, and Finder. On iOS and Android, it occupies a spot on the home screen and in the app drawer. Each platform has its own format requirements and size specifications.

Windows uses the ICO format for application icons. A Windows executable (.exe) embeds an ICO resource that the operating system reads and displays. This ICO should contain layers at 16, 32, 48, 64, 128, and 256 pixels to cover every display context and DPI scaling level. Shortcuts (.lnk files) can also reference external ICO files.

macOS uses the ICNS format, which is Apple's proprietary multi-resolution icon container. ICNS files can contain sizes up to 1024x1024 pixels. The source images are typically PNGs that get compiled into the ICNS bundle during the build process.

iOS requires PNG images at specific sizes (60x60 at 2x and 3x, plus variations for iPad, Spotlight, and Settings). Apple does not use ICO or ICNS for iOS app icons. The images are included in the app bundle's asset catalog as plain PNGs.

Android also uses PNG, typically provided as adaptive icon layers (foreground and background) at multiple densities (mdpi through xxxhdpi). The Play Store icon is a 512x512 PNG.

Web apps (PWA) use PNG icons referenced in a manifest.json file. Common sizes are 192x192 and 512x512. These icons appear on the home screen when a user installs the PWA.

Practical Advice and Common Mistakes

Getting icons right across platforms requires attention to a few details that are easy to overlook. Here are the mistakes developers make most often, along with straightforward fixes.

Relying on a single PNG for everything: A single 512x512 PNG will work for some contexts but fail for others. Browsers that look for /favicon.ico will not find it. Windows executables cannot embed a PNG as their icon resource. Always generate a dedicated ICO file for favicon and Windows use cases, even if PNG is your primary source format.

Using only one size in the ICO file: A 32x32-only ICO file looks fine in a browser tab but becomes a blurry blob in Windows Explorer's large icon view. Always include multiple sizes. The full set (16 through 256) ensures every display context has a pixel-perfect layer to draw from.

Forgetting high-DPI and Retina displays: Modern screens pack two to three times the pixels of standard displays. A 16x16 favicon that looks fine on a 1080p monitor appears tiny and soft on a Retina display. Include a 32x32 layer (which browsers use at 2x scaling for the 16px tab slot) and a 48x48 layer for 3x scaling or high-DPI tabs.

Not testing across platforms: An icon that looks perfect on your development machine may look completely different on another OS or browser. Test your favicon in at least Chrome, Firefox, Safari, and Edge. If you are building a desktop app, test the ICO on Windows at 100%, 150%, and 200% DPI scaling. A few minutes of testing saves hours of user complaints.

For a deeper look at the ICO format and its structure, or for help creating favicons specifically, see our favicon creation guide.