UTILYARD
tools / image

Favicon Generator

Generate favicon PNG files at all standard sizes (16px to 512px) from any image.

Drop an image or click to upload

Use a square image (e.g. 512×512) for best results

FAQ

What favicon sizes do I need?
16×16 and 32×32 are the minimum for browser tabs. Add 192×192 and 512×512 for Android home screen icons. Add 180×180 for Apple Touch icon (iOS/Safari). For PWA apps, 192×192 and 512×512 are required in your web manifest.
Should I use PNG or ICO format?
PNG favicons work in all modern browsers and are simpler to generate. ICO files can bundle multiple sizes in one file and have broader legacy support, but require a dedicated encoder. For new sites targeting modern browsers, PNG is fine.
What image should I start with?
Start with a square image at least 512×512px. Simple, bold designs with high contrast work best — intricate details become invisible at 16px. Test your favicon at 16×16 by zooming out to see how it looks in a browser tab.

ABOUT THIS TOOL

Upload any image — a logo, icon, or photo — and download a complete set of favicon PNG files at every standard size from 16×16 up to 512×512 in one pass. Different platforms expect different sizes: browser tabs typically use 16×16 or 32×32, bookmarks and shortcuts often need 48×48, and mobile home screen icons and PWA manifests call for 192×192 or 512×512. Rather than manually resizing your logo eight or nine separate times in an editor, this tool generates the whole set at once so you can drop the files straight into your site's public folder and reference them in your HTML head or web manifest.

HOW TO USE

  1. Upload a square image with your logo or icon — higher resolution gives cleaner results at large sizes.
  2. Let the tool generate every standard favicon size automatically.
  3. Preview how the icon looks at each size, especially the smallest ones.
  4. Download the full set of PNG files.
  5. Add the files to your site's public directory and reference them in your HTML link tags or manifest.json.

COMMON USE CASES

  • A developer launching a new website who needs a full favicon set for browser tabs, bookmarks, and mobile home screens.
  • A startup rebranding its logo and needing to regenerate every icon size across its existing site.
  • A PWA builder needing 192×192 and 512×512 icons specifically for the web app manifest.
  • Someone setting up a static site who wants to avoid manually resizing a logo nine different times.
  • A designer checking whether a detailed logo still reads clearly when shrunk down to a 16×16 browser tab icon.

TIPS & COMMON MISTAKES

  • Start with a square, high-resolution source image, at least 512×512 — upscaling a small logo to fill large sizes will look blurry.
  • Test how your icon looks at 16×16 specifically; fine details and thin text often disappear entirely at that size, so simpler marks work best.
  • Modern browsers increasingly accept SVG favicons for scalability, but PNG sets remain the most universally compatible option across browsers, bookmarks, and app icons.
  • Don't forget to also update manifest.json and any apple-touch-icon references if you're rebuilding an existing site's favicon, not just favicon.ico.

MORE QUESTIONS

Why do I need so many different favicon sizes instead of just one?
Different contexts render icons at fixed sizes — a browser tab, a phone home screen, and a PWA splash screen all expect specific pixel dimensions, and browsers pick the closest match rather than scaling one file for every use.
Should I use PNG or ICO format for my favicon?
PNG is simpler and works in virtually all modern browsers; ICO is an older multi-resolution format still requested by some legacy tools, but most current sites use PNG plus a manifest.
My logo looks fine at 512px but unclear at 16px — what should I do?
Simplify the icon for small sizes — remove fine detail or thin text and rely on a bold shape or initial, since browser tabs render far too small to show intricate designs.
Do I need a separate icon for iOS home screens?
Yes, iOS looks for an apple-touch-icon, typically 180×180, separately from the standard favicon set, so make sure that size is included and referenced correctly in your HTML.

RELATED GUIDES

What is a Favicon?
Favicon sizes, ICO vs PNG vs SVG formats, how to add one to your site, and design tips.
Read →
Favicon Generator — UtilYard