Favicon Design
The constraint isn't the size — it's how much detail survives it.
Designing for 16×16 pixels is closer to typographic hinting than to logo design. There is no room for a wordmark, a gradient does almost nothing, and a one-pixel stroke either lands on the grid or turns to mush. The reliable approach is subtraction: take the strongest single shape in your brand, push contrast further than feels comfortable at full size, and test against both a light and a dark browser chrome before you commit. These guides cover silhouette, colour and the specific compromises that make an icon legible at tab size without looking crude at 512.
Maskable Icons Explained: Why Your PWA Icon Gets Cropped on Android
What the maskable purpose in a web app manifest actually does, how big the safe zone is, and how to ship maskable and standard icons without one ruining the other.
6 min read
ReadDesignDark Mode Favicons: How to Make One Icon Work on Both Themes
How to build a favicon that adapts to light and dark browser themes using an SVG media query — and why the safer answer is usually an icon that never needs to.
7 min read
ReadFundamentalsPNG vs SVG vs ICO: Which Favicon Format Should You Use?
A practical, no-nonsense comparison of the three favicon formats and when to reach for each one.
4 min read
ReadDesignHow to Design a Favicon That Works at 16 Pixels
What survives being shrunk to a 16-by-16-pixel square, and what quietly turns into a smudge.
5 min read
ReadDesignFavicon Color Theory: Making Your Tab Stand Out
How color choice affects whether your favicon gets noticed in a crowded row of browser tabs.
4 min read
ReadDesignEmoji as a Favicon: A Legit (and Free) Logo Alternative
No logo yet? An emoji favicon is a genuinely good placeholder — here's how to pick one that works.
4 min read
Read