How to Create a Favicon: Sizes, Formats and Best Practices for 2026

A favicon is the small icon that appears in browser tabs, bookmarks, history and various other places throughout the operating system. Despite its tiny size, it is one of the first visual elements users associate with your brand. Getting your favicon right across all platforms requires understanding the different sizes, formats and implementation techniques available in 2026.

What Is a Favicon?

Short for "favorites icon," the favicon was introduced by Internet Explorer 5 in 1999 as a small image associated with bookmarked pages. Today it appears in browser tabs, address bars, bookmark lists, PWA install screens, mobile home screens and search engine results. A missing or low-quality favicon makes a website look unfinished and reduces user trust.

Required Sizes

Different browsers and platforms request different icon sizes. Here is the complete list of sizes you should provide for full coverage:

• 16x16 - Browser tab icon (classic favicon size)
• 32x32 - Browser tab icon on high-DPI displays, Windows taskbar
• 48x48 - Windows desktop shortcut (optional but recommended)
• 180x180 - Apple Touch Icon for iOS home screen
• 192x192 - Android Chrome, PWA icon (standard)
• 512x512 - PWA splash screen, Google Search results, Android adaptive icon

At a minimum, you need the 32x32, 180x180 and 192x192 sizes. The 512x512 is required if you have a PWA manifest. The 16x16 size is technically legacy, but some older browsers still request it.

File Formats: ICO vs PNG vs SVG

ICO Format

The ICO format is a container that can hold multiple sizes in a single file. It is the only format that legacy browsers universally support. A typical favicon.ico contains 16x16 and 32x32 versions. Place it in your site root and browsers will find it automatically, even without an HTML link tag.

PNG Format

PNG favicons offer better compression and quality than ICO. All modern browsers support PNG favicons. Use PNG for the larger sizes (180x180, 192x192, 512x512) and for the Apple Touch Icon. The Apple Touch Icon specifically requires PNG format.

SVG Format

SVG favicons are resolution-independent and can adapt to dark mode using CSS prefers-color-scheme media queries inside the SVG file. They are supported in Chrome, Firefox, Edge and Safari 15+. SVG is ideal as a primary favicon for modern browsers, with ICO as a fallback.

<!-- SVG with dark mode support -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #6366f1; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #818cf8; }
    }
  </style>
  <circle cx="16" cy="16" r="14" />
</svg>

HTML Link Tags

Here is the recommended set of HTML tags for complete favicon coverage:

<!-- Standard favicon (ICO fallback) -->
<link rel="icon" href="/favicon.ico" sizes="32x32" />

<!-- SVG favicon (modern browsers) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" />

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

<!-- PWA manifest -->
<link rel="manifest" href="/manifest.json" />

Browsers try the most specific match first. Modern browsers will use the SVG, older browsers fall back to the ICO file, and iOS uses the Apple Touch Icon.

Manifest.json Icons

If your site is a Progressive Web App, the manifest.json file defines icons for the installed app experience. Android uses these for the home screen icon, splash screen and app switcher.

{
  "name": "My App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

The purpose: "maskable" variant is cropped into different shapes by Android (circle, squircle, etc.), so design it with extra padding around the core icon. Keep the safe zone to the inner 80% of the canvas.

Design Tips for Small Sizes

Designing for 16x16 and 32x32 pixels is genuinely challenging. Here are practical tips:

• Simplify. Your full logo will not work at 16px. Use a lettermark, symbol or the most recognizable part of your brand.
• Use bold shapes. Fine lines disappear at small sizes. Thick, geometric forms read much better.
• High contrast. Ensure the icon is legible against both light and dark browser chrome. Test on multiple backgrounds.
• Avoid text. Unless it is a single character, text is unreadable at favicon sizes.
• Pixel-hint at 16px. Manually adjust the 16x16 version so edges align with the pixel grid. This prevents blurry rendering.
• Test in context. View your favicon in a real browser tab next to other sites. It should be instantly recognizable.

Dark Mode Favicons

With dark mode now standard across operating systems, your favicon needs to be visible on dark browser chrome. A dark-colored favicon can disappear against a dark tab bar. There are two approaches:

• SVG with media query: Embed a prefers-color-scheme media query inside the SVG to switch colors automatically.
• Add a subtle border or outline: Use a thin light stroke or a slightly lighter background so the icon remains visible on any surface.

The SVG approach is the most elegant because the browser automatically selects the right appearance. However, this only works for browsers that support SVG favicons.

Common Mistakes

• Using only one size. A single 16x16 ICO looks blurry on high-DPI displays and terrible on mobile home screens. Always provide multiple sizes.
• Forgetting the Apple Touch Icon. Without it, iOS shows a screenshot of your page as the home screen icon, which looks unprofessional.
• Too much detail. Complex illustrations with gradients and small text become an unrecognizable blob at favicon sizes.
• Not testing on real devices. Browser tab previews in design tools do not match reality. Test on actual phones, tablets and desktop browsers.
• Caching issues. Favicons are aggressively cached by browsers. When updating, rename the file or add a version query string. Clear the browser cache if the old icon persists.
• Missing manifest icons. If you ship a PWA without 192x192 and 512x512 icons, the install prompt may not appear on Android.

The Minimal Setup

If you want the simplest possible favicon setup that covers all major platforms, you need four files and three HTML tags:

• favicon.ico (32x32, placed in site root)
• icon.svg (vector, with optional dark mode support)
• apple-touch-icon.png (180x180)
• icon-512.png (512x512, referenced in manifest)

This gives you legacy browser support, modern SVG rendering, iOS home screen coverage and PWA compatibility, all with minimal effort.