Advertisement
Guide
About the Favicon Generator
A favicon is the small icon that represents your site in browser tabs, bookmarks, history, and mobile home screens. Doing it properly means more than one file — browsers and devices want several sizes, plus an Apple touch icon and a web manifest for Android. This generator takes a single image and renders every size you need, then gives you the HTML and manifest to wire it all up.
You can add padding, set a background color, and apply a circular mask, with a live preview at each size. Everything is rendered in your browser with the Canvas API — your image is never uploaded.
Which favicon sizes you actually need
- 16×16 and 32×32 — classic browser tab and bookmark icons.
- 180×180 — the Apple touch icon for iOS home screens.
- 192×192 and 512×512 — referenced by the web manifest for Android and PWAs.
- Larger sizes ensure your icon stays crisp on high-DPI displays.
Start from a square, high-resolution image
Favicons are tiny, so simple, high-contrast artwork reads best — fine detail disappears at 16×16. Feed the generator a square image at 512×512 or larger so every downscaled size stays sharp. If your logo isn't square, use the padding and background options to frame it cleanly rather than letting it stretch.
How to use it
- 1Drop in a square, high-resolution image.
- 2Adjust padding, background, and the optional circle mask.
- 3Download the rendered PNGs at every size.
- 4Paste the provided HTML and web manifest into your site.
Frequently asked questions
What image should I use for a favicon?
A square, high-resolution image (512×512 or larger) with simple, high-contrast artwork. Fine detail is lost at small sizes, so bold shapes work best.
Which favicon sizes do I need?
16×16 and 32×32 for browsers, 180×180 for the Apple touch icon, and 192×192 and 512×512 for the web manifest and Android. This tool generates them all.
What is the web manifest for?
It tells Android and progressive web apps which icons to use for the home screen and app switcher. The generator provides a ready-to-use manifest snippet.
Can I make a circular favicon?
Yes. The circle-mask option clips your image to a circle, and padding plus a background color let you frame non-square logos cleanly.
Is my image uploaded?
No. All rendering uses the browser Canvas API, so your image never leaves your device.