What Is a Favicon? (And What Is favicon.ico?)
Published November 21, 2025 · Updated June 9, 2026
A favicon is the small icon in a browser tab. Learn what it is, where it appears, how favicon.ico differs from PNG and SVG icons, and which formats you need.
A favicon is the small icon a browser shows next to a page’s title — in the tab, the bookmarks bar, the history list, and on a phone’s home screen when someone saves your site. The name is short for “favorite icon.” It’s usually a 16×16 or 32×32 pixel version of your logo, delivered either as a classic favicon.ico file or as modern PNG and SVG icons.
In one line: a favicon is your website’s identity at icon size.
Here’s why that tiny graphic earns its place. Open twenty tabs and the titles shrink to nothing — the favicon is often the only thing you can actually see. A site without one shows a blank generic-document icon, so it blends into the crowd and quietly signals “unfinished.” A recognizable favicon is what lets someone flick back to your tab in half a second instead of hunting through ten that all look the same.
What is a favicon?
A favicon is a small graphic tied to a website or page. It was introduced in Internet Explorer 5 in 1999 to mark bookmarked (“favorite”) sites — hence the name — and it now appears in far more places than bookmarks:
- Browser tabs — the most common spot
- Bookmarks and the bookmarks bar
- Browser history and autocomplete suggestions
- The address bar in some browsers
- Home screen and desktop shortcuts when a site is saved or installed
- Search and AI results that show a site icon next to the listing
Think of it as the smallest possible expression of your brand — the logo equivalent of a handshake. It works alongside your name and color scheme to make your site instantly recognizable across a sea of open tabs and a long list of bookmarks.
What is favicon.ico?
favicon.ico is the original favicon file. The .ico extension is a Microsoft icon format, and its key trick is that a single .ico file can hold several image sizes at once — commonly 16×16, 32×32, and 48×48 — so the browser picks whichever fits the context.
The reason the name matters: browsers automatically look for a file called favicon.ico in your site’s root (for example, https://example.com/favicon.ico) even when your HTML never mentions it. That convention is why favicon.ico became the default for two decades — and why a missing one shows up as repeated 404 requests in your access logs.
favicon.ico vs PNG vs SVG
Modern sites rarely rely on one format. Here’s how the three compare:
| Format | Best for | Sizes | Browser support |
|---|---|---|---|
ICO (favicon.ico) | Legacy fallback; auto-requested from root | Bundles 16/32/48 in one file | Universal |
| PNG | Crisp tab icons and PWA/home-screen icons | Separate file per size (16–512) | Universal |
| SVG | One scalable icon; supports dark-mode tricks | Single resolution-independent file | Chrome, Edge, Firefox; partial in Safari |
The short version: use PNG for the everyday icons, keep one favicon.ico as a fallback, and add an SVG if you want it razor-sharp on every display. A favicon generator produces all three from a single source so you don’t hand-export a dozen files. (SVG favicon details →)
Where favicons appear in modern browsers
Favicons have spread well beyond the tab. You’ll find them in:
- Chrome — tabs, bookmarks bar, history, new-tab shortcuts
- Firefox — tabs, bookmarks, history, address bar
- Safari — tabs, bookmarks, reading list
- Edge — tabs, favorites, collections
- iOS — the home screen, via the 180×180 Apple touch icon
- Android — home screen and app drawer for installed PWAs (192×192 and 512×512)
- The desktop OS — Windows taskbar/Start and the macOS Dock for pinned web apps
Each surface can request a different size, which is exactly why a single 16×16 icon isn’t enough anymore — scaled up to a 512×512 home-screen tile, it turns to mush.
Do you actually need a favicon?
Strictly, no — your pages load fine without one. Practically, yes, for three reasons:
- Recognition. It’s how users pick your tab out of a crowded window in a single glance.
- Credibility. A blank icon reads as half-built; a sharp one reads as a real, maintained site.
- Clean logs and clean results. Without one, browsers fire 404s at
/favicon.ico, and search and AI listings fall back to a placeholder icon next to your name.
None of that moves search rankings directly — favicons aren’t a ranking factor — but they do affect whether people click and come back. (More on that in the favicon SEO guide.)
How to create a favicon from your logo
The workflow is short:
- Start square and large. Use a 512×512 (or bigger) version of your logo. Rectangular logos need a square crop or padding.
- Simplify for small sizes. At 16×16 a detailed logo becomes noise. Lean on one bold shape, strong contrast, and few colors.
- Export every size and format. You need 16×16, 32×32, 180×180, 192×192, 512×512, plus a multi-size
favicon.ico. - Add the HTML. Reference the icons with
<link rel="icon">and<link rel="apple-touch-icon">tags in your<head>.
Doing that by hand means resizing, naming, and exporting a dozen files correctly. FaviconBuilder does the whole set from one upload — every size, every format, and the exact HTML to paste — free and without an account. (Step-by-step: create a favicon from an image →)
Summary
A favicon is the small icon that represents your site in browser tabs, bookmarks, and home screens — and it’s a small but real part of how trustworthy and findable your site feels. The legacy favicon.ico still matters as a fallback, but modern sites pair it with PNG and SVG icons in several sizes to cover every browser and device.
Continue reading:
Frequently asked questions
Is a favicon required for a website?
Not technically — your site will still load without one. But browsers automatically request /favicon.ico, so a missing favicon means a generic blank icon in the tab and a steady trickle of 404s in your server logs. Every production site should have one.
What size should a favicon be?
Design from a 512×512 source, then ship at least 16×16 and 32×32 for browser tabs, 180×180 for Apple touch icons, and 192×192 plus 512×512 for PWAs. See the favicon sizes guide for the full chart.
Is favicon.ico still needed in 2026?
Yes, as a fallback. Browsers still auto-request /favicon.ico from your site root, so keeping one avoids 404s and covers older clients. Pair it with PNG and SVG icons for modern browsers.
What's the difference between a favicon and an app icon?
A favicon identifies your site inside browser UI — tabs, bookmarks, history. An Apple touch icon or PWA icon (180–512px) represents your site when someone saves it to a phone home screen. Modern sites need both.
Can I use an emoji or a single letter as a favicon?
Yes. An SVG favicon can hold an emoji or a styled letter, which is a fast option for prototypes and internal tools — see how to make an emoji or letter favicon. For a real brand, a proper logo-based icon is worth the few extra minutes.