Favicon Sizes Guide: All Sizes You Need in 2024

What is a Favicon and Why It Matters

A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, history lists, and on mobile home screens when users save your site. It is one of the smallest design elements on your site, but one of the most visible — users see it every time they glance at their browser tabs.

A missing or default favicon looks unprofessional. A well-designed favicon reinforces brand recognition and makes your site easy to find among dozens of open tabs. It also appears in search results on mobile (Google shows favicons next to URLs), so it directly influences how your site looks in SERPs.

The challenge: different browsers, operating systems, and devices expect different sizes and formats. This guide covers every favicon size you need in 2024.

Essential Favicon Sizes

You do not need dozens of sizes. Here are the ones that actually matter:

favicon.ico (32x32 and 16x16)

The classic .ico file, supported since the earliest days of the web. The .ico format can contain multiple sizes in a single file — include both 16x16 and 32x32. Browsers choose the appropriate size based on context (tabs use 16x16, shortcuts use 32x32).

Place it at the root of your site (/favicon.ico). Browsers automatically look for this file even without an explicit link tag.

favicon.svg (any size)

SVG favicons are supported in all modern browsers (Chrome, Firefox, Safari, Edge). A single SVG file scales perfectly to any size, eliminating the need for multiple raster files. SVG favicons also support dark mode — you can use CSS @media (prefers-color-scheme: dark) inside the SVG.

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

apple-touch-icon.png (180x180)

Required for iOS. When users add your site to their home screen, iOS uses this icon. The 180x180 size covers all current iPhone models. iOS automatically rounds the corners and adds visual effects.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Android/Chrome icon (192x192 and 512x512)

Defined in your site.webmanifest file. Android uses these for home screen shortcuts and Progressive Web App (PWA) icons. The 512x512 version is used for splash screens.

Complete Implementation

Here is the minimal set of tags to cover all major platforms:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

And the site.webmanifest file:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

This setup covers Chrome, Firefox, Safari, Edge, iOS, and Android. Use our Favicon Generator to create all these sizes from a single source image.

Designing an Effective Favicon

Favicons are displayed at extremely small sizes — often 16x16 or 32x32 pixels. This imposes strict design constraints:

• Simplify ruthlessly. Your full logo with text will be unreadable at 16 pixels. Use a single letter, a simple symbol, or a distinctive shape. Think of how Twitter uses its bird, Slack uses its hashtag, and GitHub uses its octocat — all simple, recognizable shapes.
• Use bold colors. Subtle gradients and thin lines disappear at small sizes. Use solid, saturated colors with strong contrast.
• Fill the space. Small icons with lots of padding look even smaller. Let your icon fill most of the available canvas.
• Test at actual size. Design at 512x512 for detail work, but regularly zoom out to 16x16 to verify it is still recognizable. What looks great at 512 pixels can become a blob at 16.
• Consider different backgrounds. Your favicon will appear on white browser backgrounds, dark mode backgrounds, colored bookmark bars, and phone home screens. Test against multiple backgrounds.

File Format Comparison

Three formats dominate the favicon landscape:

ICO

The original favicon format. Can contain multiple sizes in one file. Universal browser support including very old browsers. Required for maximum compatibility. Slightly larger file size than single-size PNGs.

PNG

Clean, sharp results with transparency support. Each size requires a separate file. Supported in all modern browsers. The standard choice for Apple touch icons and Android manifest icons.

SVG

Vector format — a single file works at any size. Supports CSS and JavaScript for dynamic favicons (like dark mode adaptation). Not supported in older browsers, but an ICO fallback handles those cases.

Recommended approach: Use SVG as the primary favicon for modern browsers, with an ICO fallback for legacy support, and PNG for Apple touch icon and Android manifest. This covers every platform with minimal files.

Common Favicon Mistakes

• Using your full logo. A horizontal logo with a wordmark becomes an illegible smudge at 16 pixels. Extract or create a simplified icon version.
• Forgetting the apple-touch-icon. Without it, iOS shows a screenshot of your page as the home screen icon — usually an ugly, cropped mess.
• Not placing favicon.ico at the root. Many older browsers and tools (Google's crawlers, some RSS readers, enterprise firewalls) look for /favicon.ico at the domain root regardless of link tags. Always have a file there.
• Using a white icon without transparency. A white icon on a white browser tab is invisible. Either use a colored icon or add a background shape. Test against white, light gray, and dark backgrounds.
• Caching issues. Browsers aggressively cache favicons. After updating your favicon, users may see the old one for days or weeks. Append a version query parameter to force re-download: /favicon.ico?v=2.
• Oversized files. A favicon does not need to be a 500 KB PNG. Keep ICO files under 15 KB and PNG icons under 20 KB. These are tiny images — large files waste bandwidth on every page load.

Generate all the favicon sizes you need in one step with our Favicon Generator. Upload a square image (at least 512x512) and download a complete package with ICO, PNG, and SVG files plus the HTML tags to paste into your site.