What does the word favicon mean?

It is short for favorite icon. Internet Explorer 5 introduced it in 1999 so bookmarks — which Microsoft called Favorites — could show a small picture next to each site. The browser simply asked every site for a file called favicon.ico at its root and used whatever came back. Browsers show it in the tab now rather than only in bookmarks, but the name and the guessed filename both stuck.

What size should a favicon be?

There is no single size, which is the part that surprises people. Six cover everything in normal use: 16 and 32 pixels for the tab, 48 for Windows shortcuts and for the icon Google shows beside search results on phones, 180 for the iOS Home Screen, and 192 and 512 for Android. Start from one square image of at least 512 pixels and generate the rest from it, because every one of those is a downscale of the same picture.

Can I just use one large PNG for everything?

You can, and it will mostly work, but you give up two things. The browser does the downscaling itself with no say from you, so the 16 pixel version is whatever the automatic average produces rather than something you checked. And anything that guesses instead of reading your HTML — some feed readers, chat apps, bookmarking services and older software — asks for favicon.ico by name and finds nothing.

Why is my new favicon not showing up?

Almost always caching. Browsers store favicons separately from pages and hold on to them for a long time, so a normal reload, and often a hard reload, changes nothing. Open the icon file directly by URL and reload that page, which refreshes the cached copy. If it is still the old one, check that the file really is where the link tag says it is, and that a CDN in front of your site is not serving the previous version.

Does a favicon matter for search?

A little, and not in the way ranking factors are usually meant. Google shows the icon next to your result in mobile search, so a missing or unreadable one costs you a small amount of recognition on a page full of competitors who have one. It does not move your position. Treat it as presentation rather than optimization.

What is a favicon?

The small square in the browser tab, the six files a site is really asked for — and the part nobody warns you about, which is that 16 pixels is 256 pixels in total and your logo almost certainly needs more than that.

By Free Image Lab · August 8, 2026

The short answer

A favicon is the small image a browser shows next to a page’s title: in the tab, in the bookmark list, in history, and on the phone Home Screen if someone saves your site there. The name is short for favorite icon.

It is not one file. Different places want the same picture at different sizes, and a browser will happily invent the missing ones badly if you only give it one. In practice a site wants six squares and two lines of HTML, all made from a single source image.

You can produce the whole set with our favicon generator, which does the sizing and the packing in your browser. The rest of this page is the part a generator cannot do for you: deciding what the picture should be.

The sizes a site actually needs

Every one of these is the same square image at a different scale. Nothing here is optional in the sense of being exotic — each one is something real that asks for an icon and gets a blurred guess if you leave it out.

16 pixels — the browser tab: The one everybody pictures, and the one that decides whether your favicon works. Also used in the bookmark bar and the address bar history dropdown.
32 pixels — the same tab on a sharper screen: A modern laptop or phone packs two device pixels into every one the page uses, so the 16 pixel slot needs a 32 pixel image to look crisp. Windows also uses this size for taskbar shortcuts.
48 pixels — Windows shortcuts, and Google: The size Windows uses when someone saves your site to the desktop. Google also asks for at least 48 pixels for the icon it puts beside your result in mobile search.
180 pixels — the iPhone and iPad Home Screen: Declared as apple-touch-icon. iOS scales this one down for smaller devices, so a single 180 covers them all. It gets rounded corners applied by the system, so supply a plain square and let iOS do the rounding.
192 and 512 pixels — Android: These two are named in a web app manifest rather than in your HTML. Android uses 192 on the home screen and 512 for the splash screen and install prompt.

Work from one square master of at least 512 pixels and make everything from it. If your source is a vector logo, render the SVG to PNG at 512 rather than exporting a small copy and enlarging it. If it is already a large picture, an image resizer gets it to a square 512 first.

Icons get masked, so keep the corners empty

Android crops home screen icons into whatever shape the phone maker chose — a circle on some, a rounded square on others — and iOS rounds the corners itself. Anything sitting in the corners of your square can simply disappear. Keep the mark in the middle with a margin around it. If you genuinely want a round icon, crop it to a circle yourself and leave the corners transparent, rather than trusting each system to round it the way you imagined.

ICO, PNG or SVG

Three formats are in play and they are not alternatives so much as layers. A site in good shape has all three.

favicon.ico — the fallback that needs no HTML: An .ico file is a container that holds several square images at once, so whatever is displaying it can take the size it wants from one file. That sounds redundant now, but it is the only icon anything can find without reading your page: software that guesses asks for /favicon.ico at the root of your domain by name. Keep one there.
PNG — what browsers actually use day to day: Declared in your HTML at specific sizes. PNG is the right format here because it is lossless and supports transparency, both of which matter at this scale. Never use a JPG: it has no transparency, and its compression smears exactly the kind of hard edges a tiny icon is made of.
SVG — one file, sharp at any size: Most current browsers accept an SVG favicon, and because it is drawn fresh at whatever size is needed it never softens. It can even carry a dark mode variant inside itself. Safari has been the slow one to support this, so treat the SVG as an addition to the PNGs and the ICO rather than a replacement for them.

Why a logo that looks fine on a card turns to mud

Here is the arithmetic that explains almost every disappointing favicon. A 16 pixel icon is 16 by 16, which is 256 pixels in total. A business card printed at 300 dots per inch gives that same logo something like half a million. You are not shrinking the design, you are asking it to survive on a thousandth of the information.

What goes first is predictable. Text disappears before anything else — a letterform needs roughly ten pixels of height to stay recognizable, so a company name is gone at any tab size. Thin outlines average themselves into gray and vanish. Gradients flatten. Two shapes with a small gap between them merge into one blob. Fine detail does not get smaller, it gets averaged away.

The important consequence: this is not a resizing problem and no resizer fixes it. Downscaling is doing the correct thing. What you need is a different drawing, and every brand you can name has one. Look closely at the icons in your own tab bar and you will find single letters, bare monograms and one simple shape, not miniature versions of the logos those companies put on signs.

So, in order of how much each one buys you:

Drop the words. Keep the symbol, or one letter of the name. This is the single change that rescues most favicons.
Thicken every line. A stroke thinner than about two pixels at the final size will not survive as a solid color.
Raise the contrast and simplify the colors. Two or three flat colors read at 16 pixels. A gradient does not.
Open up the gaps. Anything separated by a hair will close up. Exaggerate the spacing until it survives.
Fill the square. A little margin is fine; a lot means your mark is being rendered at ten pixels inside a sixteen pixel box.

Judge it at real size, on both a light and a dark tab

A 16 pixel icon viewed at 800% in a design app looks like a design. It tells you nothing about what it looks like in a tab. Preview at actual size before you ship, and check it against a dark background too — a dark navy mark that reads perfectly on white becomes a smudge on a dark tab strip, which is what a good half of people are looking at.

Where the files go

Put the icons in the root of your site — the same folder your home page is served from — and declare them in the <head> of every page. Use paths that start with a slash, such as /favicon.ico, so they still resolve from a page deep in the site rather than being looked for in whatever folder that page happens to sit in. That one detail is a common cause of an icon that works on the home page and nowhere else.

You need a link tag for the PNGs and the SVG, one for the Apple touch icon, and a manifest file listing the 192 and 512 pixel icons. Our favicon generator writes those tags out for you and puts them in the download alongside the images, so you are not reconstructing them from memory a week later.

If you are on a website builder or a content system such as WordPress, Squarespace or Shopify, do not paste anything into a template. All of them have a setting — usually called a site icon — that takes one square image and handles the rest. Feed it the 512 pixel square.

When the new one refuses to appear

You uploaded it, you can see the file, and the tab still shows the old icon or a blank sheet of paper. In rough order of likelihood:

Your browser has cached it, hard: Favicons are cached separately from pages and kept far longer, and a normal reload does not touch them. Open the icon file directly by URL and reload that — it refreshes the stored copy. Failing that, a different browser or a private window shows you the truth in five seconds.
Something in front of your site is still serving the old file: A CDN or a caching plugin will keep handing out the previous version long after you replaced it. Purge the cache and check again. Loading the file directly tells you which side the stale copy is on.
The file is not where the HTML says it is: Open the path from your link tag in the address bar. If it does not load, nothing else you try matters. Watch for a relative path, an uploads folder the file was placed in automatically, or a name that picked up a suffix on upload.
It is the wrong shape or the wrong format: A non-square icon gets squashed or ignored, and a JPG renamed to .ico is not an ICO file. Start from a real square — the square cropper makes one from any photo — and generate the icons from that.

Give it a few minutes too. Even after everything is correct, some browsers will hold the old icon until the tab is closed and reopened.

Frequently asked questions

What does the word favicon mean?: It is short for favorite icon. Internet Explorer 5 introduced it in 1999 so bookmarks — which Microsoft called Favorites — could show a small picture next to each site. The browser simply asked every site for a file called favicon.ico at its root and used whatever came back. Browsers show it in the tab now rather than only in bookmarks, but the name and the guessed filename both stuck.
What size should a favicon be?: There is no single size, which is the part that surprises people. Six cover everything in normal use: 16 and 32 pixels for the tab, 48 for Windows shortcuts and for the icon Google shows beside search results on phones, 180 for the iOS Home Screen, and 192 and 512 for Android. Start from one square image of at least 512 pixels and generate the rest from it, because every one of those is a downscale of the same picture.
Can I just use one large PNG for everything?: You can, and it will mostly work, but you give up two things. The browser does the downscaling itself with no say from you, so the 16 pixel version is whatever the automatic average produces rather than something you checked. And anything that guesses instead of reading your HTML — some feed readers, chat apps, bookmarking services and older software — asks for favicon.ico by name and finds nothing.
Why is my new favicon not showing up?: Almost always caching. Browsers store favicons separately from pages and hold on to them for a long time, so a normal reload, and often a hard reload, changes nothing. Open the icon file directly by URL and reload that page, which refreshes the cached copy. If it is still the old one, check that the file really is where the link tag says it is, and that a CDN in front of your site is not serving the previous version.
Does a favicon matter for search?: A little, and not in the way ranking factors are usually meant. Google shows the icon next to your result in mobile search, so a missing or unreadable one costs you a small amount of recognition on a page full of competitors who have one. It does not move your position. Treat it as presentation rather than optimization.

Tools for this

Free, and everything runs in your browser.

← All guides