Favicon Dimensions: Complete Size Guide

A favicon (favorite icon) is a small icon that appears in browser tabs, bookmarks, and address bars. Understanding the correct favicon dimensions is crucial for ensuring your website icon displays properly across all platforms.

Standard Favicon Dimensions

Primary Favicon Sizes

• 16x16 pixels: Classic favicon size, supported by all browsers
• 32x32 pixels: High-resolution favicon for modern displays
• 48x48 pixels: Windows desktop icon size
• 64x64 pixels: High-DPI displays and Windows tiles

Apple Touch Icons

• 57x57 pixels: iPhone (non-Retina)
• 60x60 pixels: iPhone (Retina)
• 72x72 pixels: iPad (non-Retina)
• 76x76 pixels: iPad (Retina)
• 114x114 pixels: iPhone (Retina)
• 120x120 pixels: iPhone (Retina)
• 144x144 pixels: iPad (Retina)
• 152x152 pixels: iPad (Retina)
• 180x180 pixels: iPhone (Retina)

Android Icons

• 36x36 pixels: Low-density screens
• 48x48 pixels: Medium-density screens
• 72x72 pixels: High-density screens
• 96x96 pixels: Extra high-density screens
• 144x144 pixels: Extra extra high-density screens
• 192x192 pixels: Chrome for Android

Favicon Format Requirements

ICO Format

• 16x16 pixels: Minimum size
• 32x32 pixels: Standard size
• 48x48 pixels: High-resolution
• 64x64 pixels: Maximum recommended

PNG Format

• 16x16 pixels: Standard favicon
• 32x32 pixels: High-resolution favicon
• 192x192 pixels: Android Chrome
• 512x512 pixels: PWA manifest

Platform-Specific Requirements

WordPress

• 32x32 pixels: Standard favicon
• 180x180 pixels: Apple touch icon
• 192x192 pixels: Android icon

Shopify

• 32x32 pixels: Favicon
• 180x180 pixels: Apple touch icon
• 192x192 pixels: Android icon

Squarespace

• 16x16 pixels: Minimum
• 32x32 pixels: Recommended
• 180x180 pixels: Apple touch icon

Best Practices

1. Start with 32x32 pixels: This is the most commonly used size
2. Create multiple sizes: Generate different sizes for different platforms
3. Use square dimensions: Always maintain 1:1 aspect ratio
4. Test across browsers: Verify display in different browsers
5. Optimize file size: Keep favicon files under 10KB when possible

Common Mistakes to Avoid

• Using rectangular images (favicons must be square)
• Making favicons too small (under 16x16 pixels)
• Using complex designs (simple designs work better at small sizes)
• Forgetting mobile-specific sizes
• Not testing across different platforms

Tools for Creating Favicons

• Favicon Genie: Free online favicon generator
• RealFaviconGenerator: Comprehensive favicon generator
• Favicon.io: Simple favicon creator
• Photoshop: Professional design tool
• Canva: User-friendly design platform

Implementation Tips

1. Use multiple formats: ICO for older browsers, PNG for modern browsers
2. Include all sizes: Generate all required sizes for complete coverage
3. Test thoroughly: Check display across different devices and browsers
4. Optimize performance: Compress images without losing quality
5. Update regularly: Refresh favicons when rebranding

Conclusion

Understanding favicon dimensions is essential for creating a professional website. By following the correct size guidelines and using the right tools, you can ensure your favicon displays perfectly across all platforms and devices.

Ready to create your favicon? Try Favicon Genie for free and generate all the sizes you need in minutes.