What is a favicon, and which sizes do you need?

With ten tabs open in your browser, how do you tell which one is which site? The titles are squeezed so narrow that all you really see is the tiny square icon on the left. That icon is called a favicon, and it is the smallest yet most frequently seen part of your site.

Almost everyone building a new site leaves it until last, then finds a blank page icon sitting in the tab and does not know what to do about it. This article closes two questions at once: what exactly that file is, and how to produce it in the right sizes from the logo you already have.

One icon, four different places

A favicon is not only used in tabs. The same mark turns up in several places at different sizes, and each place has its own space.

In the tab the icon appears at its smallest; what has to be readable there is not detail but silhouette. Added to bookmarks it shows a little larger, next to the name. If a visitor adds your site to a phone's home screen, the icon is displayed quite large, like an app icon. The fourth place, the one most people overlook, is search results: on mobile searches your icon appears beside the site name.

These four places have different dimensions, and that is precisely why a favicon is thought of not as one image but as a set of a few sizes of the same mark.

Which sizes do you actually need?

In practice the working core is squares of 16, 32 and 48 dots. The tab uses 16, the bookmarks and address bar side uses 32, and desktop shortcuts use 48. If you expect people to pin your site to a desktop, a 64 version can be added as well.

The icon in search results follows a separate rule. Google asks that the site icon it shows in search results be at least 48 dots on a side and prepared as a square that is a multiple of 48; if you offer something smaller, your icon may not appear in results at all. In other words, an old-style file holding only 16 and 32 will do its job in the tab while leaving you invisible in search.

Shortcuts added to a phone's home screen use a separate, larger, standalone PNG; that file is independent of the tab icon and is usually prepared at around 180 dots.

Google's published requirements for the site icon shown in search results →

Why are they all bundled into one file?

A single icon file can hold several sizes of the same image together, and the browser picks whichever size it needs from inside it. That is both shorter and sturdier than placing a separate file for every size and writing a separate line for each in the page.

The second reason is habit. One of the oldest conventions of the web is that a browser will look for a file named "favicon.ico" at the root of a site all by itself. That request goes out even if you write nothing in your page; if the file is missing, your server logs fill with not-found errors.

So the sturdiest setup is to do both: a multi-size icon file at the root, alongside a large enough PNG for search results and for phones.

Designing a mark that reads at small size

The only hard part of favicon design is scale. The square in a tab is barely bigger than one letter of this line; your whole logo will not fit into it.

The move is not to shrink the logo but to simplify it. Take the first letter of the company name, a single part of the emblem, or the most recognisable shape in the logo, on its own. Thicken thin lines, drop details, settle for two or three colours. A logo shrunk together with its typography becomes an unreadable smudge; the emblem of that same logo stands perfectly clear.

The practical way to check: shrink the square you have made to about half the size of your fingernail on screen and look at it. If you cannot make out what you are seeing at that scale, neither will your visitors.

• Use a single letter or a single emblem, not the full logo
• Avoid thin lines and shadows, they vanish when shrunk
• Leave the background transparent so no white box shows in dark themes
• Fill the square properly, leaving no needless margin
• Do not pick a mark that resembles a competitor's

Producing an icon file from the logo you have

The order of work is simple. First prepare the largest, squarest version of your logo you can; a PNG with a transparent background is ideal. If you have a vector file, exporting a generously wide square PNG from it is the cleanest start, because shrinking is always safe and enlarging is not.

Then hand that PNG to the Favicon Generator; the tool gathers the sizes you want into a single icon file. Put the result in the root folder of your site and most browsers will find it on their own.

You may also face the opposite situation: you have an icon file but need the image inside it as a plain PNG. The ICO to PNG tool separates out the versions inside the file and hands them to you; use that route to put the mark into a presentation, a document or a design file.

One last warning: after changing the icon you may keep seeing the old one in the tab. Browsers hold this file in their own memory for a long time. To see the new version, close the tab and open it again; if that fails, type your site address followed by favicon.ico in the address bar to open the file directly, then refresh the page.

Frequently asked questions

What size should a favicon be?

The core set is 16, 32 and 48 dots; tabs, bookmarks and desktop shortcuts use those. If you want to appear in search results, also keep a version that is at least 48 dots on a side and square in a multiple of 48.

How do I create a favicon?

Prepare a square PNG of your logo with a transparent background and hand it to the Favicon Generator; the tool gathers the sizes into one file. Placing that file in the root folder of your site is enough.

I changed my icon but the tab still shows the old one. Why?

The browser keeps this file in memory. Close the tab and open it again; if it persists, type your site address followed by favicon.ico in the address bar to open the file directly, then refresh.

I do not have a website. Do I still need this file?

Even a blog, a portfolio page or a single-page introduction appears in a tab. A site without an icon sits there as a blank page symbol, which makes it harder for a visitor to find you among their tabs.

Can I get the images back out of an ICO file?

Yes. The ICO to PNG tool gives you the versions inside the file as separate images; you can take just the largest one or all of them at once.

Last updated: August 27, 2026