Favicons & App Icons: Your Logo at Tiny Sizes

Your logo was probably designed to look its best big: on a website header, a business card, a shopfront. But it also has to survive being shrunk to a 16-pixel square in a browser tab, or a rounded app icon on someone’s home screen. At those sizes, most logos fall apart: the wordmark turns to mush, the fine detail vanishes, and what’s left is an unreadable smudge. Getting your favicon and app icons right is a small job that quietly signals a polished, professional brand, and getting it wrong is one of those tiny tells that makes a business look amateur.

Why full logos fail at tiny sizes

A favicon is roughly 16 to 32 pixels across, smaller than a single letter in this paragraph. A horizontal logo with a name, a tagline and an icon simply has nowhere to go in that space. Three things break first:

• Text becomes illegible. Any wordmark below about 60 pixels wide turns into grey fuzz. Your company name is not readable at 16×16, so don’t try.
• Fine detail disappears. Thin strokes, gradients, subtle shadows and intricate line work all collapse when the renderer has only a handful of pixels to work with.
• Aspect ratio fights the square. Favicons and app icons are square. A wide logo crammed into a square either floats tiny in the middle or gets awkwardly cropped.

This is exactly why a good logo is designed as a system, not a single lock-up, a point we cover in our logo design service. The full version goes on the website header; a simplified mark handles the small, square jobs.

Simplifying down to a single mark

The goal is one element that stays recognisable at thumbnail size. In practice that means choosing one of:

• The symbol or icon from your logo, used on its own (think the abstract shape, not the whole lock-up).
• A monogram, one or two initials in your brand typeface, the most reliable choice for name-led brands with no distinct icon.
• A single, bold letter: the first initial, set confidently and centred.

Whatever you pick, push the contrast and weight harder than feels comfortable at full size. Thicken strokes, simplify curves, drop gradients for flat colour, and make sure the mark reads as a clear silhouette. If you can’t tell what it is when you squint at it on your phone, it won’t work in a tab. Small brands often skip this step entirely. Our small-business logo guide explains why the secondary mark matters as much as the primary one.

The sizes and formats you actually need

There’s a lot of outdated advice listing a dozen favicon sizes. In 2026 you can ignore most of it. Here’s the lean, modern set that covers browsers, Apple devices and Android/PWA installs:

A quick word on formats. .ico is the old multi-resolution container, still the safest browser-tab fallback, and it can hold both 16×16 and 32×32 in one file. .png is what every app-icon slot expects: lossless, transparent, predictable. .svg is the newest favicon option: it’s a single vector file that stays razor-sharp at any size and can even respond to dark mode, but older browsers ignore it, so you still ship the .ico alongside it.

Maskable icons and safe areas

Android (and increasingly other platforms) doesn’t show your icon as a plain square. It crops it into a circle, a rounded square, a squircle or a teardrop, depending on the device. If your mark fills the whole 512×512 canvas, the corners (and sometimes the edges) get sliced off.

The fix is a maskable icon: same artwork, but with a built-in safe zone. The rule of thumb is to keep all essential content inside a central circle covering roughly the middle 80% of the canvas, about 410 pixels of a 512px icon, and let your background colour bleed to the edges. Anything in the outer 10% margin is fair game to be cropped. You declare this in your web app manifest with "purpose": "maskable" so the device knows it can safely crop. Skip this and your beautifully centred logo can end up with its sides shaved off on half the phones that install it.

Testing on light and dark tabs

Browser tabs aren’t always white any more. A user in dark mode sees your favicon on a near-black bar; a user in light mode sees it on white or pale grey. A mark that’s solid dark navy looks sharp on white and nearly vanishes on a dark tab, and vice versa.

• Check both backgrounds. Open your site in light and dark mode and look at the actual tab, not just a mock-up.
• Avoid pure-white or pure-black silhouettes. A mark that relies on a single extreme tone will disappear against one of the two backgrounds.
• Consider an SVG with a dark-mode rule. An .svg favicon can use a prefers-color-scheme media query to swap colours automatically, the cleanest way to look right in both.
• Use a contained shape. A mark sitting on its own small rounded background (its own little tile) reads cleanly regardless of the tab colour behind it.

Common mistakes to avoid

The same handful of errors show up again and again:

• Shrinking the full logo. The number-one mistake: a tiny, unreadable wordmark instead of a distilled mark.
• One PNG for everything. Uploading a single low-res image and letting browsers downscale it produces a blurry, off-centre icon. Export each size deliberately.
• Ignoring the maskable safe zone. Edge-to-edge artwork that gets cropped on Android.
• Transparent backgrounds on app icons. Apple touch icons render the transparency as black; always supply a solid background for app-icon slots.
• Forgetting the manifest. No site.webmanifest means no proper Android/PWA icon, no app name, no theme colour.
• Never testing on a real device. A favicon that looks fine in a generator preview can still look wrong added to an actual home screen.

What to do next

If your favicon is currently a stretched, blurry version of your full logo (or missing entirely, showing a generic globe icon), it’s worth fixing in an afternoon. The sensible sequence is: distil your logo to a single bold mark, export the lean set above (a multi-size .ico, an .svg, a 180×180 apple-touch-icon, and 192/512 PNGs plus a maskable variant), wire them up with the correct link tags and a web app manifest, then test on a light tab, a dark tab and a real phone home screen. If you commissioned your logo properly, these small-format assets should already be part of the package, and if you’re costing up a rebrand, our UK logo cost guide shows what a complete deliverable set should include.

Sources & Further Reading

• HTML attribute: rel (including icon), MDN Web Docs
• Add a web app manifest, web.dev