What is a favicon

A favicon is the small square icon that represents a website: the picture in the browser tab next to the page title, in a bookmark list, in a history list, beside a result in search, and on a home screen when someone saves the site as an app. The word is short for "favorites icon", from the days when the bookmark menu was called Favorites. Today a favicon is less one image than a small family of files, each made for one of those places, and all of them drawn from the same artwork.

This guide explains what a favicon is, what the word means in practice in 2026, which files a modern site needs, and which popular claims about favicons are measured fact versus repeated folklore. Every file name, size and byte count below comes from icon packages we generated with our own tool and then opened and inspected, not from other articles.

Favicon meaning: where the word comes from

The favicon meaning is literal: a favorites icon. Early bookmarks were stored in a menu named Favorites, and a site could supply a tiny picture to show next to its entry there. The convention was simple. A file named favicon.ico sat at the root of the site, and the browser looked for it there.

The name stuck long after the menu was renamed. When people say favicon today they usually mean any of these:

• the icon in the browser tab,
• the icon next to a bookmark or a history entry,
• the icon shown beside a site in search results,
• the icon used when a site is saved to a phone or desktop home screen,
• the icon an installable web app shows in its launcher.

Those surfaces want different sizes and, in a couple of cases, different files. That is why a favicon became a set rather than a single image, and why the honest definition of a favicon is "the icon set that represents your site", not "a 16 pixel picture".

What is a favicon file, technically

A favicon file is an ordinary image that the page points to with a link element in its HTML head, or that sits at the well-known address /favicon.ico. The HTML standard defines the icon link type for this: a link rel="icon" element tells the user agent which image represents the page, and it may carry sizes and type attributes so the right file can be chosen from several.

The standard also keeps the old convention alive. When a page has no link rel="icon" at all, the HTML standard lets the user agent fetch /favicon.ico from the root of the site instead. So a favicon.ico at the root is still worth shipping even when every icon is also linked properly: it covers the case where nothing links to it, and it is the address tools and crawlers try first.

Three file formats do almost all of the work:

• ICO, a container format that holds several bitmaps of different sizes in one file. This is the traditional favicon.ico.
• PNG, used for the standalone sizes, the home screen icon, and the app icons a web app manifest lists.
• SVG, a vector format, useful when the source artwork is already a vector.

You can read the details of the container in our guide on converting PNG to ICO, which opens a real favicon.ico byte by byte.

Favicon icon vs logo: what the difference is

A favicon icon is not the same thing as a logo, even when it is made from one. A logo is designed to be read at the size of a page header or a business card. A favicon is shown at sizes as small as 16 by 16 pixels, which is 256 pixels in total. A wordmark, a slogan or a detailed illustration does not survive that.

What does survive at 16 pixels:

• one letter or a short monogram,
• a single bold shape,
• strong contrast between the mark and its background,
• a square composition, because every favicon slot is square.

That is why many brands keep a separate "icon" version of their logo: the symbol without the name, or the first letter in the brand typeface. If your project has no logo yet, a plain letter on a solid square is a respectable placeholder. Our free monogram letters favicon pack has all 26 letters ready to use, and the free favicon packs page has shapes, number badges and color dots too.

What files a favicon needs in 2026

A modern favicon set is small. The package our tool produces from one image contains exactly these files, and every one of them has a job:

That is ten files when the source is an SVG and nine when it is a raster image. Packages that hand back dozens of files are mostly shipping legacy sizes and tile images that nothing in the page links to. Our favicon size guide walks through each file and the reasoning behind its size.

How big is a favicon file

A favicon file is tiny. These are the byte counts from a package we generated from a simple two-color square logo, a 1024 by 1024 PNG:

The whole ZIP, manifest and snippet included, was 25,273 bytes. A detailed photo-like source compresses less well, so its PNGs come out larger, but the order of magnitude holds: a full favicon set weighs less than a single ordinary photo on the same page.

One number in that table surprises people. The favicon.ico was exactly 15,086 bytes in every test we ran, for a flat color square and for a busy design alike. The reason is inside the file: its three layers are stored as uncompressed 32-bit bitmaps, so their size depends only on their pixel dimensions, never on the picture. The PNG to ICO guide shows the arithmetic.

Why a website needs a favicon

A website needs a favicon because the icon is the only part of your brand that appears in places you do not control. A visitor with twenty tabs open finds yours by its icon, not its title, because titles get cut down to a few characters. A bookmark list is a column of icons with text beside them. Search results show a small icon next to each site name. A site with no favicon shows a generic placeholder in all of those places, and a generic placeholder reads as unfinished.

There is a practical reason too. When no icon is linked, the standard fallback is a request for /favicon.ico. If that file does not exist, every one of those requests is a 404 in your server logs. Shipping the file ends the noise.

Favicons in Google search results

Google shows a favicon next to the site name in many search results, and it publishes its own rules for which icon it uses. Google Search Central's favicon documentation, as of this writing, says:

• the favicon must be square, a 1:1 aspect ratio, and at least 8 by 8 pixels,
• Google recommends a favicon larger than 48 by 48 pixels "so that it looks good on various surfaces",
• the icon is declared with a link element on the home page, and both the home page and the icon file must be crawlable, not blocked by robots.txt,
• Google supports one favicon per site, where a site is a hostname,
• the favicon URL should be stable, and a change can take from several days to several weeks to show up after recrawling.

Those are Google's published rules for its own search results, quoted from its documentation rather than guessed. The 48 pixel layer inside our favicon.ico and the larger PNGs in the package both sit comfortably inside them. You can read the source page at Google Search Central.

What is folklore and what is fact

Almost every article about favicons states, as fact, exactly which size each browser and operating system picks for each surface. Those claims are repeated from page to page, many are years old, and few cite a test. Our rule on this site is plain: we do not state what a specific browser or device does with an icon unless we have measured it ourselves and written the measurement down. Until then, we write about what we can verify.

What can be verified without guessing:

• What the standards say. The HTML standard defines rel="icon", the sizes attribute, and the /favicon.ico fallback. The W3C Web App Manifest defines the icons list and the purpose values any, maskable and monochrome.
• What a published platform rule says. Google's favicon rules above are its own words.
• What is inside a file. Pixel dimensions, layer counts and byte sizes can be read straight out of the file, and we read them back from the encoded bytes every time a package is made.

This is also why our package is short. A file earns its place by being referenced in a standard or in a published platform rule, not by being on a list that has been copied for a decade.

How to make a favicon

You make a favicon by starting from one square image and producing every size from it, so all of them match. The steps are the same whatever tool you use:

1. Start from a square source. A square PNG, JPG or WebP of 512 by 512 pixels or larger, or an SVG with a viewBox, gives every size a clean downscale. A smaller source has to be enlarged for the 512 pixel icons and comes out soft.
2. Simplify for small sizes. Check how the mark reads at 16 and 32 pixels. Thin lines and small text disappear first.
3. Produce the set. That means the layered ICO, the standalone PNGs, the 180 pixel touch icon, the two manifest icons and a maskable icon with padding around the artwork.
4. Write the manifest and the link tags. Every file should be reachable from the page head, directly or through the manifest.
5. Upload the files to the root of your site and paste the tags into your HTML head.

Our free favicon maker on the home page does steps 3 and 4 from a single upload, with no account, and returns a ZIP and a paste-ready head snippet. If your source is not square, it is scaled to fit and padded with transparency rather than cropped, so nothing in your logo is cut off, and the tool tells you it did that. Step 5 is covered in our guide on how to add a favicon in HTML.

What a maskable icon is

A maskable icon is an app icon made so that the platform may crop it to its own shape, a circle, a rounded square or something else, without cutting into the artwork. The W3C Web App Manifest defines a safe zone for this: a circle in the center of the icon with a diameter of 80 percent of the icon's width. Anything outside that circle may be masked away.

So a maskable icon is the same artwork drawn smaller, inside the central 80 percent, with the margin filled with a solid color. In our package the icon-maskable-512.png has the artwork scaled into a 410 pixel square in the middle of the 512 pixel canvas, and the margin is filled with the manifest background color, because a cropped shape with transparent corners looks like a rendering fault.

What the web app manifest is

The web app manifest is a small JSON file that describes a site as an installable app: its name, a short name for tight spaces, its colors, and the list of app icons. The page points to it with link rel="manifest". The manifest in our package lists three icons, the 192 and 512 pixel PNGs and the maskable 512, and carries the name, short name, theme color and background color you enter before generating. The W3C specification describes short_name as the name used "where there is insufficient space to display the full name", and background_color as the color meant to improve the experience "while a web application is loading".

You do not need to build an installable app to benefit from the manifest. Linking it costs one line, and it is where the larger icons are declared.

What is a favicon used for on a phone

On a phone, the favicon family is used in two extra places beyond the browser tab: home screen shortcuts and installed web apps. The apple-touch-icon link points to a 180 by 180 PNG; Google's documentation lists apple-touch-icon among the link types it reads as well. The manifest icons cover installed web apps.

Whether a given phone rounds the corners of your icon, adds a background behind transparent areas, or picks one file over another is exactly the kind of device behavior we hold until it is measured. What we can say is what the files contain: our touch icon keeps your transparency as it is, and our maskable icon is padded to the safe zone defined in the specification.

Common favicon mistakes

The most common favicon mistakes are small and easy to fix:

• Shipping only one size. A single 16 pixel PNG looks blurry when it is scaled up for any larger surface.
• Using a non-square image. Every favicon slot is square. A wide logo either gets squeezed or padded; padding is the honest choice.
• Detail that vanishes at 16 pixels. Test the smallest size before you ship.
• No /favicon.ico at the root. Even with link tags, the root file covers the fallback request.
• Changing the icon URL often. Google's guidance asks for a stable favicon URL. If you replace the image, keeping the same file name is simplest.
• Blocking the icon in robots.txt. Search cannot show an icon it is not allowed to fetch.

If a new icon does not appear after you upload it, the cause is usually caching somewhere between the server and the screen. Our guide on adding a favicon in HTML has a checklist for that.

Favicons for developers and teams

For one site, a browser tool is all you need. For a team that ships many sites, or a product that lets its own customers upload a logo, the same package can be produced from code. Our favicon API guide shows the request, the JSON response and how to wire it into a build step. The API is part of the paid plans on the pricing page; the browser tool stays free.

The short answer

What is a favicon? It is the set of small square icons that represent your website in browser tabs, bookmarks, search results and home screens, declared in your HTML head and anchored by a favicon.ico at the root of your site. A good set is short, made from one square source, and every file in it is there because a standard or a published rule asks for it. To make yours, drop an image into the free favicon maker and paste the snippet it gives you.