The favicon is the tiny icon in a browser tab — and the first scrap of branding most people see. Done right it's effortless; done wrong it's a blurry blob or a missing-image square. The catch is that it's not one file anymore.
Why one size isn't enough
Different places want different sizes: the browser tab, a pinned bookmark, an Android home-screen shortcut, an iOS home-screen icon. Ship a single tiny image and some of those end up upscaled and fuzzy.
The set that covers you
- A classic favicon.ico (16 and 32px) for browser tabs.
- PNGs at 32, 48 and 192px for modern browsers and Android.
- A 180px apple-touch-icon for iOS home screens.
- A small web manifest so installable apps pick the right icon.
Start from a square
Begin with a square image that reads clearly at tiny sizes — a simple mark beats a detailed logo. Anything intricate turns to mush at 16 pixels.
Don't forget the HTML
Generating the files is half the job; the browser still needs the <link> tags that point to them. A good generator hands you both the images and the ready-to-paste markup, so you're not copying tags from memory.