Best Favicon Sizes for Modern Websites (2026 Guide)

What Is a Favicon and Why Size Matters

A favicon is the small square icon that represents your website in a browser tab, bookmark list, or home screen shortcut. It's often the first visual signal someone sees before your page even finishes loading, which makes it a small but meaningful part of how your site looks and feels.

Favicon size matters because a single image rarely works well across every place it appears.

A favicon image sized for a browser tab looks tiny and cramped as an iPhone home screen icon. On the other hand, an image built for a large app icon may look oddly cropped in a browser's address bar. Understanding the different favicon dimensions each platform expects is the difference between a polished, consistent brand presence and an icon that looks slightly off depending on where someone encounters it.

How Browsers Use Different Favicon Sizes

Modern browsers like Chrome never rely on a single favicon size. Chrome typically displays a 16x16 icon in browser tabs and switches to 32x32 on higher-resolution displays. Safari on macOS follows a similar pattern, while Safari on iOS uses an entirely different image, the Apple Touch Icon, when someone adds your site to their home screen. Edge, built on the same underlying engine as Chrome, uses matching sizes, but also pulls from larger dimensions like 48x48 and 64x64 for pinned site shortcuts on Windows.

This is why a favicon setup built from a single image size often looks inconsistent. Each platform selects from whatever sizes you provide, and if you only offer one, every context gets a resized, and often softened, version of that same file.

Favicon vs Website Icon: A Quick Clarification

The terms favicon and website icon are often used interchangeably, and for most everyday purposes, they mean the same thing. Technically, "favicon" originally referred specifically to the classic favicon.ico file used in browser tabs, while "website icon" is a broader term that can include the Apple Touch Icon, Android home screen icons, and Progressive Web App icons as well. In practice, most guides, including this one, use favicon to cover the entire set.

Best Favicon Sizes for Modern Websites

Here's the complete, current reference for favicon dimensions, organized by where each size actually gets used.

If you're only building a minimal set, covering 32x32, 180x180, 192x192, and 512x512 handles the vast majority of real-world use cases across browsers, iOS, and Android.

Browser Tab Favicon Size: 16x16 and 32x32

The classic favicon size of 16x16 pixels is still the baseline most browsers fall back on for a standard tab. However, since most modern displays are high-resolution, a 32x32 version ensures the icon stays sharp instead of looking soft or pixelated when the browser scales up for Retina and similar high-density screens. Both sizes are commonly bundled together inside a single favicon.ico file.

Apple Touch Icon Size: 180x180

When someone adds your website to their iPhone or iPad home screen, iOS uses a dedicated image called the Apple Touch Icon, sized at 180x180 pixels. iOS automatically applies rounded corners to this icon, so the safest approach is designing a full, uncropped square image and letting the system handle the masking, rather than adding your own rounded corners manually.

Android and PWA Favicon Sizes: 192x192 and 512x512

Android home screens and installable Progressive Web Apps rely on two specific favicon dimensions. The 192x192 size serves as the standard home screen icon, while 512x512 is used for splash screens and app listing displays. Both sizes are referenced inside a site.webmanifest file, which tells the browser these icons exist and how they should be used across different contexts.

The Favicon.ico Multi-Size Format

A favicon.ico file isn't a single image, it's a container that bundles multiple resolutions, typically 16x16, 32x32, and 48x48, into one file. The browser reads this file and automatically selects whichever resolution best fits the space it's rendering, whether that's a small tab, a bookmark entry, or a Windows taskbar shortcut. This is part of why favicon.ico remains a reliable fallback format even as newer formats like SVG favicons gain broader browser support.

Favicon Size Examples by Website Platform

The right favicon setup can look slightly different depending on what platform your website runs on. Here's how favicon dimensions typically play out across a few common setups.

WordPress Sites

WordPress handles favicons through the Site Identity settings in the Customizer, where it usually asks for a single square image and automatically generates the smaller sizes needed for browser tabs. The catch is that WordPress's automatic resizing doesn't always produce the sharpest results for every device, especially the Apple Touch Icon. Uploading a pre-sized 512x512 source image, rather than letting WordPress compress a much larger file down, tends to produce cleaner results across all the generated favicon sizes.

Shopify and E-Commerce Platforms

Shopify typically requests a single favicon image through its theme settings, often recommending a minimum size like 32x32, but store owners benefit from providing a larger, high-resolution source image behind the scenes. Since e-commerce sites are frequently viewed on mobile devices and sometimes installed as home screen shortcuts during a return visit, having the full range of favicon dimensions, including 180x180 and 192x192, ready as backup files matters more here than on a simple brochure site.

Custom-Built or Static Websites

Developers building a site from scratch have the most control, and the most responsibility, over favicon size setup. This usually means manually placing each favicon file in the site's root directory and adding the correct link tags in the HTML head section. It's also the setup most likely to be done incorrectly, since there's no platform defaults handling the resizing automatically. Using a favicon generator tool to produce the complete set from one source image removes most of the room for error in this scenario.

Across all three platforms, the underlying favicon dimensions stay the same, what changes is how much manual work is required to get every size generated and correctly linked.

How to Choose the Right Favicon Dimensions

Follow these steps to build a favicon set that covers browsers, mobile devices, and installable apps without guesswork.

1. Start with a large, clean source image. Design at 512x512 pixels or larger, since it's much easier to scale an image down cleanly than to enlarge a small one without losing quality.
2. Keep the design simple. Complex details disappear at small sizes. If you can't recognize the icon at 16x16, simplify the shape before generating smaller versions.
3. Export the core favicon sizes. At minimum, generate 32x32, 180x180, 192x192, and 512x512 versions from your source image.
4. Bundle the small sizes into a favicon.ico file. Combine 16x16, 32x32, and 48x48 into a single ICO file for broad browser compatibility.
5. Add the correct HTML tags to your site's head section. Each favicon size needs to be referenced correctly so browsers and devices know which file to use.
6. Create a site.webmanifest file. This file points Android and PWA-compatible browsers to your 192x192 and 512x512 icons.
7. Test across devices. See how your favicon looks on a browser tab vs a phone screen before completing the setup.

Best Practices for Favicon Image Design

Getting the correct favicon size only helps if the image itself is designed well.

Design for the smallest size first. If your favicon image is legible and recognizable at 16x16, it will almost always scale up cleanly to larger sizes.

Use a square canvas from the start. Favicon dimensions are always square, so don't use non-square canvas designs to avoid issues later.

Avoid thin lines and fine text. Small details that look fine at 512x512 often vanish or blur at 16x16 and 32x32.

Leave a small safe margin around the edges. This is especially important for Android icons. They can get cropped into circles or rounded squares on different devices, so keep key elements away from the edge.

Use transparent backgrounds carefully. Transparency works well for browser tabs but can look inconsistent on platforms that apply their own background shape or color behind the icon.

Keep your favicon consistent with your logo or brand colors. A favicon that looks disconnected from your website's overall branding can feel like an afterthought, even if the size and technical setup are correct.

Revisit your favicon after a rebrand or logo update. An outdated favicon sitting next to a freshly redesigned website is an easy detail to overlook, and it undercuts the polish of an otherwise updated brand.

Common Favicon Size Mistakes to Avoid

These mistakes show up often, even on otherwise well-built websites.

• Using only one favicon size. A single 16x16 image forces every other context, iOS, Android, PWAs, to stretch or shrink an image that wasn't designed for that scale.
• Designing too much detail into a small icon. A favicon image packed with fine text or intricate shapes usually turns into an unrecognizable blur at actual browser tab size.
• Forgetting the Apple Touch Icon. Without a dedicated 180x180 image, iOS often falls back to an automatically generated screenshot instead of your intended icon.
• Skipping the site.webmanifest file. Without it, Android and PWA-compatible browsers may not correctly recognize your 192x192 and 512x512 icons.
• Uploading a non-square image. Favicon dimensions are always square, and non-square uploads often get stretched or cropped unpredictably.
• Not testing on actual devices. A favicon that looks fine in a design tool can still render incorrectly once it's live, especially across different browsers and operating systems.

FAQs

Conclusion

Favicon size isn't just a technical checkbox, it's a small detail that shapes how polished your website feels across browsers, phones, and installed apps. Getting the dimensions right, 16x16 and 32x32 for browser tabs, 180x180 for Apple devices, and 192x192 plus 512x512 for Android and PWAs, means your icon looks sharp and intentional everywhere it appears, instead of blurry in some places and oddly cropped in others.

Building all of these sizes by hand from a single source image is tedious and easy to get wrong.

Ready to get it right in seconds? Try our free favicon generator to create every favicon size you need from one image, ready to upload to your site.