Favicon Generator
Upload any image and get all 6 favicon sizes, favicon.ico, and site.webmanifest — packaged as a ready-to-use zip file.
Drop your image here
PNG, SVG, JPG, WebP — square images work best
What is a favicon?
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, history, and on mobile home screens when users save your site. Despite being small, it's often the first visual element users associate with your brand in their browser.
Modern browsers and devices request favicons at multiple sizes — from 16×16 pixels for browser tabs to 512×512 for PWA splash screens. This generator creates all the sizes you need in one go.
Favicon sizes explained
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16×16 | Legacy browser support, fallback |
| favicon-16x16.png | 16×16 | Browser tab (small screens) |
| favicon-32x32.png | 32×32 | Browser tab (standard, most common) |
| favicon-48x48.png | 48×48 | Windows taskbar and site icons |
| apple-touch-icon.png | 180×180 | iOS Safari "Add to Home Screen" |
| android-chrome-192x192.png | 192×192 | Android Chrome home screen |
| android-chrome-512x512.png | 512×512 | PWA splash screen, high-DPI |
How to add a favicon to your website
After downloading and extracting your favicon package, place all files in the public/ folder of your project root. Then add this snippet inside your <head> tag:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Next.js App Router
In Next.js 13+ with App Router, place favicon.ico directly in your app/ folder. Next.js handles it automatically — no <link> tags needed for the ICO file.
app/ ├── favicon.ico ← auto-detected by Next.js ├── icon.png ← used for apple-touch-icon too └── layout.tsx
Favicon design tips
✓ Use a square image
Favicons are always displayed as squares. Non-square images will be stretched.
✓ Keep it simple
At 16×16 pixels, complex logos become unrecognizable. Use a single letter, symbol, or simplified mark.
✓ High contrast
Favicons appear on both light and dark browser UIs. Ensure your icon is visible on both.
✓ Transparent background
PNG with transparency looks better than a white box in browser tabs.
✓ Test at small sizes
Always preview at 16×16 and 32×32 — that's what most users actually see.
✓ SVG source is best
Start from an SVG for the sharpest results at all sizes. PNG works too.
Frequently asked questions
Do I need all these favicon sizes?
For a basic website, favicon.ico and favicon-32x32.png cover most cases. For mobile-friendly sites and PWAs, the full set ensures your icon looks sharp everywhere.
Is my image uploaded to a server?
No. This tool runs entirely in your browser. Your image never leaves your device — all processing happens locally using the Canvas API.
What image format should I start with?
SVG gives the best results since it's vector-based and scales perfectly. PNG (1000×1000 or larger) is the next best option. Avoid starting with a small raster image as quality will degrade.
Why is my favicon not updating in the browser?
Browsers aggressively cache favicons. Hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or clear browser cache. In development, rename the file or add a query string like favicon.ico?v=2.