Favicon Dimensions

Recommended size: 32 × 32 pixels

32 × 32

1:1

The favicon is the small icon displayed in browser tabs, bookmarks, history, and new tab pages. While the classic favicon is 32×32 pixels, modern browsers use multiple sizes ranging from 16×16 to 512×512. A proper favicon implementation requires several sizes and formats to cover all contexts — browser tabs, PWA install screens, Google search results, and bookmark icons. Despite its tiny size, the favicon is one of the most frequently seen brand assets on the web.

Specifications

Width	32px
Height	32px
Aspect Ratio	1:1
Platform	web
Category	web

Required Sizes for Modern Browsers

A complete favicon implementation needs multiple sizes:

16×16: Classic browser tab icon (older browsers)
32×32: Standard browser tab icon (modern browsers, taskbar pinning)
48×48: Windows taskbar shortcut
180×180: Apple Touch Icon (iOS home screen bookmark)
192×192: Android Chrome app icon, Google search results
512×512: PWA splash screen, Chrome install prompt

The minimum viable favicon setup for most sites:

One favicon.ico file containing 16×16 and 32×32 versions
One apple-touch-icon.png at 180×180
One icon-192.png for Android/PWA
One icon-512.png for PWA splash

Link them in your HTML:

SVG Favicons and Dark Mode Support

Modern browsers support SVG favicons, which scale perfectly to any size from a single file:

Supported in Chrome, Firefox, Edge, Safari 15+
One SVG file replaces multiple PNG sizes
Smaller file size than PNG equivalents combined
Supports CSS media queries for dark mode

An SVG favicon can detect dark mode with:

This lets your favicon change colors when the user switches between light and dark system themes — a polished touch that few sites implement.

IMPORTANT: Always include an ICO fallback alongside your SVG favicon for older browsers. Safari versions before 15 don't support SVG favicons.

Designing Effective Favicons

At 16×16 and 32×32 pixels, every pixel matters:

Simplify your logo — reduce to its most essential shape. Full logos with text are illegible at 16px
Use bold, filled shapes — thin lines and fine details disappear at small sizes
High contrast — the favicon appears on various background colors depending on the browser theme
Test at actual size — zoom your design to 16×16 on screen to verify readability
Avoid text — letters are unreadable below about 32px. Use an icon, monogram, or shape instead

Many successful favicons are a single letter, a simplified icon, or an abstract shape derived from the brand. Google's multicolor G, GitHub's octocat silhouette, and Twitter/X's simple bird shape are examples of effective simplification.

Quick Tips

→ Simplify your logo to its most basic shape — text is unreadable at 16px
→ Use SVG favicons with dark mode media queries for modern browsers
→ Always include a favicon.ico fallback at the site root
→ Test your favicon at actual 16×16 pixel size before deploying

Related web Sizes

Frequently Asked Questions

What size should a favicon be?

The standard favicon is 32×32 pixels, but a complete implementation needs multiple sizes: 16×16 and 32×32 in a favicon.ico file, 180×180 for Apple Touch Icon, and 192×192 plus 512×512 for PWA/Android. Alternatively, use an SVG favicon that scales to any size, with an ICO fallback for older browsers.

Do I need a favicon.ico file or can I just use PNG?

You should include a favicon.ico for maximum compatibility — some older browsers and tools only look for this file. However, modern browsers support PNG and SVG favicons via link tags. The recommended approach is: favicon.ico as fallback (at /favicon.ico), plus SVG or PNG link tags for modern browsers.

How do I make my favicon look good in dark mode?

Use an SVG favicon with an embedded CSS media query: @media(prefers-color-scheme:dark). This lets you change colors when the user's system is in dark mode. For PNG/ICO favicons, choose colors that have sufficient contrast on both light and dark tab bar backgrounds.