Free Favicon Generator
Runs 100% in your browser — your images never leave your device.
Generate a favicon set
📷
Drop image(s) here or click to browse
PNG with transparency works best — square images ideal
About this favicon generator
Every professional website needs a favicon — the little icon in the browser tab — plus a touch icon for phones and larger icons for progressive web apps. This free generator builds the whole set from one image: a real multi-size favicon.ico (16, 32 and 48 px packed as PNG-compressed entries, valid in every modern browser), a 180px Apple touch icon, and 192/512px PWA icons, along with the exact HTML snippet to install them.
Rendering happens on a canvas in your browser and the .ico file is packed byte-by-byte locally — no upload, no watermark, no account. Many favicon tools are thin wrappers around the same idea but force you through an upload; here the source image never leaves your device.
What each icon size is for
The generator produces four files, and each one has a job. Knowing where they go helps you check the result afterwards:
- favicon.ico (16, 32, 48 px) — the 16×16 version is the tiny icon you see in browser tabs and bookmark lists; 32×32 covers high-density displays and taskbar shortcuts; 48×48 is used by Windows for desktop shortcuts. All three live inside a single
.icocontainer, and the browser picks the right size automatically. - apple-touch-icon.png (180×180) — this is the icon iOS shows when someone adds your site to their iPhone or iPad home screen. Apple looks for it at the site root automatically, but declaring it in the snippet is more reliable.
- icon-192.png and icon-512.png — progressive web apps reference these in their manifest so the icon looks sharp on install prompts, splash screens and Android home screens. The 512px version is the master copy the store-scale versions are derived from.
Who uses this tool
Indie developers launching a side project on GitHub Pages or Netlify — this page included — use it to get a professional-looking tab icon in under a minute, without adding a build step or an icon-design app to the workflow. Bloggers and small-business owners use it before a relaunch, so the site no longer shows the default blank-page icon in bookmarks. PWA builders generate the full set in one pass instead of resizing each icon by hand. Designers use it to hand clients a complete, working set: the files plus a snippet that can be pasted straight into a template.
The practical rule is simple: regenerate from a large, simple source whenever the logo changes, and keep the old files around for a few days because cached icons can take time to update for returning visitors.
How to use
- Drop a square image into the upload box (PNG with transparency works best).
- Click Generate favicon set.
- Download
favicon.ico,apple-touch-icon.png,icon-192.pngandicon-512.png. - Copy the HTML snippet and paste it into your page’s
<head>, then upload the files to your site root.
Limitations
- The generator resamples your image — it cannot improve a blurry or low-resolution source; start with at least 512\u00d7512 px for best results.
- Very detailed images become unreadable at 16\u00d716 px; simple bold shapes work best as favicons.
- Some browsers cache favicons aggressively — after replacing one, hard-refresh (Ctrl+F5) to see the new icon.
- The .ico embeds PNG-compressed entries, which all modern browsers support; truly ancient browsers (IE6-era) expected BMP entries.
- The generator cover-fits your image — it crops the centre to a square rather than letterboxing — so a wide logo will lose its sides; prepare a square version first if the full width matters.
- Browsers choose which .ico entry to display themselves; you cannot force the 16px entry on one display and the 32px entry on another.
Frequently asked questions
How do I convert PNG to ICO?
Drop the PNG into the tool above and click Generate favicon set. You get a real multi-size favicon.ico (16, 32 and 48 px) plus the HTML snippet — no signup, no upload.
What size should a favicon be?
The classic favicon.ico contains 16\u00d716, 32\u00d732 and 48\u00d748 px versions so browsers pick the right one. Modern sites also add a 180\u00d7180 Apple touch icon and 192/512 px icons for PWAs — this tool generates all of them.
Where do I put the favicon files?
Upload favicon.ico and the PNG icons to your website’s root folder (next to index.html), then paste the snippet into your page’s
. Browsers also check /favicon.ico automatically.Are my images uploaded anywhere?
No. The icons are rendered and packed 100% in your browser. Your source image never leaves your device.
Do I need both favicon.ico and the PNG icons?
Use all four files. Browsers still request /favicon.ico at the site root on their own, and bookmarks, taskbars and desktop shortcuts use the 16, 32 and 48 px entries inside it. The PNG icons cover contexts the .ico format cannot: apple-touch-icon.png is what iOS shows when someone saves your site to their home screen, and icon-192.png/icon-512.png are the sizes a PWA manifest points to for install prompts and splash screens.
Why isn't my new favicon showing up?
Nine times out of ten it is aggressive caching. First confirm the files are at your site root and the snippet is in your page's <head>. Then hard-refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac). If it still shows the old icon, clear that site's data in browser settings — some browsers cache favicons for days regardless of refresh. Also check you uploaded all four files; a missing file silently falls back to the cached one.
What makes a good favicon design?
Simple, bold shapes in one or two colours. At 16×16 px there is no room for fine detail or text — a detailed company logo becomes an unreadable blob, so most sites use a simplified mark or a single initial. A good test: shrink your source to 16×16 in any editor and see whether it still reads. High contrast between the mark and its background matters more at favicon size than it does in the full logo.
What size should my source image be?
Start from at least 512×512 px; a 1024×1024 px PNG is ideal. The 512px PWA icon and 180px touch icon are rendered from your source, so anything below 180px means the largest icons are upscaled copies with no real detail. A larger source also survives the downscaling to 16×16 much better than a source that is already tiny.