What does favicon mean?

Favicon is short for favorite icon. It is the small square image a browser shows next to your page title in a tab, in the bookmarks bar, in history, and beside your result in search engines like Google.

What is a favicon used for?

A favicon identifies your site at a glance. It appears in browser tabs, bookmarks, history, autocomplete, home-screen shortcuts on phones, installed Progressive Web Apps, and search results - making your site easy to spot and reinforcing your brand.

What format and size is a favicon?

The classic format is favicon.ico, a multi-resolution container holding 16x16, 32x32 and 48x48. Modern sites also use PNG favicons, a 180x180 Apple touch icon, 192x192 and 512x512 PWA icons, and increasingly an SVG favicon that adapts to dark mode.

How do browsers find a favicon?

Browsers look for tags in your page's , and automatically request /favicon.ico from the site root even without a link tag. When several sizes are offered, the browser picks the one closest to the size it needs.

Back to generator

What Is a Favicon?

A favicon (short for "favorite icon") is the small square image a browser shows next to your page title - in tabs, bookmarks, history, and beside your result in search engines. It is the smallest, most visible piece of branding your site has. This guide is the quick definition: what it is, where it appears, the formats, and how browsers choose one.

Last updated: 13 June 2026

Favicon meaning

The word favicon is a contraction of "favorite icon."The name dates to the late 1990s, when Internet Explorer began showing a tiny icon next to bookmarks (then called "favorites"). Today a favicon is simply the small icon that represents your website wherever a browser or operating system needs to show it in a compact space.

It is the smallest branding you will ever ship and one of the most visible. People scan tabs constantly. A crisp, recognizable favicon makes your site easy to find among twenty open tabs; a blurry, generic, or missing one quietly erodes trust.

Where a favicon appears

Browser tabs - next to the page title, the most common place you see one.
Bookmarks and the bookmarks bar - so saved sites stay recognizable.
History and address-bar autocomplete - helping users re-find your site.
Search results - Google shows a favicon beside your listing on mobile and some desktop surfaces.
Home-screen shortcuts - on iOS and Android when someone saves your site to their phone.
Installed Progressive Web Apps - as the app icon and on the splash screen.

Favicon formats

"A favicon" is no longer a single file. A small, well-chosen set covers everything:

favicon.ico - the legacy multi-resolution container, usually holding 16x16, 32x32 and 48x48. It is the universal fallback and lives at the site root.
PNG favicons - crisp raster icons (16, 32, and often 48 or 96) declared in the page <head>.
SVG favicon - a single scalable vector icon that stays sharp at any size and can even adapt to dark mode.
Apple touch icon - a 180x180 PNG for iOS home screens.
Android / PWA icons - 192x192 and 512x512 PNGs declared in a web app manifest.

For the full breakdown of which dimensions to ship, see the favicon sizes guide.

How browsers pick a favicon

Browsers discover a favicon in two ways. First, they read <link rel="icon"> tags in your page's <head>, each declaring a file, type, and size. Second, even with no link tag, every browser automatically requests /favicon.ico from the site root. When you offer several sizes, the browser selects the one closest to what it needs - so providing a couple of purpose-built sizes beats scaling one giant image down. Browsers and CDNs also cache favicons aggressively, so a changed icon can take a hard refresh to appear.

How to add a favicon (the short version)

The universal recipe is the same on every platform: generate a complete icon set, upload the files to your site root, and add the <link> tags to your <head>. A minimal modern set looks like this:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

That is the gist. For the complete, step-by-step walkthrough - including Next.js, common mistakes, and verification - read the complete favicon guide or our umbrella how to add a favicon hub.

Frequently asked questions

What does favicon mean?: Favicon is short for favorite icon. It is the small square image a browser shows next to your page title in a tab, in the bookmarks bar, in history, and beside your result in search engines like Google.
What is a favicon used for?: A favicon identifies your site at a glance. It appears in browser tabs, bookmarks, history, autocomplete, home-screen shortcuts on phones, installed Progressive Web Apps, and search results - making your site easy to spot and reinforcing your brand.
What format and size is a favicon?: The classic format is favicon.ico, a multi-resolution container holding 16x16, 32x32 and 48x48. Modern sites also use PNG favicons, a 180x180 Apple touch icon, 192x192 and 512x512 PWA icons, and increasingly an SVG favicon that adapts to dark mode.
How do browsers find a favicon?: Browsers look for <link rel="icon"> tags in your page's <head>, and automatically request /favicon.ico from the site root even without a link tag. When several sizes are offered, the browser picks the one closest to the size it needs.

Make yours in seconds

Now that you know what a favicon is, making one is the easy part. Drop your logo into the Logo2Favicon generator and download a complete favicon and app icon set - favicon.ico, every PNG size, the Apple touch icon, the Android and maskable icons, the manifest, and ready-to-paste HTML - generated entirely in your browser, free, with nothing uploaded.

Keep exploring: the complete favicon guide, the favicon sizes reference, all guides, or the FAQ.