Complete Favicon Sizes Guide for All Platforms

Complete Favicon Sizes Guide

Modern websites need favicons at multiple resolutions to cover all platforms and devices. Here is the complete breakdown of every favicon size and where it is used.

Browser Tab Favicons

• 16x16 — The classic favicon size. This is what appears in browser tabs on standard-density displays. At just 256 pixels total, every pixel matters. Simple, high-contrast designs work best.
• 32x32 — Used by browsers on retina/high-DPI displays. This is effectively 16x16 displayed at 2x resolution, resulting in a much sharper icon on modern screens.
• 48x48 — Used by Windows for taskbar pins and desktop shortcuts. Some browsers also use this as an intermediate size.

Apple Devices

• 180x180 — The Apple Touch Icon. This is the icon displayed when a user adds your website to their iPhone or iPad home screen. Apple automatically rounds the corners and applies visual effects.

Android Devices

• 192x192 — Used by Android Chrome for the Add to Home Screen feature and as the app icon in the app drawer. This is specified in the web app manifest.

Progressive Web Apps

• 512x512 — The largest standard size, used for PWA splash screens when a web app is loading. Also used by some app stores and platforms as the primary icon.

Best Practices

1. Start with a high-resolution source (at least 512x512) and scale down
2. Test at every size — what looks good at 512px may be unrecognizable at 16px
3. Use transparency wisely — transparent backgrounds work on most platforms, but Apple Touch Icons get a white background by default
4. Consider creating separate designs for large and small sizes
5. Include an ICO file as a fallback for older browsers