What Is a Favicon? Browser Tab Icons Explained

That tiny icon sitting next to your website name in the browser tab? That is a favicon — short for "favorites icon." Every site has one (or should). When yours is missing, browsers display a generic gray square that makes any site look unfinished.

Here is everything you need to know about favicons: what they are, where they appear, and how to create one without any design experience.

Where Your Favicon Actually Shows Up

Favicons appear in more places than most people realize. Knowing where they show up makes it easier to understand why they matter:

• Browser tabs — the most visible location. Each open tab shows the favicon next to the page title.
• Bookmarks and favorites — when a user saves your site, the favicon appears in their bookmark bar or menu.
• Browser history — each visited site shows its favicon in the history panel for faster recognition.
• Mobile home screen — when someone "adds to home screen" on iPhone or Android, a larger favicon version becomes the shortcut icon.
• Search results (SERPs) — Google and Bing display favicons next to search results. A missing favicon gets a generic placeholder that reduces click trust.
• Browser address bar — some browsers show the favicon directly in the URL bar while you are on the site.

That is a lot of visibility for a 16-pixel icon. Getting it right is worth the five minutes it takes.

Where the Name "Favicon" Comes From

The word comes from "favorites icon" — a term introduced by Internet Explorer 5 in 1999. When users bookmarked a site to their IE Favorites folder, the browser fetched a file called favicon.ico from the site root to display alongside the bookmark.

The format spread quickly. Other browsers adopted it, the naming stuck, and "favicon" became the universal term for browser tab icons regardless of file format.

Modern favicons have evolved beyond the original ICO format. Today, PNG files work in all modern browsers, and most implementations include multiple sizes to cover tabs (16px, 32px), Apple home screens (180px), and Android/PWA icons (192px, 512px).

Sell Custom Apparel — We Handle Printing & Free Shipping

Why a Missing Favicon Hurts (and a Good One Helps)

A gray placeholder favicon signals an unfinished site — the web equivalent of a storefront without a sign. It creates the first visual impression even before users read a single word of your content.

A good favicon does three concrete things:

1. Improves tab identification. Users with many tabs open rely on favicons more than tab titles to find sites. A recognizable icon keeps your site easy to spot.
2. Builds bookmarking value. If someone bookmarks your site, a clean favicon makes it easy to identify at a glance in a crowded bookmark bar.
3. Supports search visibility. Google shows favicons in organic results. A professional-looking favicon alongside your result is a small but measurable trust signal.

For business sites, portfolio pages, and tools, there is no good reason to leave this blank.

What Makes a Favicon Work at 16 Pixels

The challenge with favicons is the size constraint. At 16x16 pixels, you have 256 total pixels to communicate your brand. The design rules that follow from that constraint:

• Simplicity first. Complex logos, wordmarks, and detailed illustrations do not survive the scale-down. A single bold symbol, letter, or icon mark works best.
• High contrast. Light icon on dark background, or dark icon on light background. Low-contrast favicons become invisible in certain browser themes.
• No thin lines. Thin strokes disappear at small sizes. Bold, thick shapes hold up better.
• Limited colors. One or two colors is ideal. Gradients that look smooth at large sizes become muddy blocks at 16px.

When in doubt, test your candidate design at 16px before committing. What looks great at 300px often looks like noise at actual tab size.

How to Create a Favicon for Free — Right Now

The fastest way: upload your logo or any image to a browser-based favicon generator, and it creates all the standard sizes for you — 16px, 32px, 48px, 180px, 192px, and 512px — in one step.

Or, if you do not have a logo yet, generate a text-based favicon from your initials or any emoji. No design skills required.

Once you have the files, add the following to your HTML <head>:

• <link rel="icon" type="image/png" href="/favicon.png"> for modern browsers
• <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iPhone home screen

That covers the vast majority of use cases. For full PWA coverage, you will also want a site.webmanifest file — most generators create that for you automatically.

Frequently Asked Questions

What does favicon stand for?

Favicon stands for "favorites icon" — the name coined by Internet Explorer 5 in 1999, when it used the favicon.ico file to label bookmarks saved in the browser's Favorites folder.

What is the best size for a favicon?

The standard tab favicon is 16x16 and 32x32 pixels. You also need 180x180 for Apple touch icon (iOS home screen) and 192x512 for Android and PWA icons. A good generator creates all of these from a single source image.

What format should a favicon be?

PNG works in all modern browsers and is the recommended format. ICO format adds backwards compatibility for very old browsers but is rarely necessary for new sites. SVG is increasingly supported but PNG is universally safe.

Does a missing favicon affect SEO?

Not directly — there is no confirmed ranking penalty. But Google displays favicons in search results, and missing ones get a generic placeholder that can reduce click-through trust compared to a clean branded icon.