Designing Favicons and App Icons That Hold Up Small

Look at the row of tabs open across the top of your browser right now. Each one is shrunk down to a tiny square barely the size of a fingernail, and yet you can probably spot the one you want without reading a single word. That little square is a favicon, and the fact that you recognise it instantly is no accident. Somebody designed it to survive at a size most people would consider impossibly small.

Favicons and app icons are the most miniature, most ruthless test a brand ever faces. There is nowhere to hide. No tagline, no clever photography, no generous white space to set the mood. Just a few pixels asking your audience to recognise you in a crowded home screen or a packed browser window. In this guide we will walk through what these tiny marks are, why so many of them fail, and how to design ones that hold up when everything else is stripped away.

What a favicon and an app icon actually are

Let us clear up the jargon first, because the words get thrown around loosely. A favicon, short for "favourite icon", is the tiny image that appears in a browser tab, in a bookmark list, and in the address bar on some devices. An app icon is the rounded square you tap to open software on a phone, tablet, or desktop. They are cousins. Both are small, both represent your brand at a glance, and both live in environments you do not fully control.

The crucial thing to understand is that these are not just shrunken versions of your logo. A logo is built to be read at a comfortable size, often with words and fine detail. When you squeeze that same artwork down to a tiny square, the detail collapses into mush. Designing a favicon or app icon is closer to designing a coin or a flag than designing a poster. You are working with bold shapes, strong contrast, and a single memorable idea. If you want a fuller grounding in how the broader visual system fits together, our piece on building a brand style guide is a good companion read.

Why the small size changes everything

Imagine writing your name on a grain of rice. You would not use your normal handwriting. You would simplify, thicken the strokes, and drop anything fiddly. The same instinct applies here. At very small sizes, thin lines vanish, subtle gradients turn to grey sludge, and any text smaller than a couple of letters becomes an unreadable smudge. The screen simply does not have enough pixels to show the nuance you put in.

The most common ways tiny icons fail

Before we talk about doing it well, it helps to see the traps. Most weak favicons and app icons fail for predictable reasons, and once you can name them you will start spotting them everywhere.

The first is cramming. Designers take the full logo, including the company name, and shrink it to fit. At a small size the words become an illegible grey bar and the icon reads as visual noise. The second is low contrast. A pale mark on a pale background may look elegant on a website header, but on a busy home screen it simply disappears. The third is fussiness. Fine outlines, delicate serifs, and intricate illustrations all dissolve when the pixels run out. The fourth, and perhaps most overlooked, is sameness. So many brands in the same category reach for the same blue circle that their icons become interchangeable.

There is also a subtler failure that has nothing to do with the artwork itself. Many teams design a beautiful icon, then never check it against the contexts it will actually appear in. They admire it large on a clean canvas and ship it, only to find it looks weak next to a wall of competitors on a phone. Testing in context is not a nice extra. It is the whole game.

Principles for icons that hold up

Now the encouraging part. A handful of principles, applied with discipline, will get you most of the way to an icon that works. None of them require a huge budget or a famous studio. They require restraint, which is harder than it sounds.

Pick one idea and commit

The strongest tiny marks express a single idea. It might be a letter, a simple symbol, or a distinctive shape lifted from your logo. Resist the urge to combine three concepts. A favicon is a glance, not a sentence. If your brand has a recognisable symbol already, that symbol is almost always your best starting point. If it does not, the first initial of your name set in a confident, well-spaced typeface is a reliable fallback. Our guide to iconography and illustration in branding goes deeper on how to develop a symbol worth shrinking.

Make contrast do the heavy lifting

Contrast is what lets a tiny shape register before your audience has consciously focused on it. That usually means a bold mark on a solid, distinct background, or the reverse. Think about where the icon will sit. App icons live on backgrounds the user chooses, so a coloured tile behind your mark gives you control. Favicons sit on whatever colour the browser uses, so they need to read on both light and dark surfaces. Strong, deliberate colour choices matter enormously here, and our practical guide to choosing brand colours is worth reading alongside this.

Simplify until it almost hurts

A useful exercise is to design your icon, then keep removing detail until it starts to lose meaning, then add back the last thing you removed. That point of near-collapse is usually where small icons look their best. Rounded corners, single colours, and generous internal spacing all help. If a shape survives being printed at the size of a thumbnail in black and white, it will survive almost anything.

Getting the technical side right without the headache

You do not need to be a developer to brief one well, so here is the plain-language version of what a favicon and app icon set involves. Modern devices ask for the same mark at several sizes, because a browser tab, a bookmark bar, a phone home screen, and a high-resolution desktop all need different pixel dimensions. The safest approach is to design your mark cleanly at a large size and export it down to each required size, checking each one by eye rather than trusting the software to shrink it perfectly.

There are a few sizes worth knowing in conversation. The traditional favicon sits around sixteen and thirty-two pixels square. App icons and touch icons run larger, often into the hundreds of pixels, so they look crisp on modern high-density screens. You will also want a version that works as a simple, single-colour silhouette, because some systems display a stripped-back outline of your mark. Designing with that constraint in mind from the start saves a lot of rework.

Backgrounds, padding and safe areas

App icons in particular have rules about how close your artwork can sit to the edge. Operating systems crop icons into rounded shapes and add their own subtle shadows, so if you push your mark right to the corner it may get clipped. Leave a comfortable margin of breathing room. Treat the outer ring of the canvas as a no-go zone and centre your idea within the safe middle area. This is the same discipline you would apply when keeping your visual identity tidy across every surface, a theme we explore in our piece on brand consistency across every channel.

Testing the way your audience will actually see it

Here is the step most teams skip, and the one that separates icons that work from icons that merely look nice in a presentation. Before you sign off, place your icon in its real habitat. Drop it onto a screenshot of a crowded phone home screen, surrounded by the apps your customers already use. Open ten browser tabs and see whether yours stands out. View it on a small screen and a large one, in light mode and dark mode, on a bright day and a dim one.

If your icon vanishes among its neighbours, the problem is rarely the craftsmanship. It is usually that the shape or colour is too generic. The fix is to find one element that is genuinely yours and lean into it. That might be an unexpected colour, an unusual angle, or a piece of negative space that creates a memorable silhouette. Distinctiveness, not decoration, is what gets you noticed at a glance.

Accessibility is part of the test

Tiny icons still need to be legible for people with lower vision or colour blindness. That means leaning on shape and contrast rather than colour alone to carry meaning. If two of your product icons are distinguished only by hue, a portion of your audience will not be able to tell them apart. The principles in our guide to colour contrast and accessibility in branding apply just as much to a sixteen-pixel square as they do to a full web page.

Keeping your tiny mark consistent over time

Once you have an icon that holds up, protect it. Add it to your guidelines with clear rules about minimum sizes, background options, and the silhouette version. Note which file goes where, so a future developer or designer does not quietly swap in a slightly different shade or a stretched version. Small inconsistencies compound. A favicon that drifts a little each year ends up unrecognisable, and recognition is the entire reason the icon exists. If you keep a working checklist, our brand guidelines checklist is a sensible place to record these details.

It is also worth revisiting your icon when you refresh other parts of your identity. A small mark can quietly date a brand, and a gentle modernisation, done carefully, keeps you current without throwing away the recognition you have built. The goal is evolution, not reinvention. When type and icon work together as a system, the whole brand feels more deliberate, which is why our work on typography for brands pairs naturally with this topic, especially if your icon is a letterform. For the wider relationship between fonts and colour on the web, this overview of website fonts and colours is a helpful cross-reference.

A simple workflow you can follow

To pull it all together, here is a practical sequence. Start with your strongest existing symbol or a clear initial. Simplify it down to bold shapes and a single confident idea. Choose colours with high contrast and a distinctive edge. Export the mark at every size you need, checking each one by eye. Create a silhouette version for systems that demand one. Then, crucially, test the whole set in real contexts before you ship. If it survives the crowded home screen and the wall of browser tabs, you have an icon that will earn its keep for years. If you would like a second pair of eyes on yours, you can always get in touch.

Frequently asked questions

References

1. Nielsen Norman Group. "Icon Usability." nngroup.com.
2. W3C. "HTML Living Standard: Link Types and Icons." w3.org.
3. Smashing Magazine. "Designing Better App And Favicon Sets." smashingmagazine.com.