What image should I use as the source?

A square image works best. Use a simple, recognizable version of your logo. Complex images with fine details will not be legible at small sizes like 16x16.

What sizes are generated?

The tool generates PNGs at 16x16, 32x32, 48x48, 180x180 (Apple touch icon), 192x192 (Android), and 512x512 (PWA) pixels.

Do I need all these sizes?

For basic websites, 16x16 and 32x32 cover browser tabs. For mobile and PWA support, you need the larger sizes too. The HTML snippet includes all of them.

Can I use a JPG as the source?

Yes. Any common image format works. The tool converts your source to PNG for the favicon output.

any image. every size.

generate favicons at every size from any image. download PNGs for 16x16 through 512x512 plus the HTML snippet.

drop your image here

or click to browse

choose file

PNG, JPG, SVG

your images never leave your browser

What this tool does

Generate a complete set of favicon assets from a single source image — the small icons that appear in browser tabs, bookmarks, search results, home-screen shortcuts, and OS-level pinned-site indicators. All in one zip, ready to drop into your site.

Why “favicon” means so many files

For most of the web's history, a favicon was one 16×16 ICO file in the root of your domain. That stopped being sufficient around 2014 when retina displays, mobile home-screen icons, and platform-specific tile pinning introduced a half-dozen additional formats and sizes.

A modern favicon set includes:

favicon.ico — the legacy file. Still requested by older browsers and many crawlers. Contains 16×16 and 32×32 versions in one container.
favicon-32x32.png and favicon-16x16.png — modern browsers prefer these over the ICO when present.
apple-touch-icon.png — 180×180. iOS uses this when a user adds your site to their home screen.
android-chrome-192x192.png and 512x512.png — Android home-screen shortcuts.
site.webmanifest — small JSON file that tells the browser which icon belongs at which size.
safari-pinned-tab.svg— single-color SVG for Safari's pinned tab indicator (mostly legacy but still respected).

Size constraints that matter

At 16×16 pixels, almost no logo reads as itself. Detailed marks become unrecognizable mush. The favicon at smallest sizes should be either a single letter, a heavily simplified version of your full mark, or a single recognizable shape.

Practical rule: zoom your full logo down to 32 pixels in any image editor. If the result is unreadable, design a separate “favicon mark” — usually just the most distinctive single element of the logo.

Dark mode considerations

Some browsers now respect a separate favicon for dark mode using media=(prefers-color-scheme: dark)in the link tag. If your favicon is dark and disappears against dark browser chrome, generating a light variant and serving both is the cleanest fix.

The HTML you need

After generating, drop the files into your site's public directory and add the relevant link tags in your HTML head:

html

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

The generated zip includes a snippet file with the exact markup pre-populated for your filenames.

Browser-only generation

Each output size is rendered by the browser via canvas and downloaded as a zip. Your source image — which might be a brand logo not yet released — stays on your machine.