How to Test a Logo at Favicon Size Before Sign Off

Your new logo looks sharp on the presentation slide, but in a browser tab it turns into a smudge of grey pixels nobody can recognize. That is the most common late surprise in a logo project, and the fix is to test the logo at favicon size before you approve the final files, not after launch.

I build websites for small businesses, and I am usually the person who inherits a logo after it is signed off. Here is the test routine I now ask every client and designer to run, with the exact sizes and what a pass looks like.

Why favicon size breaks so many logos

A favicon is the tiny icon in a browser tab, a bookmark list or a phone's home screen. In a desktop browser tab it is drawn at 16 by 16 pixels, or 32 by 32 on high-density screens. That is 256 pixels in total at the smallest size. A thin line, a small letter or a subtle gradient simply has no pixels left to live in.

Logos fail at this size for predictable reasons:

• Fine strokes thinner than about one twelfth of the mark's width vanish or turn into blur.
• Full wordmarks shrink to an unreadable horizontal line.
• Low-contrast colors merge into the tab background, especially in dark mode.
• Detail inside a shape, such as a small leaf in a larger circle, fills in completely.

None of these show up when you review a logo at 400 pixels on a monitor. They also rarely show up in a client meeting, where the logo is presented large, centered and on a clean white slide. The first time most owners see their icon at real size is the day the site goes live, which is the most expensive moment to discover a problem.

The sizes to test

You do not need dozens of files to test properly. Check these five sizes, which cover nearly every place the icon will appear:

If the mark passes at 16 and 32, the larger sizes almost always take care of themselves.

How to test a logo at favicon size, step by step

1. Export a square version. Place the symbol, or the first letter of a wordmark, centered on a square canvas with about 10 percent padding on each side.
2. Export at 16 and 32 pixels directly. Do not just zoom out in your design tool. Real exports show what pixel snapping and anti-aliasing do to your shapes.
3. View at true size. Open the files at 100 percent zoom on a normal monitor. Then sit back to arm's length, about 70 cm, and look again.
4. Load it in a real tab. Drop the file into a simple local test page, or ask your developer to put it on a staging site. Open that tab alongside ten other common sites and check that you can find yours in under two seconds.
5. Switch to dark mode. Many browsers now use dark tab bars. A black mark on a transparent background disappears there completely.
6. Do the blur test. Apply a 2 pixel blur to the 32 pixel version. If the silhouette is still recognizable, the shape is strong enough.

The whole routine takes about 20 minutes. Run it on every shortlisted concept, not just the final one, because a mark that fails here may need a structural change rather than a tweak.

The standard advice to shrink the full logo is wrong

Many guides suggest exporting your full logo at favicon size and only simplifying if it "looks bad." I think that sets the bar too low and wastes a round of revisions.

A full logo almost never works at 16 pixels. Wordmarks with more than two or three letters are illegible, and lockups with a symbol beside text shrink the symbol to a few pixels. Waiting to see if it fails just delays the conversation.

A better rule: plan a dedicated small-size mark from the first brief. Treat it as part of the identity system, the same way you would plan a one-color version. Our post on why a logo that works in black and white travels further makes the same case for color. If you are writing the brief now, add a line to it asking for a favicon version. The seven-question logo design brief is a good place to add it.

Fixing a mark that fails the test

If your logo does not hold up, you rarely need to start over. These fixes work in most cases:

• Thicken strokes. In the small version, increase stroke weight by 20 to 40 percent. Nobody compares the tab icon to the header logo line by line.
• Drop interior detail. Keep the outer silhouette and remove small internal shapes.
• Use one letter. A bold initial in the brand typeface on a solid colored square is a reliable fallback.
• Add a background shape. A filled circle or rounded square in your brand color gives the mark contrast in both light and dark tabs.
• Increase contrast. Aim for a contrast ratio of at least 3 to 1 between the mark and its background.

What to ask your designer to deliver

Once the small mark passes, make sure it is part of the final handover. At a minimum, ask for:

• An SVG of the favicon mark for modern browsers
• A favicon.ico file containing 16, 32 and 48 pixel versions
• A 180 pixel PNG for Apple devices
• 192 and 512 pixel PNGs for Android

These belong on the same list as your main logo files. The full checklist is in logo files to get from your designer before you pay.

Frequently asked questions

What size should a favicon be?

Browser tabs display favicons at 16 by 16 pixels, or 32 by 32 on high-density screens. A complete set also includes 48 pixels for Windows, 180 pixels for Apple devices, and 192 and 512 pixels for Android. An SVG favicon covers most modern browsers in a single file.

Can I use my full logo as a favicon?

Only if it is already a compact, bold symbol. Most full logos with text are unreadable at 16 pixels. A simplified mark or a single letter from the logo usually works far better and still feels connected to the brand.

How do I know if my logo works at small sizes?

Export it at 16 and 32 pixels, view it at true size in a real browser tab, and check it in both light and dark mode. If you can spot it among other open tabs in a couple of seconds, it works. A quick blur test confirms whether the silhouette is strong enough.