How to Design a Favicon: Size, Format and Best Practices

The favicon is the smallest piece of branding on your website, but it plays an outsized role in how users recognize your brand across browser tabs, bookmarks, mobile home screens and search results. Getting the favicon size right is half technical, half design. In this guide, we walk you through the exact dimensions to use in 2026, the formats browsers actually support, and how to implement everything cleanly in your HTML.

What Is a Favicon and Why Size Matters

A favicon (short for favorite icon) is the tiny image displayed in browser tabs, bookmark lists, browser history, mobile home screens when a site is saved as a shortcut, and increasingly in Google search results on mobile. Because it must remain legible at very small dimensions, size and clarity go hand in hand.

Google explicitly requires that your favicon be a square (1:1 ratio) and at least 8×8 pixels, but in practice you want much larger source files so that browsers can downscale cleanly on high-density displays.

browser tab icon

The Essential Favicon Sizes You Need in 2026

You don’t need dozens of files anymore. Modern browsers and devices are smart enough to work with a handful of well-chosen sizes. Here is the shortlist we recommend at PixelBright:

Size (px) Format Primary Use
16×16 ICO / PNG Browser tabs, address bar
32×32 ICO / PNG Taskbar, retina tabs
48×48 PNG Google search results (minimum multiple of 48)
180×180 PNG Apple Touch Icon (iOS home screen)
192×192 PNG Android home screen, PWA manifest
512×512 PNG PWA splash screens, high-DPI
Any (vector) SVG Modern browsers, dark mode adaptable

Google’s 48-Pixel Rule

Google recommends that favicons used in search results be a multiple of 48 pixels (48×48, 96×96, 144×144, and so on). This ensures the image scales cleanly to the display size Google needs. A single 144×144 or 192×192 PNG source can satisfy this while also working well elsewhere.

browser tab icon

Which File Format Should You Choose?

Three formats matter today:

  • ICO: The classic format. It can bundle multiple sizes (16, 32, 48) into a single file. Still the safest fallback for legacy browsers.
  • PNG: Supported everywhere modern. Best for the 180×180, 192×192 and 512×512 variants. Offers transparency and crisp rendering.
  • SVG: Scalable, tiny in file size, and it supports dark mode through prefers-color-scheme media queries. Supported by all major modern browsers as of 2026.

Our recommendation: ship an SVG as the primary favicon, an ICO fallback, and dedicated PNGs for Apple and Android.

Design Tips for Readability at Small Sizes

A favicon that looks great at 512×512 can turn into a blurry blob at 16×16. Follow these principles:

  1. Simplify aggressively. Remove taglines, thin strokes and fine details. Keep only the core symbol.
  2. Design at 16×16 first, then scale up. This forces clarity from the start.
  3. Use bold, high-contrast colors. Muted palettes disappear against browser chrome.
  4. Avoid text unless it’s a single letter or a two-character monogram.
  5. Test on light and dark backgrounds. Chrome, Safari and Firefox all handle tab colors differently.
  6. Keep padding minimal but present. A small breathing area prevents the icon from feeling cramped against the tab edge.
browser tab icon

How to Implement Your Favicon Across Browsers

Place your favicon files in the root of your site, then add the following inside the <head> of your HTML:

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

The Web App Manifest

For Android and PWA support, your site.webmanifest file should reference the larger PNGs:

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

Dark Mode Favicons with SVG

One of the most underused tricks in 2026 is embedding a media query directly inside your SVG favicon so it adapts to the user’s system theme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="..."/>
</svg>

Common Mistakes to Avoid

  • Uploading a non-square image. Google will ignore it in search results.
  • Serving only a 16×16 PNG. It will look pixelated on retina and 4K displays.
  • Forgetting the Apple Touch Icon, which leads iOS to grab a low-res screenshot instead.
  • Caching issues. Browsers cache favicons aggressively. Version your filename (favicon-v2.ico) when updating.
  • Overdesigning. If it doesn’t read at 16×16, it doesn’t work.
browser tab icon

Quick Checklist Before You Ship

  1. Square 1:1 source file, at least 512×512
  2. ICO with 16, 32 and 48 bundled
  3. SVG version with dark mode support
  4. 180×180 Apple Touch Icon
  5. 192×192 and 512×512 PNGs referenced in the manifest
  6. Correct <link> tags in the HTML head
  7. Test on Chrome, Safari, Firefox and mobile

FAQ

Is a favicon 16×16 or 32×32?

Both. 16×16 is used in browser tabs on standard displays, while 32×32 is used on retina and high-DPI screens. Bundling both inside a single ICO file, or providing an SVG, covers both cases.

What is the best size for a favicon?

If you had to pick one, go with 32×32 for the tab experience and add a 192×192 PNG for mobile and search. For Google search visibility, ensure at least one file is a multiple of 48px, such as 96×96 or 144×144.

Can a favicon be 512×512?

Yes. A 512×512 PNG is actually recommended for progressive web apps and splash screens. Browsers will downscale it as needed for smaller displays.

Can a PNG be a favicon?

Absolutely. All modern browsers support PNG favicons. In fact, PNG is preferred over ICO for larger sizes because of better compression and transparency handling.

Do I still need an ICO file in 2026?

Not strictly, but it’s a low-cost safety net for older browsers and Windows shortcut icons. We recommend keeping it in your setup.

Should I use SVG for my favicon?

Yes, whenever your logo is vector-friendly. SVG favicons are tiny, sharp at any resolution, and can adapt to dark mode automatically. Just make sure to keep an ICO or PNG fallback for maximum compatibility.

Nailing your favicon size and setup takes less than an hour but pays off every time a user opens a tab, bookmarks your page, or spots you in search results. Treat it like the miniature billboard it is.

Leave a Comment