Favicon Generator
Drop images here or click to select
JPG, PNG, WebP, HEIC (Safari/iOS) · up to 50MB each
Drop a square or any image — it is center-cropped to a square automatically.
Turn any image into a complete favicon set — favicon.ico with 16/32/48px icons, a 512px PNG and app icons. Generated in your browser, ready to download.
How to favicon generator
- Drag and drop your logo or image — square images work best; others are center-cropped automatically.
- The generator produces 16, 32, 48, 180, 192 and 512px icons from your image.
- Preview every size, then download favicon.ico and the 512px PNG.
- Copy the ready-made HTML snippet into your <head> and upload the files to your site root.
What a complete favicon set contains
A bare favicon.ico no longer covers the modern web. Browsers request it for tabs and bookmarks, but iOS looks for a 180px apple-touch-icon when someone adds your site to the home screen, Android and PWAs want a 192px and a 512px icon for masks and splash screens, and Windows shortcuts pull the 48px entry from the ICO. A complete set is small — a few kilobytes — and saves the blurry, missing or letterboxed icons that plague incomplete setups.
This generator produces favicon.ico containing 16, 32 and 48px PNG entries (the format every current browser reads), plus a 512px PNG that covers apple-touch-icon, manifest icons and everything else. The sizes were chosen to match what platforms actually request — nothing speculative, nothing missing.
Designing an icon that survives 16 pixels
A favicon is not a shrunken logo — at 16×16 pixels, detail disappears and what remains decides whether your icon reads. The icons that work share traits: one dominant shape, high contrast against both light and dark tab bars, no thin strokes, no small text. A letter, a glyph or a simplified mark consistently beats a detailed original.
If your logo is complex, feed the generator a simplified variant rather than the full artwork: the main symbol on a transparent or solid background, centered with generous padding. Square input works best; the generator center-crops anything else, which may cut off asymmetric designs — crop deliberately beforehand if that matters.
Preview every size before shipping (the generator shows 16 through 512 side by side). If the 16px preview is unreadable, simplify the source image and regenerate — thirty seconds here saves a blurry tab icon for the life of the site.
Installing your favicon correctly
Download favicon.ico and the 512px PNG, rename the PNG copy for apple-touch-icon if you use it, and place the files in your site root. The HTML snippet provided with your download goes in the <head> of every page — modern platforms also read a web app manifest for the 192/512 icons, and the same PNGs drop straight in.
Two classic mistakes: caching and paths. Browsers cache favicons aggressively — if your icon does not update after a change, hard-refresh or visit /favicon.ico directly. And keep the href paths exactly matching where you uploaded the files; a favicon in a subfolder that the HTML does not point to is the most common 'missing icon' cause.
Frequently asked questions
Is this tool free?
Yes — unlimited use, no signup, no watermark.
Are my images uploaded to a server?
No. Every operation runs entirely inside your browser. Your files never leave your device.
Does it work on mobile?
Yes, it works in modern mobile browsers including Safari and Chrome.
What sizes does the favicon.ico contain?
16×16, 32×32 and 48×48 — the sizes browsers actually request for tabs, bookmarks and shortcut icons. Modern browsers use PNG entries inside the ICO, which every current browser supports.
Why do I need the 512px PNG?
Progressive web apps, Android home-screen icons and some platforms request large icons. The 512px PNG covers them all.
My logo is not square — will it be distorted?
No. Non-square images are center-cropped to a square before any icon is generated, so proportions stay correct.
What about an SVG favicon?
Modern browsers support SVG favicons and they stay sharp at any size — but Safari's support is incomplete, so keep the ICO/PNG set as the baseline and add an SVG link as a progressive enhancement.
Where do I upload the files?
Put favicon.ico and the PNGs in your site root (or any folder), and make the href paths in the HTML snippet match that location exactly.