Favicon generator

Turn any image into a full set of favicon and PWA icons (16–512px) with the HTML to drop in. Generated locally with Canvas.

Click to choose a square image
PNG · JPEG · WebP · SVG — a 512×512+ square works best

What this favicon generator does

Pick a square image and get a complete icon set rendered client-side with the Canvas API — six PNGs covering browser tabs, Windows, iOS home screens, Android and installable PWAs — plus the link tags to paste into your head. Each size has its own download button. The image is read in your browser and never uploaded.

How to use it

Click the dashed area and choose a PNG, JPEG, WebP or SVG (512×512 or larger).
The six icons render immediately; preview thumbnails show how each looks.
Click 16px ↓, 32px ↓ … 512px ↓ to download each file with its conventional filename.
Copy the HTML for your head block and paste it inside head.
Put the files in your site root (or adjust the href paths).

The sizes and what uses them

Size	Filename	Used by
16×16	`favicon-16x16.png`	browser tab on 1x displays, bookmarks bar
32×32	`favicon-32x32.png`	tab on HiDPI displays, taskbar pins, most “favicon” slots
48×48	`favicon-48x48.png`	Windows site icons, Google Search results (needs a multiple of 48)
180×180	`apple-touch-icon.png`	iOS and iPadOS “Add to Home Screen”
192×192	`icon-192.png`	Android home screen, Chrome install prompt (via manifest)
512×512	`icon-512.png`	PWA splash screen, Play Store listing for TWAs (via manifest)

The generated markup references the 16 and 32px files, the Apple touch icon and a manifest:

<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 minimal modern favicon set

You do not need twenty files anymore. A practical 2025 setup is:

favicon.svg — a vector icon for modern browsers. It scales to any size and can respond to dark mode with a media query inside the SVG.
favicon.ico (32×32) at the site root — a fallback for old browsers and tools that request /favicon.ico blindly. Optional today.
apple-touch-icon.png (180×180) — iOS ignores SVG and the manifest.
site.webmanifest with the 192 and 512px PNGs — Android and PWA installs.

Put the SVG first and let the PNGs cover the rest:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

This tool produces the PNG half of that set. For the SVG, export the logo from your design tool and run it through the SVG optimizer.

Writing the web manifest

The link rel="manifest" line points to a JSON file you create next to the icons. A minimal one:

{
  "name": "WebTricks",
  "short_name": "WebTricks",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "theme_color": "#6b46ff",
  "background_color": "#ffffff",
  "display": "standalone"
}

purpose: "any maskable" tells Android it may crop the icon into a circle or squircle — keep the important part of the mark inside the central 80% (the “safe zone”) or ship a separate padded maskable icon.

Common mistakes

Tiny detail at 16px. A wordmark becomes a smudge. Use the symbol only and check the 16px preview; if it is unreadable, simplify the source.
Cached old favicon. Browsers cache favicons aggressively. Bump the path (/favicon-32x32.png?v=2) or hard-reload to see the new one.
Wrong path on subfolders. The snippet uses root-relative / paths. If the site lives under /docs/, prefix the paths or move the files.
Forgetting Google Search. Google wants an icon that is a multiple of 48px — the 48×48 file exists for exactly this; reference it with rel="icon" sizes="48x48" if the search result icon matters to you.

SVG optimizer — minify the vector favicon.svg that complements this PNG set.
Image compressor — shrink the 512px PNG further before shipping it in the manifest.
Image to Base64 — inline a tiny favicon as a data URL for single-file HTML pages.
Color converter — pick the hex for theme_color and background_color in the manifest.
Contrast checker — verify the mark stays visible on both light and dark tab bars.

FAQ

What source image should I use?

A square PNG or SVG at least 512×512 with the mark filling most of the canvas. Every size is scaled down from it, so a 1024px source is fine; a 200px source will look soft at 512px.

Do I still need an .ico file?

Only for very old browsers and some Windows shortcuts. Every current browser accepts a PNG via a link rel=icon tag. If you want one anyway, a 32×32 favicon.ico at the site root is picked up automatically without any markup.

Why does my SVG fail to load?

The browser needs a size to rasterize it. Make sure the SVG root has a viewBox and ideally width and height attributes; SVGs with only percentage sizes or none at all cannot be drawn onto a canvas.

Does the tool make the site.webmanifest file?

No — it generates the six PNGs and the head markup. Write the manifest yourself (a template is on this page) and reference icon-192.png and icon-512.png from it.

What if my logo is not square?

The source is stretched to a square, so a wide logo will be distorted. Pad it to a square canvas in your image editor first, or export just the symbol without the wordmark.

Will the icons have transparency?

Yes if the source has an alpha channel — the output is PNG. For the apple-touch-icon iOS flattens transparency to black, so give that one a solid background color if the mark is dark.