A favicon is the small icon that shows up in a browser tab, a bookmark list, or a phone's home screen shortcut. It's often the smallest, most overlooked piece of a website's branding — and also one of the least forgiving, because it gets displayed as small as 16 by 16 pixels. A logo that looks sharp and detailed at normal size can turn into an unreadable smudge at that scale.
Design for the smallest size first
The easiest way to end up with a bad favicon is to design a full logo, then shrink it down and hope for the best. Fine detail, thin lines, and small text all disappear at 16px. Instead, think about what the simplest, most recognizable version of your mark is — often just an initial, a simple geometric shape, or a single bold icon — and design that first, checking how it looks at genuinely tiny size before finalizing anything.
A few concrete guidelines
- Keep it to one or two colors with high contrast. Subtle color gradients and shading vanish at small sizes; a bold, simple color scheme reads clearly even at 16px.
- Avoid thin strokes. A line that's crisp at 512px can become a single blurry pixel-wide smudge at 16px. Thicker shapes and solid fills survive the shrink much better than fine linework.
- Skip text entirely, or use a single bold letter. Full words are almost never legible at favicon size — a single initial in a heavy, simple typeface is about the limit of what reads clearly.
- Start from a square canvas. Favicons are square; designing on a non-square canvas means an awkward crop or stretch later.
From design to actual file
Once you have a simple, square PNG that reads clearly at small size, it needs to become an actual .ico file — the format most browsers and operating systems specifically look for, even though many now also accept a plain PNG. A proper favicon.ico file bundles several sizes together (commonly 16, 32, 48, 64, 128, and 256px) so the browser or OS can pick whichever fits the context it's displaying the icon in.
You can generate that bundled file directly from a single square PNG — this tool resizes your image to all six standard sizes and packages them into one favicon.ico automatically.
Putting it on your site
Drop the resulting favicon.ico file at the root of your site (so it's reachable at yoursite.com/favicon.ico) — most browsers check that location automatically. For more control, add this line inside your HTML's <head> section:
<link rel="icon" href="/favicon.ico">