Favicon Generator

Upload an image (PNG, JPG, or SVG), select a size, and instantly generate your favicon as a .ico. You can also keep the original resolution.

How to use your new favicon

Now that you’ve generated your favicon, the next step is adding it correctly to your site. A favicon does not boost rankings directly, but it improves branding, user trust, and click-through rates when users recognize your site in tabs or bookmarks.

Adding a favicon to your HTML

Upload the file you generated above (favicon.ico or favicon.png) to the root of your website, then add this inside your <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">

Modern browsers support PNG, but keeping favicon.ico ensures older browsers and legacy tools also display your icon correctly.

Recommended favicon sizes

Different platforms request different icon sizes. If you want the best coverage:

  • 16×16: Still used in some tab bars and older browsers.
  • 32×32: Standard size for modern tabs and recommended minimum.
  • 48–64: Good readability for most desktop shortcuts.
  • 180×180: iOS home screen icons.
  • 256×256: Windows desktop and app tiles.

Mobile and app support

If your audience visits on mobile (which is almost guaranteed), add these as well:

lt;link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

This ensures your icon looks professional when users add your site to their home screen or install it as a PWA.

Troubleshooting common favicon issues

  • Icon not showing? Clear your browser cache or test in an incognito window. Browsers are aggressive about caching favicons.
  • Blurry icon? Export at 64×64 or higher, then let the browser downscale. Avoid starting with a tiny image.
  • Wrong path? Always check that /favicon.ico or /favicon.png is at the site root, or adjust your <link> path.
  • iOS not picking it up? You need an apple-touch-icon, ICO is not supported there.

SEO and branding benefits

While favicons aren’t a direct ranking factor, they influence behavioral signals that search engines care about:

  • Improved click-through rate in mobile search where Google sometimes shows favicons next to results.
  • Better brand recall when your logo is consistently visible in tabs, bookmarks, and history.
  • Higher user trust - sites without favicons often look incomplete or unprofessional.

Next steps

If you’re serious about polishing your website, here are more tools that can help:

Create a color palette