Complete Favicon Sizes Guide 2025 - All Required Dimensions

Essential Favicon Sizes (Must Have)

These are the core favicon sizes you absolutely need for proper display across all major browsers and devices:

16×16

16×16 pixels

Format: ICO, PNG

Usage: Browser tabs, bookmarks

Required: Yes

The classic favicon size displayed in browser tabs and bookmark lists.

32×32

32×32 pixels

Format: ICO, PNG

Usage: High-DPI displays, taskbar

Required: Yes

Enhanced version for high-resolution displays and Windows taskbar.

180×180

180×180 pixels

Format: PNG

Usage: iOS home screen

Required: Yes

Apple Touch Icon for iOS devices when users add your site to home screen.

Recommended Additional Sizes

These sizes enhance compatibility and provide better user experience across different platforms:

48×48

48×48 pixels

Format: ICO, PNG

Usage: Windows desktop shortcuts

Used when users create desktop shortcuts to your website.

192×192

192×192 pixels

Format: PNG

Usage: Android home screen, PWA

Minimum required size for Progressive Web App manifests.

512×512

512×512 pixels

Format: PNG

Usage: PWA splash screens, app stores

Large icon for Progressive Web Apps and potential app store listings.

Platform-Specific Requirements

🖥️ Desktop Browsers

16×16: Standard favicon for tabs and bookmarks

32×32: High-DPI displays and larger interface elements

48×48: Desktop shortcuts and some browser interfaces

📱 iOS Devices

180×180: iPhone and iPad home screen icon (current standard)

152×152: iPad home screen (older devices)

120×120: iPhone home screen (older devices)

🤖 Android Devices

192×192: Home screen shortcuts and PWA minimum

512×512: App drawer and PWA splash screens

144×144: Some older Android versions

🌐 Progressive Web Apps

192×192: Minimum required size for web app manifest

512×512: Recommended large size for app stores

Maskable icons: Special adaptive icons with safe zones

File Format Recommendations

ICO Format

Best for: 16×16, 32×32, 48×48

Advantages: Can contain multiple sizes in one file, universal browser support

Usage: Traditional favicon.ico file in website root

PNG Format

Best for: All sizes, especially mobile icons

Advantages: Better compression, transparency support, high quality

Usage: Individual size files, mobile icons, PWA icons

SVG Format

Best for: Simple, scalable designs

Advantages: Infinitely scalable, small file size

Usage: Modern browsers, simple icon designs

HTML Implementation

Here's the complete HTML code to implement all essential favicon sizes:

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG favicons for better quality -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome icons -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

Quick Reference Table

Size	Format	Usage	Priority
16×16	ICO, PNG	Browser tabs, bookmarks	Essential
32×32	ICO, PNG	High-DPI displays	Essential
48×48	ICO, PNG	Desktop shortcuts	Recommended
180×180	PNG	iOS home screen	Essential
192×192	PNG	Android, PWA minimum	Recommended
512×512	PNG	PWA, app stores	Recommended

Generate All Sizes with Our Tools

Use our free favicon tools to automatically generate all required sizes:

🎨 Favicon Generator

Upload your image and get all sizes automatically generated

✏️ Favicon Maker

Create text-based favicons in all required sizes

🔄 Favicon Converter

Convert between different formats and sizes