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.

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.

<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" />

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.