How to Make a Favicon That Stays Sharp at 16 Pixels

A favicon spends its whole life at 16 by 16 pixels. That is 256 pixels in total, less than one hundredth of one percent of the image your camera produces. Almost every favicon problem, from the blurry tab icon to the generic globe fallback, comes from ignoring how small that canvas really is.

This guide covers how to make a favicon properly: which files a complete set needs, where each one shows up, and what we learned by running a real logo through our own favicon generator and measuring the output.

Why one favicon.ico is no longer enough

For years a favicon meant a single favicon.ico file in your site root. Browsers still read that file, but it is now the fallback, not the whole job. Different places pull different sizes, and if the size they want is missing, they either upscale something tiny (blurry) or show a placeholder (worse).

Here is where each file in a modern set actually gets used:

Skip the large sizes and everything still works in a desktop tab. The gap only shows up later, when someone saves your site to their phone home screen and gets a stretched, fuzzy version of your 32 px icon.

What happened when we ran a real logo through the generator

To keep this practical, we tested with the kind of file most people actually have: a square 1024 by 1024 PNG logo mark, 633 KB on disk, bold shape on a gradient background. Settings: white background color, 10 percent padding, rounded corners on the iOS icon left on.

The zip contained eight files. We unpacked it and measured each one:

Two things stood out. The complete set weighs about 110 KB, less than a fifth of the single source image it came from. And the file doing the most visible work, the 16 px tab icon, is 632 bytes. It is smaller than the paragraph you are reading.

The practical takeaway: there is no performance excuse for skipping sizes. The whole set costs less than one photo thumbnail.

The 16-pixel problem

Here is the part that decides whether your favicon looks professional or like a smudge. We generated icons from two different sources: the bold single-letter logo from the test above, and a regular photograph. Both scaled down to 16 px, then zoomed back up so you can see the individual pixels:

The logo is still obviously a letter K in a rounded square. The photo has become colored noise. Nothing about the photo was wrong; it simply contains thousands of details, and 256 pixels cannot hold thousands of anything.

That leads to a few design rules that hold up in every test we have run:

• One shape or one letter. If your full logo has a wordmark, use only the mark or the first letter. Nobody can read text at 16 px.
• High contrast. A light glyph on a saturated background survives scaling much better than subtle tone-on-tone colors, which average into grey.
• No thin lines. Anything thinner than about 1/16th of the image width simply disappears at tab size.
• Fill the frame. Detail you can afford at 180 px is gone at 16. Design for the smallest size and let the big ones inherit the boldness.

If your logo is not square, crop it square first with the image crop tool, because favicons are square and a rectangular source gets distorted or letterboxed. If the mark sits on a busy background, cutting it out with the background remover first makes a noticeably cleaner icon.

What the padding and background settings are actually for

The generator has three controls, and it is worth knowing when to touch them.

Padding insets your artwork inside the icon square. We used 10 percent in the test because our mark ran edge to edge, and home screen icons with zero breathing room look cramped next to native apps. If your source already has margin built in, leave it at zero, otherwise the double margin makes the icon look small.

Background color only matters if your source has transparency. Tab icons keep the transparency, but the iOS home screen icon cannot: Apple flattens transparent regions to black, which has ruined many dark logos. The tool fills the iOS icon with your chosen color instead. Pick the color your logo normally sits on. There is more on how transparency behaves across formats in our PNG transparency guide.

Round corners on iOS icon pre-rounds the 180 px icon to match the Apple mask shape. iOS rounds the corners regardless, so this mainly changes how the file looks if it is ever used somewhere Apple is not doing the masking.

Installing the files takes two minutes

Everything in the zip goes into your site root folder, next to your index file. Then paste the snippet the tool gives you into the head of your pages. This is the exact snippet from our test run:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="theme-color" content="#ffffff">

One thing people miss: browsers cache favicons aggressively. If you replace an old favicon and still see it, that is nearly always the cache, not the code. A hard refresh usually fixes it; on stubborn setups it can take a day to update on its own.

Mistakes we keep seeing

Using a photo. As the comparison above shows, photographs do not survive 16 px. Use a mark, a letter, or a simple symbol.

Starting from a tiny source. A 64 px image upscaled to 512 looks soft everywhere. Start at 512 px or larger. If your logo exists as an SVG, convert it at a large size with the SVG to PNG tool first; vectors render perfectly sharp at any size.

Shipping only the .ico. Works in the tab, falls apart the first time someone adds your site to a phone home screen.

Forgetting the manifest edit. The generated site.webmanifest uses placeholder names. Open it in any text editor and replace them with your site name, or Android will offer to install your site as an app literally called Your Site.

Testing only on a light theme. Most browsers now default to dark tab strips. A near-black logo on a transparent background vanishes. If that is your situation, keep the transparent version for the large icons but give the 16 and 32 px versions a light background.

Where this approach has limits

A few honest caveats from testing. JPG sources work, but JPG has no transparency, so your icon will always carry a solid rectangle background. The pack does not include an SVG favicon; modern browsers accept one and it is worth adding by hand if you have a vector logo, with the ICO kept as fallback for everything older. And no generator can fix a source that is itself low quality: a screenshot of your logo pulled from a website header is already soft at 200 px and will stay soft in every icon made from it.

The five minute version

Making a favicon used to involve Photoshop templates and an ICO plugin. Now the entire job is: prepare one bold square PNG or SVG at 512 px or bigger, drop it into the favicon generator, set padding and background if you need them, and put the zip contents in your site root with the snippet in your head. The processing happens in your browser, so the logo never leaves your device, and the whole set costs about as much bandwidth as a single thumbnail.

Design for the 16 px tab first. Every other size takes care of itself.