Favicon Sizes: The Complete Guide for Every Device
Why one favicon size is not enough, the exact dimensions that matter (16 to 512 px), ICO vs. PNG vs. SVG, and how to generate a full icon set.
The favicon is the smallest piece of branding on the web and one of the most overlooked. It is the little icon in the browser tab, the bookmark, the history list, and the home-screen shortcut. Get it right and your site looks polished and recognizable; get it wrong and you get a blurry blob or a generic globe. The catch is that "the favicon" is really several images at several sizes. Here is exactly what you need.
Why One Size Is Not Enough
Different places display your icon at different resolutions. A browser tab shows a tiny 16×16 version, while an Android home-screen shortcut wants a crisp 192×192 or larger. If you supply only one size, the browser scales it — and downscaling a large icon often turns fine detail into mush, while upscaling a tiny one looks pixelated. Supplying purpose-built sizes keeps your icon sharp everywhere.
The Sizes That Actually Matter
- 16×16 — the classic browser-tab and bookmark size.
- 32×32 — sharper tabs on high-resolution displays; also used by some taskbars.
- 48×48 — used by some desktop and Windows contexts.
- 180×180 — the Apple touch icon for iPhone and iPad home screens.
- 192×192 — the standard Android / web-app icon.
- 512×512 — used for PWA splash screens and app listings.
If you only do three, do 16, 32, and 180. They cover the overwhelming majority of real-world displays.
ICO, PNG, or SVG?
ICO is the legacy format that can bundle multiple sizes in one file (favicon.ico) and is still the safest fallback for older browsers. PNG is the modern workhorse — one file per size, referenced in your HTML, with crisp transparency. SVG favicons are increasingly supported and scale infinitely from a single file, but you should still ship PNG and ICO fallbacks for broad compatibility.
How to Generate Favicons with Toolism
The Toolism Favicon Generator runs in your browser — your source image is never uploaded. Here is the workflow:
- Open the Favicon Generator tool on Toolism.
- Upload a square source image, ideally 512×512 or larger so every generated size stays sharp.
- The tool produces the full set of standard sizes for you.
- Download the icons and add the matching link tags to the
<head>of your site.
Design Tips for a Tiny Canvas
- Simplify ruthlessly. A full logo with text is unreadable at 16×16. Use a single bold symbol, monogram, or initial.
- Start square and large. Design at 512×512 and scale down so detail survives, rather than blowing up a small image.
- Use high contrast. The icon should read clearly against both light and dark browser themes.
- Test at actual size. Zoom out to 16×16 and check it is still recognizable — what looks great large can vanish when shrunk.
- Mind the transparency. Decide whether you want a transparent background or a solid shape; both work, but be deliberate.
A favicon is small but it is everywhere your brand appears in a browser. Supply the right sizes, keep the design simple, and the Toolism Favicon Generator turns one good square image into a complete, sharp icon set in seconds.
Try Favicon Generator now — free, no sign-up
Use the Favicon Generator on Toolism. It is completely free, works instantly, and requires no account.
Open Favicon Generator