What Is a Favicon? The Tiny Image That Makes or Breaks Your Brand

Open your browser right now and look at the tabs. Each one has a tiny square image next to the page title. That image is a favicon, short for "favorites icon."

A favicon is a small icon associated with a website. Browsers display it in tabs, bookmarks, history, and address bar suggestions. Search engines show it alongside your URL in results pages. On mobile devices, it becomes your app icon when someone adds your site to their home screen.

Where Favicons Actually Appear

Most developers think of favicons as "that little image in the browser tab." In reality, your favicon shows up in at least six different contexts, each with its own size requirements and visibility characteristics.

Browser tabs are the most obvious placement, but bookmarks matter just as much. When someone saves your site and comes back a week later, your favicon is the only visual anchor they have. A generic or missing favicon makes your site blend into a wall of identical bookmark entries.

Here is the full list of places your favicon actually appears, including some you might not have considered:

What Makes a Good Favicon

The core challenge is that favicons need to be recognizable at 16 by 16 pixels. That is roughly the size of your thumbnail. Most logos do not survive that kind of compression without modification.

Good favicons use one or two colors at most, rely on a single geometric shape rather than detailed illustrations, and have enough contrast to work against both light and dark browser themes. Skip text entirely. Letters become illegible blobs at small sizes.

The Files You Need

A proper favicon setup involves more than one file. Different browsers and platforms have different requirements, and missing even one format can cause fallback behavior you did not intend.

The Minimum Setup

If you want to cover all major browsers and platforms with the fewest files possible, you need at minimum a multi-resolution ICO file, an SVG for modern browsers, a 180px PNG for Apple devices, and a web manifest pointing to your larger icons for Android and PWA. Our complete favicon sizes guide covers every size and when you actually need it.

<link rel="icon" href="/favicon.ico" sizes="48x48" />
<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 Full File Format Stack

Three file formats compete for favicon duty: ICO, PNG, and SVG. Each has real trade-offs, and most sites should use a combination of all three.

ICO is the oldest format, dating back to 1999. Its superpower is embedding multiple resolutions (16, 32, 48px) inside a single file, so the browser picks the best match. Its weakness is that it cannot adapt to dark mode and the file size adds up quickly with multiple resolutions. You still need it because some tools (PDF viewers, older email clients, some RSS readers) only look for favicon.ico at the domain root.

PNG is what you use for Apple Touch icons and manifest.json entries. Each size is a separate file, which means more HTTP requests but smaller individual payloads. PNGs support full alpha transparency and work everywhere.

SVG is the modern choice for the primary favicon. A single file scales to any resolution, and you can embed a @media (prefers-color-scheme: dark) block inside the SVG to swap colors when the user is in dark mode. The only significant gap is Safari on iOS, which ignores SVG favicons and uses the apple-touch-icon instead.

How Browsers Choose Which Favicon to Use

When a browser needs to display your favicon, it does not just grab the first one it finds. There is a priority order, and it varies slightly by browser, but the general logic is:

1. Web App Manifest icons — if the page has a <link rel="manifest"> and the manifest defines icons, Chrome and Edge will prefer these for installed PWAs and Android home screen shortcuts.
2. apple-touch-icon — Safari on iOS always uses this for the home screen icon. Safari on macOS also checks it for the tab icon if no SVG is available.
3. SVG favicon — Chrome 80+, Firefox 41+, and Edge 80+ will use <link rel="icon" type="image/svg+xml"> when available. This takes priority over PNG and ICO in modern browsers.
4. PNG with sizes attribute — the browser picks the closest match to its needed display size from all <link rel="icon"> tags that specify sizes. Larger sizes are preferred when the browser needs a high-DPI version.
5. favicon.ico at domain root — the ultimate fallback. If nothing else is specified, browsers will request /favicon.ico automatically. This is a hardcoded behavior from 1999 that still works today.

Favicon Impact on User Behavior

Favicons are not just decorative. Eye-tracking studies and A/B tests have shown measurable effects on how users interact with sites that have distinctive favicons versus sites without them.

Tab identification speed is the most dramatic difference. Users with 10+ tabs open find a specific tab in about 1.2 seconds when it has a distinctive favicon, versus 3.8 seconds without one (scanning page titles instead). Bookmark click-through rates show a similar pattern: recognizable favicons in the bookmark bar get clicked nearly twice as often as generic globe icons. In Google Search results, sites with favicons see a modest but consistent CTR lift of about 1-2 percentage points over sites showing the default globe.

Common Myths Debunked

Several pieces of outdated advice still circulate about favicons. Here is what is actually true in 2026. For the technical details on each format, see our ICO vs PNG vs SVG comparison.

Common Mistakes

The most frequent favicon problem is simply not having one at all. The second most common is using a full logo with text that turns into an unreadable smear at 16 pixels. The third is only providing a single favicon.ico without any of the modern formats, leaving mobile devices with no icon to show.

Another subtle mistake is using a favicon with a white background on a site that supports dark mode. The icon looks fine on light themes but becomes an awkward white square on dark browser themes. SVG favicons solve this by supporting the prefers-color-scheme media query directly.

Getting Started

The fastest way to get a complete favicon package is to use a tool that generates all the required sizes and formats at once. Some generators can also create the icon itself from a text description, so you do not need design skills or an existing logo.

Whether you design your own or generate one, test it at its smallest size. If you cannot recognize it at 16 pixels, simplify. Cut details, increase contrast, reduce colors until the shape reads clearly in a browser tab.