Skip to content
epitometool

Favicon generator

CSS & UI generators

Generate common favicon and PWA icon sizes plus manifest and HTML link tags from one image.

Updated

Source image

Upload a square SVG/PNG/JPG. The tool crops and exports common favicon sizes.

Generated icons

Upload an image to generate favicon files.

site.webmanifest

{
  "name": "EpitomeTool",
  "short_name": "Epitome",
  "icons": [
    {
      "src": "/android-chrome-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

HTML link tags

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Quick start

How to generate favicon assets

Upload one source icon and export common browser/PWA favicon files.

  1. Step 1
    Upload source image

    Choose a square logo image in PNG, JPG, WebP or SVG format.

  2. Step 2
    Review generated sizes

    The tool renders standard favicon and PWA dimensions instantly.

  3. Step 3
    Download assets

    Download each icon and copy manifest + HTML link tags into your site.

In-depth guide

Favicon generator

Generate modern favicon and PWA icon sizes from one source image, along with manifest JSON and HTML link tags.

Recommended icon set

At minimum, ship 16x16 and 32x32 favicons plus 180x180 Apple Touch icon and 192/512 Android icons for PWA support.

Quality tips

  • Start from a high-resolution square source (at least 512x512).
  • Use strong contrast for tiny 16px rendering.
  • Avoid thin details that disappear at small sizes.

How to use it

  1. Upload a square source image (PNG with transparency works best).
  2. The tool renders every required size and bundles the manifest JSON plus the HTML <link> tags.
  3. Download the icons, drop them in your site root, and paste the generated tags into your <head>.

Modern browsers also accept a single SVG favicon, but PNG fallbacks keep older devices and Safari happy.

Pitfalls and privacy

Non-square sources get letterboxed or stretched, so crop to a square first. Browsers cache favicons aggressively — if an old icon sticks around, hard-refresh or bump the filename. Make sure the manifest icons paths match where you actually upload the files, or PWA installs show a blank icon. Your image is processed locally in the browser and never uploaded to a server.

When to use it vs alternatives

Use this tool for quick browser-based work when you need an answer or output immediately. Use a dedicated application or automated workflow when you need bulk processing, approvals, or repeatable production rules.

Frequently asked questions

Which favicon sizes are generated?

16, 32, 48, 64, 96, 180, 192 and 512 pixels for common browser and PWA contexts.

Can I generate .ico directly?

This version exports PNG icons. Most modern stacks accept PNG favicons directly; .ico export can be added later.

Are uploaded images sent to a server?

No. Image processing is done fully in your browser.

What source image should I use?

A square PNG of at least 512x512 with transparency works best. Non-square images get cropped or letterboxed.

My new favicon is not showing. Why?

Browsers cache favicons aggressively. Hard-refresh, clear the cache, or change the filename to force an update.

Do I still need PNG icons if I have an SVG favicon?

Yes for broad support. Modern browsers accept SVG favicons, but PNG fallbacks cover older browsers and some platforms like home-screen icons.

Keep exploring

More tools you'll like

Hand-picked utilities that pair well with the one you're on — all free, client-side, and zero-signup.

More css & ui generators

See all →

Popular across EpitomeTool

Browse all →
Browse all 212+ free tools