Favicon Generator Free Online

One logo in, the complete favicon set out: favicon.ico, every PNG size, and the HTML to paste. Non-square images are padded, never cropped. Runs in your browser — nothing uploads.

Drop an image

Favicon Generator — Free, Fast & Private

A favicon is the smallest branding surface a website has and the one users see most often: it sits in every browser tab, every bookmark list, every history entry, and every phone home screen shortcut. It is also the surface with the messiest requirements, because four different platforms grew four different conventions for it. This tool collapses that mess into one step — drop a single image and it renders the complete standard set, packs the classic favicon.ico, and writes the HTML for you.

Everything happens in your browser through the Canvas API and MiniPx's shared encoder. Your logo is never uploaded, which matters more than it sounds: favicon generators are a popular place to hand over unreleased logos and draft brand marks, and most competing tools receive that artwork on their servers. Here you can switch off your connection after the page loads and the generator keeps working.

The sizes a modern site actually needs

Favicon advice online tends to list fifteen or twenty sizes, most of them fossils. In practice, current browsers and platforms are served completely by seven files. The workhorses are 16×16 and 32×32 — standard and high-density browser tabs — with 48×48 covering desktop shortcuts and older Windows surfaces; those three travel together inside favicon.ico. Apple devices ignore all of that and request apple-touch-icon.png at 180×180 for home-screen bookmarks. Android and the web app manifest want 192×192 for the install icon and 512×512 for the splash screen. That is the whole list. Anything else — 57px and 114px apple-touch variants, Windows tiles, Opera Coast — belongs to platforms that no longer exist or now fall back to the sizes above.

Why one 512px source is enough

Every file in the set is a downscale of one master, so the only input that matters is a single square image at 512×512 or larger — a PNG with transparency is ideal, and if yours has a background you want gone, the background remover can strip it first. The generator downscales in halving steps rather than one jump, which keeps thin strokes from aliasing into grey mush at 16px, and it pads non-square sources onto a transparent square instead of cropping or stretching them. What no tool can automate is judgement at tiny sizes: a wordmark that reads beautifully at 512px is illegible at 16px. If your logo has fine detail, the honest fix is a simplified mark — an initial, a symbol — as the favicon source, and the preview grid on this page is where you find that out before your visitors do.

Installing the set: files, snippet, manifest

Upload the downloaded files to your site root, then paste the generated snippet into the <head> of every page — most sites do this once in a shared layout or template. The snippet declares favicon.ico for legacy and default lookups, the 16 and 32px PNGs for browsers that prefer them, and the apple-touch-icon for iOS. The two android-chrome PNGs are not linked from HTML at all: they are referenced from your web app manifest (site.webmanifest) under the icons array, which is what Chrome on Android and PWA installs read. One quiet insurance policy: even with no HTML at all, browsers request /favicon.ico from the site root by convention, which is why that file belongs at the root even if you link everything else explicitly.

The browser tab is a UI element, not decoration

People routinely keep twenty or more tabs open, and past about ten, browsers shrink tabs until the favicon is the only thing left identifying each one. A site without a favicon becomes a grey globe in that lineup — functionally invisible, and easy to close by accident. The favicon is also what search engines display beside mobile results, what bookmark managers index by, and part of what password managers use to visually match saved logins. Checking the 16px preview is two minutes of work that pays off every time someone tries to find their way back to your site.

File sizes, formats, and follow-on steps

Favicons are requested on effectively every page load, so bytes matter more per pixel than anywhere else on a site. The PNGs here come out of the same encoder that powers the PNG compressor, so they arrive already optimised — a 32px icon is typically one or two kilobytes. The 512px manifest icon is the only file where size is worth watching; if your artwork is photographic it can reach a few hundred kilobytes, and running it through the compressor is worthwhile. If you only need the .ico file and want control over which resolutions it embeds — including the 256px entry used by Windows tiles — the single-purpose PNG to ICO converter does exactly that and nothing else.

How it works

  1. Drop in your logo: Drag a PNG, JPG, or WebP into the tool — a square PNG at 512×512 or larger gives the best results at every size.
  2. Check the preview grid: Every generated size appears on a transparency checkerboard. Pay attention to 16px: if the mark is unreadable there, switch to a simpler source image.
  3. Download the files: Grab favicon.ico (which bundles 16, 32, and 48px) plus the loose PNGs — apple-touch-icon at 180px and the 192/512px manifest pair.
  4. Paste the HTML snippet: Copy the generated <link> tags into your site’s <head>, upload the files to your site root, and reference the two android-chrome PNGs from your web app manifest.

Frequently asked questions

What sizes does a favicon need in 2026?
Seven files cover everything current: favicon.ico containing 16, 32, and 48px entries; loose PNGs at 16 and 32px for browsers that prefer them; apple-touch-icon.png at 180px for iOS; and 192px plus 512px PNGs referenced from the web app manifest for Android and PWA installs. Longer lists you see elsewhere are mostly legacy sizes that modern platforms no longer request.
What image should I start from?
A square PNG at 512×512 or larger, ideally with a transparent background. Every output is a downscale of this one master, so nothing smaller than 512px can feed the manifest icon without upscaling. Avoid fine detail and small text — at 16px there are only 256 pixels to work with.
What happens if my image is not square?
It is centered on a transparent square canvas — contain-fitted, so the whole image stays visible with transparent padding on the short axis. Nothing is cropped and nothing is stretched. If you would rather fill the square edge-to-edge, crop the source to a square first.
Where do the favicon files go on my server?
The site root. favicon.ico especially belongs at /favicon.ico because browsers request that exact path by convention when no link tag says otherwise. The link tags in the snippet then point to the root paths explicitly, and the android-chrome PNGs are listed in site.webmanifest rather than the HTML.
Why is my new favicon not showing up?
Favicon caching is notoriously sticky — browsers cache the old icon aggressively, sometimes for days. Force-refresh the page, or open the favicon URL directly and refresh it there. As a cache-busting move you can version the filename or append a query string in the link tag. The new icon is fine; the browser is just showing you the old one.
Is my logo uploaded to a server?
No. The whole set is rendered in your browser with the Canvas API, and the .ico container is assembled in JavaScript on your device. You can load the page, disconnect from the internet, and generate the full set offline — which is the simplest proof there is nothing to intercept.
Do I still need the .ico file if I link PNGs?
Yes, keep it. Browsers fall back to requesting /favicon.ico when other declarations fail or are missing, some older software only understands ICO, and pinned sites on Windows read it. Since the file bundles three resolutions in a couple of kilobytes, there is no cost to keeping the convention.

All Image Tools

Solutions by use case