Loading...

Favicon Generator — Create favicon.ico and PNG Icons Online

Favicon generator tools normally require an upload to a third-party server — this one runs entirely in your browser using Canvas. Drop in any logo or image and it center-crops non-square sources to a square, then renders PNG icons at every size modern browsers and devices expect: 16×16 and 32×32 for browser tabs, 48×48 for Windows, 180×180 for Apple touch icons, and 192×192 / 512×512 for Android and PWA manifests. Download each size individually or copy the ready-made HTML `<link>` snippet straight into your page `<head>`.

Features

  • Six standard sizes

    Generates 16, 32, 48, 180 (apple-touch-icon), 192, and 512 px PNGs in one pass.

  • Automatic square crop

    Rectangular source images are center-cropped to a square using the shorter dimension before scaling.

  • Ready-to-paste HTML

    Copies the exact <link rel="icon"> and <link rel="apple-touch-icon"> tags for every generated size.

  • No upload

    Everything renders locally with the Canvas API — your logo never leaves your device.

How to generate favicons online

Turn any logo or image into a full set of favicon PNGs.

  1. Drop your imageDrag a logo or image onto the generator or click to pick a file. Any raster image format works.
  2. GenerateClick Generate Favicons. Non-square images are center-cropped to a square first.
  3. Download each sizeDownload the individual PNGs you need, named favicon-16x16.png, favicon-32x32.png, and so on.
  4. Copy the HTMLCopy the generated <link> snippet and paste it into your HTML <head>.

Examples

Generate favicons from a square logo

Input
logo.png (512×512)
Output
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-180x180.png, favicon-192x192.png, favicon-512x512.png

A 512×512 source needs no cropping and upscales cleanly to no larger size.

Frequently Asked Questions

Is my image uploaded anywhere?
No. The generator decodes and resizes your image entirely in the browser using the Canvas API. Nothing is uploaded, logged, or stored on a server.
What sizes do I actually need?
At minimum, 16×16 and 32×32 cover browser tabs, 180×180 covers Apple touch icons, and 192×192/512×512 cover Android home screens and PWA manifests. 48×48 is used by some Windows contexts. This tool generates all six.
What happens if my image is not square?
It is automatically center-cropped to a square using the shorter side before being scaled to each favicon size, so the most important content should be centered in the source image.
Does this produce a .ico file?
No, it produces PNG files, which every modern browser accepts via <link rel="icon">. If you specifically need a legacy .ico, convert one of the generated PNGs with a dedicated ICO tool.
Where do I put the downloaded files?
Place them in your site's public root (or wherever your framework serves static files) and paste the copied HTML snippet into the <head> of your pages, adjusting the href paths if needed.
Why is my favicon blurry at small sizes?
Small icons (16×16) show fine detail poorly. Start from a simple, high-contrast logo mark rather than a detailed illustration for the best results at 16×16 and 32×32.