toolready. Favicon Generator

Favicon Generator

Image → full favicon set (16/32/48/180/192/512) + manifest + HTML snippet.

What this does

Takes one square-ish image and renders it into the six PNG sizes browsers and mobile OSes actually ask for, then hands you a ZIP plus the exact <link> tags and manifest JSON to wire them up. The resizing runs on a canvas inside your tab — the image is never uploaded anywhere.

Which favicon sizes does this generate?

Six PNGs, each rendered independently from the source at high smoothing quality rather than scaled down from one another:

  • favicon-16x16.png and favicon-32x32.png — tab and bookmark icons.
  • favicon-48x48.png — Windows taskbar and site shortcuts.
  • apple-touch-icon.png at 180 × 180 — the iOS home-screen tile.
  • android-chrome-192x192.png and android-chrome-512x512.png — Android launcher and PWA splash.

The Download all (.zip) button bundles those six with a generated site.webmanifest and a short README. Each preview tile also has its own download link if you only need one size.

How do I add a favicon to my site?

  1. Drop or choose your logo (PNG, SVG, JPG, WebP, AVIF, GIF, BMP or HEIC, up to 50 MB).
  2. Check the 16px preview — that is the size that decides whether your mark is legible.
  3. Download the ZIP and copy every file into your site's web root, so they resolve at /favicon-32x32.png and friends.
  4. Paste the head snippet into your HTML <head>.
  5. Open site.webmanifest and fill in name and short_name — the tool leaves them empty on purpose.
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<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">

Do I still need a favicon.ico?

Almost certainly not. Every browser in current use accepts PNG favicons through the rel="icon" tags above, so this tool emits PNGs only and no multi-resolution .ico. If you support ancient Internet Explorer or need a bare /favicon.ico for a crawler that only probes that path, pack the 16/32/48 PNGs into an ICO with a build-time tool.

What happens to a non-square image?

It is center-cropped to a square before scaling — the longer axis is trimmed equally from both ends, not squashed. Anything near the left and right edges of a wide logo will be cut off, so crop deliberately first with image crop if the framing matters. A source of at least 512 × 512 avoids upscaling artefacts, and an SVG source is best of all since each size is rasterised from vectors.

Why is the manifest theme colour white?

The generated manifest ships neutral defaults — display: standalone, white theme_color and background_color, and the two Android icon entries. Change the colours to match your brand; they tint the Android splash screen and the browser UI when the site is installed.

Related: image resize for arbitrary dimensions, image convert for format changes, and QR code generator if you also need a scannable link to the site.