Favicon generator
One logo in, a complete icon set out — favicon.ico, ten PNG sizes, a web manifest and the HTML to paste.
A favicon is no longer one file. Browsers want an ICO, Apple wants a 180 px touch icon, Android reads a web manifest, and each looks in a different place. This produces all of it from a single source image, packaged in a ZIP with instructions.
How to use it
- Drop in a square logo — 512 × 512 or larger, PNG or SVG for the sharpest result.
- Choose a background, padding and corner style.
- Generate and download the ZIP, then upload its contents to your site root.
What is in the ZIP
- favicon.ico — a multi-resolution icon containing 16, 32 and 48 px versions, which is what older browsers and Windows shortcuts read
- Ten PNGs from 16 to 512 px, covering browser tabs, bookmarks, Apple touch icons and Android home screens
- site.webmanifest — so Android can install your site to the home screen
- HOW-TO-USE.txt — the exact HTML to paste into your
<head>
Designing an icon that works at 16 px
A favicon is often displayed sixteen pixels across. Detail that reads beautifully on a business card disappears entirely at that size.
- One shape or one letter. A full wordmark is illegible; use the initial instead.
- Strong contrast. Thin strokes vanish. Solid shapes survive.
- Skip the fine detail. Gradients and thin outlines turn to mush.
- Consider both themes. Browser tabs come in light and dark; a black logo disappears against a dark tab strip. Padding with a coloured background solves this.
Questions
What size should my source image be?
512 × 512 or larger, square. SVG gives the crispest small sizes since every size is rendered from vectors.
Do I still need favicon.ico?
Yes. Older browsers and Windows shortcuts look for it at the site root, and it costs nothing to include.
Where do I put the files?
Your website's root directory, so they resolve at yoursite.com/favicon.ico. Then paste in the HTML from the included text file.
Why is my favicon not updating?
Browsers cache favicons aggressively. Hard-refresh, or open the icon URL directly to confirm it is live.
Are my files uploaded?
No. Everything is generated in your browser.