Favicon Generator
Turn one square image into a full set of favicon PNGs, from 16px to 512px, plus the HTML tags to paste - all generated in your browser.
Square-ish PNG, JPG, WebP or SVG, ideally 512px or larger - processed locally
Every icon size from one image
A modern site needs its icon in several sizes: small ones for the browser tab, a larger one for the iOS home screen, and bigger still for Android and installable web apps. Rather than exporting each by hand, drop in one square image and this tool draws it onto an HTML canvas at 16, 32, 48, 180, 192 and 512 pixels, then bundles the PNGs into a zip. It all runs in your browser, so your artwork is never uploaded.
Design for the smallest size
The hardest size to get right is 16px, where an icon is barely bigger than a few letters. Detailed logos, thin lines and small text all turn to mush at that scale. A single bold symbol, a strong letterform or a simple mark with good contrast reads far better. Start from a clean 512px square and let the tool scale down - if you can still tell what the 16px version is, you have a good favicon.
Which sizes do what
- 16 and 32px - the browser tab and bookmarks bar.
- 48px - some desktop bookmark and shortcut contexts.
- 180px - the Apple touch icon shown when a page is saved to an iPhone or iPad home screen.
- 192 and 512px - Android home screen and the icons a Progressive Web App manifest points to.
Paste the generated link tags into your page <head> and adjust the paths to
wherever you upload the files. Need to prep the source art first? Square it up and scale it
with the image resizer, trim the file size with the
image compressor, or inline a tiny icon as a data URI with the
image to Base64 tool.