Favicon Guide — Everything You Need to Know

What Is a Favicon and Why Does It Matter

A favicon is the small icon that appears in browser tabs, bookmarks, history lists, and (on mobile devices) home screen shortcuts. It is typically 16×16 or 32×32 pixels — one of the smallest design elements on your website, yet one of the most visible. When a user has 15 browser tabs open, your favicon is often the only visual identifier of your site. Without one, your tab displays a generic globe icon that is indistinguishable from every other faviconless site.

Favicons also appear in search results on some browsers and platforms, in bookmark bars, and when someone saves your site to their phone home screen. They are a subtle but constant brand reinforcement — users see your favicon hundreds of times without consciously noticing it, building unconscious brand recognition over time.

Favicon Formats and Sizes

The classic favicon format is ICO (a Microsoft format that can contain multiple sizes in one file). Modern browsers also support PNG, SVG, and even GIF favicons. SVG favicons are increasingly preferred because they scale perfectly to any size and support dark mode adaptation through CSS media queries embedded in the SVG.

For maximum compatibility across all devices and contexts, you should provide multiple sizes: 16×16 (browser tabs), 32×32 (task bars and retina browser tabs), 180×180 (Apple Touch Icon for iOS home screens), and 192×192 (Android home screens). A single SVG favicon can technically replace all of these, but providing explicit raster versions ensures compatibility with older browsers and systems.

Designing an Effective Favicon

At 16×16 pixels, detail is impossible. The most effective favicons use simple shapes, bold colors, and high contrast. Your full logo probably will not work as a favicon — instead, extract the most recognizable element. If your logo is a wordmark, use the first letter or an icon element. If your logo includes a symbol, use that symbol alone.

Test your favicon at actual size by viewing it in a browser tab — not at the larger size you designed it at. What looks clear at 256×256 pixels might be an unrecognizable blur at 16×16. Use our Favicon Generator at convertsmartly.com to create properly sized favicons from any image, including automatic optimization for all required sizes and formats.

How to Add a Favicon to Your Website

The simplest method is placing a file named favicon.ico in your website root directory. Most browsers automatically look for this file. For more control and modern format support, add link tags in your HTML head section specifying each favicon variant — the standard icon, the Apple Touch Icon, and the manifest icons for Android.

WordPress users can set their favicon through the Customizer (Appearance then Customize then Site Identity then Site Icon). Upload a square image at least 512×512 pixels and WordPress automatically generates all required sizes. For other CMS platforms, check their theme settings or site configuration for favicon or site icon options.

Common Favicon Mistakes

The most common mistake is not having a favicon at all. This makes your site look unprofessional and harder to find among browser tabs. The second most common mistake is using a detailed image that becomes unrecognizable at small sizes. The third is forgetting to update the favicon when rebranding — an outdated favicon creates a jarring disconnect between your new branding and the icon users see daily.

Caching is another frequent issue. Browsers cache favicons aggressively, sometimes for weeks. After updating your favicon, users might continue seeing the old one. Adding a version query string to your favicon link tag (like favicon.ico?v=2) forces browsers to fetch the new version. Clear your own browser cache to verify the update before assuming it is not working.