🎨 Design
✅ 100% Free
⚡ Instant Download
Favicon Maker
Generate favicons in every size from an image, text, or emoji. Outputs .ico, all PNG sizes (16 to 512px), Apple Touch Icon, and PWA icons — with ready-to-paste HTML and a site.webmanifest.
Step 1 — Choose source type
Step 2 — Provide source
Drop an image here, or click to browse
Best results from square images with a transparent PNG
PNG
JPEG
WEBP
GIF
SVG
DT
Quick pick
🚀
Generating favicons…
Resizing to all sizes & building .ico file
Generation Failed
An error occurred.
Preview — all generated sizes
📋 Paste into your <head>
📄 site.webmanifest — save to your web root
⬇️ Download individual files
What Is a Favicon?
A favicon (short for "favourite icon") is the small image displayed in browser tabs, bookmarks, address bars, and shortcuts. It's typically a .ico file containing multiple image sizes (16×16, 32×32, 48×48), but modern websites also need PNG favicons at larger sizes for Apple devices and Progressive Web Apps (PWAs).
Despite being small, favicons play a significant role in brand recognition. A well-designed favicon makes your site instantly identifiable in a crowded tab bar and is required for PWA installation on Android and iOS.
Which Favicon Sizes Do You Need?
- 16×16 & 32×32: Standard browser tab and taskbar icons. Always include these in your
favicon.ico. - 48×48: Windows shortcut icons and some older Android browsers.
- 96×96: Google TV and some desktop environments.
- 180×180: Apple Touch Icon — shown when a user adds your site to their iPhone or iPad home screen.
- 192×192: Android PWA launcher icon, referenced in
site.webmanifest. - 512×512: PWA splash screen on Android. Chrome requires this for "Add to Home Screen" prompts.
Frequently Asked Questions
Upload all the generated files to your web root (same directory as your index.html). Then paste the HTML snippet into the <head> section of every page. The <link rel="icon"> tags tell browsers where to find each size. For WordPress, you can use the Customizer → Site Identity → Site Icon to upload your favicon directly.
Both. The .ico file is required for compatibility with older browsers and Windows. Modern browsers prefer SVG or PNG. Best practice is to serve a favicon.ico at the root (legacy support) alongside separate PNG files linked in the <head>. This tool generates both automatically.
Browsers aggressively cache favicons. To force a refresh: hold Shift and click Reload in Chrome/Firefox, or open DevTools → Network → check "Disable cache" then reload. In production, add a version query string to the favicon URL, e.g. href="/favicon.ico?v=2".
A web app manifest is a JSON file that tells browsers how to display your site when installed as a PWA (Progressive Web App). It specifies the app name, icons, theme colour, and display mode. Chrome and Edge use it to determine which icon to show when a user adds your site to their Android home screen.
Yes — modern browsers (Chrome 80+, Firefox 41+, Safari 12+) support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG favicons scale perfectly at any size and support dark mode via the prefers-color-scheme media query inside the SVG. However, older browsers and Safari on iOS still require .ico and PNG fallbacks, so always include those too.
Done!