Favicon Sizes: The Complete Guide — All Platform Specs

← Back to Blog

Favicon Sizes (2026): The 3 Sizes You Must Have

· 7 min read

**⚡ Quick answer: 3 favicon sizes you must have**

• 32×32 PNG — Browser tab (required for HiDPI screens)
• 180×180 PNG — iOS home screen shortcut
• 192×192 PNG — Android Chrome / PWA home screen icon

Add 512×512 PNG (PWA splash screen) and favicon.ico (legacy browser fallback) to cover 99% of cases.

Different platforms require very different favicon sizes. Below is a complete reference table + copy-paste HTML code to get every platform covered in 5 minutes.

Favicon Size Reference Table — All Platforms

The table below covers favicon size specifications for all major platforms, including format requirements:

Platform-by-Platform Size Details

Browser Tab: 16×16 and 32×32

16×16 pixels is the most common favicon size for browser tabs and the historical standard for favicon.ico files. The 32×32 version is used for high-DPI (Retina) screens to keep the icon sharp on high-resolution displays. It's recommended to pack both sizes into a multi-resolution ICO file and also provide a separate 32×32 PNG.

At such small sizes, design simplicity is critical: simple shapes and high-contrast colors work far better than complex logos. Many brands design a simplified version specifically for 16×16 rather than directly scaling down the full logo.

iOS Home Screen: 180×180

When users add a website to their iPhone or iPad home screen, iOS uses the apple-touch-icon. The current Apple recommendation is 180×180 pixels (for iPhone 6 and above @3x displays). iOS automatically applies rounded corners to the icon, so your image should be a plain square — no need to add corners yourself.

Older devices support 152×152 (iPad Retina) and 120×120 (iPhone Retina). If you only provide one size, 180×180 is backward compatible with all scenarios.

Android Chrome: 192×192 and 512×512

Android Chrome uses icons declared in the Web App Manifest file. 192×192 is used for home screen shortcut icons, and 512×512 is used for the splash screen. Both sizes are required for PWAs (Progressive Web Apps) — without a 512×512 icon, Chrome won't generate a splash screen, degrading the user experience.

Windows Tile: 144×144

Windows 8/10 Start menu tiles and Edge browser use 144×144 icons, specified via the `` tag. Modern Windows 11 and Edge also accept icons from the standard Web App Manifest, so 192×192 is typically sufficient.

Safari Pinned Tab: SVG Format

Safari's pinned tab uses a single-color SVG icon referenced via the `` tag. SVG's advantage is that it's a vector graphic, staying sharp at any display size. The icon should be a pure black silhouette shape (Safari automatically fills it with the user's accent color).

Complete HTML head Code Example

Add the following code to your page's `` section to cover all major platforms:

site.webmanifest File Example

The Web App Manifest file declares icon sizes used by Android Chrome and PWAs:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

How to Create a Favicon (Fastest Method)

The fastest method: use the Favicon Generator — upload a square image, get all sizes + webmanifest automatically in one step.

If your image isn't square yet, two steps:

1. Crop to square: Use the Image Crop Tool to crop your logo to 1:1, download PNG.
2. Generate all sizes at once: Upload the square PNG to the Favicon Generator — auto-exports 16×16, 32×32, 180×180, 192×192, 512×512, and ICO.
3. Drop into project root: Put the exported files in your site root, paste the HTML code below into ``.

No account required, no software to install. Your image data never leaves the browser.

Generate all favicon sizes in one click — outputs ICO + PNG + webmanifest automatically, no software needed.

Generate Favicon Free →

Favicon Design Best Practices

• Design large to small: Start with the 512×512 high-resolution version, then scale down. Never design a small icon first and enlarge it.
• Keep it simple: 16×16 pixels contains only 256 pixels — complex text or patterns are unreadable at this size. Extract the core visual element of your logo, typically a first letter or simplified shape.
• High contrast: Icons must be clearly visible on both light and dark tab bar backgrounds. Avoid light gray or low-saturation colors.
• Handle transparent backgrounds carefully: On some platforms, transparent backgrounds are filled with black or white. Consider adding an appropriate background color to your favicon, or test transparent backgrounds across all platforms.
• Test the real result: Before deploying, test actual display on browser tabs, bookmark lists, iOS home screen, and Android home screen.

FAQ

Which is better: favicon.ico or PNG favicon?

Modern browsers all support PNG favicons, which are lighter and easier to generate. However, favicon.ico still has value: it can bundle multiple sizes (16×16 and 32×32) into a single file, and browsers automatically look for /favicon.ico at the site root, loading it even without any HTML declaration. The recommended approach is to provide both: an ICO file at the root as a default fallback, and PNG versions declared with `` tags in HTML.

Why does my browser still show the old favicon after I updated it?

Browsers aggressively cache favicons — this is the most common cause of "update not taking effect." Solutions: check "Disable cache" in developer tools and refresh; add a version query parameter to the favicon URL (e.g., href="/favicon.png?v=2") to force re-download; or directly navigate to the favicon file URL in the address bar and hard-refresh it.

Can SVG be used directly as a favicon?

Yes, but browser compatibility is still incomplete. Modern versions of Chrome, Firefox, and Edge support SVG favicons (via ``), while Safari only supports SVG for pinned tabs (via mask-icon). SVG favicons are extremely small in file size and perfectly sharp at any size. The current recommended approach: provide both SVG and PNG versions and let browsers choose based on support, keeping favicon.ico as a final fallback.

What is the minimum favicon size to display clearly?

The minimum display size for a favicon in browser tabs is typically 16×16 pixels — this is the minimum size you must provide. On high-DPI screens, browsers prefer the 32×32 version. If you only provide a 32×32 PNG without a 16×16, browsers will scale it down automatically, which usually looks acceptable, but a version specifically optimized for 16×16 will be sharper.

How do I create a favicon without design software?

No software installation required. Use the Favicon Generator on this site — upload a square image and get all sizes (16×16, 32×32, 180×180, 192×192, 512×512) plus a webmanifest file in one click. If your image isn't square, crop it first with the Image Crop Tool. No account needed, everything runs in your browser.