What this tool generates
When you download your favicon package, you’ll get:
- favicon.ico (contains 16×16, 32×32, 48×48)
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png (180×180)
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest (template)
- README.md (includes an HTML snippet + placement tips)
Everything is created locally and ready to drop into your site.
Recommended defaults
If you’re unsure what to pick, these settings work well for most logos:
- Background: Solid (brand color)
- Padding: 8–14%
- Corner radius: 0–16% (use 0% for “square” branding)
Workflow & Usage
-
Add your image Drag & drop, paste, or click to upload a PNG, JPG, or WebP. For the sharpest output, start with a square image at 512×512 or bigger.
-
Choose a background
- Transparent: keeps alpha (great for marks that look good on light/dark UI)
- Solid: pick one consistent brand color (most reliable across devices)
- Gradient: pick two colors + direction for a modern “app icon” look
-
Set padding (%) Padding creates a safe area so your mark stays readable at small sizes like 16×16.
-
Set corner radius Round the final icon shape for a softer app-like feel. Use 0% for sharp squares.
-
Preview instantly The dropzone becomes a live preview panel so you can tune the look without layout jumps.
-
Download your ZIP Download a complete favicon package (ICO + PNG sizes + manifest + README).
Tips for Crisp Favicons
-
Simple shapes win. Favicons are tiny — fine detail gets lost quickly.
-
Don’t rely on text. Text almost never survives 16×16. Use a mark, monogram, or simplified symbol.
-
Use padding for breathing room. If your logo feels “cramped,” increase padding until it reads cleanly.
-
Prefer solid backgrounds for consistency. Transparent favicons can look different in browser tabs and pinned shortcuts.
-
Use gradients carefully. Subtle gradients usually look better than high-contrast ones at small sizes.
-
Test dark + light UI. If your favicon disappears in dark mode, use a solid background or a brighter mark.
How It Works
- Your image is drawn into a square canvas at each required size.
- The tool applies:
- Background fill: transparent, solid color, or 2-color gradient
- Padding: defines an inner “safe area” for your logo
- Rounded corner mask (optional): rounds the final icon shape
- PNG icons are exported at the correct sizes for modern browsers and devices.
favicon.icois generated with multiple embedded sizes so browsers can choose the best match.- A
site.webmanifesttemplate andREADME.mdare included to make installation easy.
Everything runs fully client-side in your browser.
Where to place the files
Most sites place favicon files in the site root (same level as index.html), for example:
/favicon.ico/favicon-16x16.png/favicon-32x32.png/apple-touch-icon.png/android-chrome-192x192.png/android-chrome-512x512.png/site.webmanifest
Common setups
- Static site / Astro / Vite: put files in
public/so they serve from/... - Next.js: put files in
public/(same idea) - Sub-path deployments: update the paths in your
<head>tags and manifest if your site is not served from/
Troubleshooting
My favicon looks blurry
- Start with a larger source image (512×512 or higher).
- Add padding so the mark isn’t squeezed into the edges.
- Avoid thin strokes and tiny details.
My favicon won’t update
Browsers cache favicons aggressively:
- Hard refresh
- Clear site data
- Try incognito
- Change filenames to force refresh
