Every size. One upload. Done.
You just deployed your shiny new website. Looks great. But the browser tab shows a generic globe icon because you forgot the favicon. Or worse, you uploaded a single favicon.ico at 16x16 and now your PWA home screen icon is a blurry mess.
Here’s the thing about favicons: there isn’t one size. There are six. At minimum. 16x16 for the browser tab. 32x32 for high-DPI tabs. 48x48 for Windows taskbar. 128x128 and 256x256 for PWA manifests and Apple touch icons. You need PNG versions for modern browsers and an ICO file for legacy compatibility.
This tool generates all of them from a single source image. Upload one PNG, download a ZIP with every size you need. Both formats included.
The process
- Upload a square image, ideally 512x512 pixels or larger.
- Preview it to make sure it’s the right design.
- Click “Generate Favicons & Download ZIP”.
- Extract the ZIP into your website’s root directory.
Then add the <link> tags to your HTML <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Your logo now shows up in browser tabs, bookmarks, mobile home screens, and PWA launchers. Everywhere.
What’s in the ZIP
- 16x16: standard browser tab icon
- 32x32: high-DPI browser tabs, bookmarks
- 48x48: Windows desktop shortcuts
- 64x64: Windows taskbar at higher display scales
- 128x128: Chrome Web Store, PWA manifests
- 256x256: PWA splash screens, large icon contexts
- favicon.ico: multi-size ICO for maximum legacy support
Design tips that actually matter
Keep it dead simple. Your logo with the tagline and three swooshes? At 16x16 pixels that’s a muddy blob. Use just the logomark, the icon part, not the wordmark. Think of Twitter’s bird, not “Twitter” spelled out.
High contrast wins. A light gray icon on a white browser tab is invisible. Make sure your design has strong contrast against both light and dark backgrounds (some browsers use dark mode tab bars).
Start square. Non-square source images get squeezed to fit, which never looks good. If your logo is horizontal, extract the icon portion and upload that instead.
Test at 16x16 before uploading. Open your source image in any editor and zoom out until it’s 16 pixels wide. Can you still tell what it is? If not, simplify.
Need just an ICO file without the full package? The ICO Converter handles that. Want a non-standard size? The Image Resizer can scale any image to exact dimensions.
Questions about favicons
What makes a good source image?
A square PNG at 512x512 or larger. Simple shapes, bold colors, high contrast. Avoid text, it’s unreadable at favicon sizes. Your company’s logomark is usually the best choice.
Do I really need all six sizes?
Technically, just 16x16 and 32x32 will cover most browsers. But if you’re building a PWA, or if you care about how your site looks when someone pins it to their phone’s home screen, the larger sizes matter. It takes one extra second to include them all. Just do it.
ICO vs. PNG, which do I need?
Both, ideally. ICO is the OG format that every browser since the 90s recognizes. PNG is what modern browsers and mobile devices prefer. The ZIP includes both, so you’re covered everywhere.
Where do the files go on my server?
Most commonly, in the root directory of your website. The favicon.ico file is special, browsers automatically look for it at /favicon.ico even without a <link> tag.
Will this work for my PWA?
The 128x128 and 256x256 sizes cover many PWA icon requirements. For a full PWA setup, you might also need 192x192 and 512x512, use the Image Resizer to create those from your source image.