HTML Favicon Generator
That tiny icon in the browser tab is your site's handshake. Drop in a square image and get a full set of favicons, from the 16 pixel tab icon to the 512 pixel app icon, plus the exact HTML to paste. All generated in your browser, nothing uploaded.
or
What sizes you get, and why
| Size | Where it is used |
|---|---|
16x16 | The classic browser tab and bookmark icon. |
32x32 | Sharper tab icon for high-density screens and the taskbar. |
48x48 | Used by some desktop and Windows contexts. |
180x180 | The Apple touch icon shown when someone adds your site to an iPhone home screen. |
192x192 | Android home screen and web app manifest icon. |
512x512 | The large icon for progressive web apps and splash screens. |
How to use the generator
- Add a square image. A simple, bold design reads best at tiny sizes. Drop it in or browse.
- Grab the sizes. Each generated icon has its own Download button. Save the ones you need into your site root.
- Copy the HTML. Paste the provided link tags into the
<head>of your pages. - Match the file names. Save each icon with the name shown in the HTML, or tweak the paths to fit your setup.
Tips for a sharp favicon
- Keep it simple. At 16 pixels, fine detail disappears. A single bold shape or letter works best.
- Use a square source. Favicons are square, so start square to avoid awkward padding.
- Mind the background. A transparent or solid background both work. Just make sure it stands out against light and dark tab bars.
- Optimize the source. Start from a clean, optimized image for the crispest result.
Frequently asked questions
How do I make a favicon?
Upload a square image and the tool generates favicons at 16, 32, 48, 180, 192 and 512 pixels. Download what you need and paste the provided link tags into the head of your HTML.
What favicon sizes do I need?
16 and 32 cover browser tabs, 180 is the Apple touch icon for iOS, and 192 and 512 are used by Android and progressive web apps. Including all of them covers every common case.
Should my source image be square?
Yes. Favicons are square, so a square source looks best. The tool fits non-square images inside the canvas, but a square design with bold shapes stays sharpest at tiny sizes.
Where do the files go?
Usually in your site root, matching the paths in the generated link tags. You can change the paths in the HTML to point anywhere you like.
Further reading: the MDN link element reference, Wikipedia on the favicon, and Google's web.dev guide to document structure.
Want the source icon crisp and tiny before you generate? Resize it first.
Open the Image Resizer→