Best Favicon Sizes for Websites and PWAs

Modern websites and Progressive Web Apps require multiple favicon sizes to ensure optimal display across all devices and contexts. Understanding which sizes are needed and how to implement them correctly is essential for a professional web presence.

Standard Favicon Sizes

Here are the standard favicon sizes you should provide:

• 16x16: Browser tabs and bookmarks (most common)
• 32x32: Browser bookmarks and desktop shortcuts
• 48x48: Windows desktop shortcuts
• 96x96: Android home screen
• 128x128: Chrome Web Store and Android
• 196x196: Android home screen (high-res) and Apple touch icon
• 512x512: High-resolution displays and PWA icons

Progressive Web App Icon Requirements

Progressive Web Apps have specific icon requirements defined in the manifest.json file. You should include:

• At minimum: 192x192 and 512x512 pixels
• Recommended: All sizes from 48x48 to 512x512
• Format: PNG with transparency support

Implementation Best Practices

When implementing favicons:

• Use descriptive filenames (e.g., favicon-16x16.png)
• Place all favicon files in your website's root directory or a dedicated /icons folder
• Include proper HTML link tags with sizes attributes
• Provide an SVG version for modern browsers
• Include an ICO file for legacy browser support

Using Our Tools

Our Advanced Favicon Generator automatically creates all required sizes and provides ready-to-use HTML code. For existing logos, use our free favicon generator (logo to favicon converter) to convert your logo into a complete icon pack with all necessary sizes. Need framework-specific help? Check out our guides for Next.js, React, HTML, and WordPress.