Create every favicon size from one image
A favicon is the small icon in browser tabs, bookmarks, search results and phone home screens. Different places ask for different sizes: 16 and 32 pixels for tabs, 180 for Apple touch icons, 192 and 512 for Android and web app manifests. Making each by hand is tedious and small icons often come out blurry.
This generator resizes your image in steps, halving it repeatedly with high quality smoothing until it reaches each size, which keeps small icons crisp. You get individual PNG files, a favicon.ico containing the classic sizes, and a ZIP with everything.
How to generate favicons
Step 1: Drop a square image
A square logo or symbol of at least 512 x 512 px gives the best results. SVG works too.
Step 2: Choose sizes
Pick Browser minimal (16, 32, 48), Web standard (adds 96, 180 and 192) or All sizes, or toggle sizes individually.
Step 3: Generate
Each size is rendered with step-down scaling for clean edges.
Step 4: Download
Save individual PNGs, the favicon.ico, or the complete ZIP.
What you get
Ten sizes
16, 32, 48, 64, 96, 128, 180, 192, 256 and 512 px.
Multi-size favicon.ico
Selected sizes up to 256 px packed into one ICO file with PNG entries.
Sharp small icons
Step-down resizing avoids the blur of a single large-to-tiny jump.
One ZIP
All PNGs and the ICO file together, ready to upload.
Where favicons are used
Browser tabs and bookmarks. 16 and 32 px icons, usually from favicon.ico.
iPhone and iPad home screens. The 180 px Apple touch icon.
Android and web apps. 192 and 512 px icons referenced in a web app manifest.
Search results. Google shows your favicon next to results on mobile and desktop.
Adding the favicons to your site
Upload the files to your website's root folder and add a few lines to the head of your pages. A typical set is: link rel="icon" href="/favicon.ico" sizes="any", link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png", and link rel="apple-touch-icon" href="/favicon-180x180.png".
For installable web apps, list the 192 and 512 px PNGs in the icons array of your manifest.json. Browsers cache favicons aggressively, so a hard refresh may be needed to see a new icon.
- favicon.ico: tabs, bookmarks and older browsers.
- favicon-180x180.png: Apple touch icon.
- favicon-192x192.png and favicon-512x512.png: manifest icons.
Designing an icon that reads at 16 pixels
At 16 by 16 pixels, detail disappears. Full wordmarks become unreadable, so use a simple symbol or a single letter with strong contrast. Test the 16 and 32 px previews before downloading.
Start from a square image. Non-square images are stretched to a square, so crop to 1:1 first with the image cropper if your logo is wider than it is tall.
Tips for crisp favicons
- Use a transparent PNG or SVG so the icon blends with light and dark browser themes.
- Increase stroke weight in your logo for the small sizes if lines look thin.
- Keep 10 percent padding around the symbol so it does not touch the edges.
- Re-upload favicon.ico with a new file name or version query if browsers keep showing the old icon.
Favicon generator FAQ
Which sizes should I use?
The Web standard preset (16, 32, 48, 96, 180 and 192) covers browsers, Apple devices and Android. Add 512 for web app manifests.
What is inside the favicon.ico?
All selected sizes up to 256 px, stored as PNG images inside the ICO container, a layout every modern browser and Windows since Vista understands.
Can I use an SVG logo?
Yes. SVG files are rendered at high resolution before resizing, which gives clean results.
Why does my favicon look stretched?
The source image was not square. Crop it to 1:1 first, then generate the favicons.
How do I add the favicon to my website?
Upload the files to your site root and add link tags for the ICO, the 32 px PNG and the 180 px Apple touch icon to your page head.
Is my logo uploaded?
No. All sizes are generated in your browser.