Skip to content
PratronHome

Favicon Generator

Generate every icon a modern website needs from a single image: a multi-size favicon.ico (16, 32, 48 px), the 180 px Apple touch icon, and 192/512 px icons for web app manifests — plus the exact HTML tags to paste into your <head>. The tool center-crops your image to a square, shows pixel-perfect previews at every size, and runs entirely in your browser.

Image Tools

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How it works

What the generator makes, and from what

square = min(width, height), cropped from the centre, redrawn per size

Your image is center-cropped to a square and redrawn at each icon size on a canvas in your browser. favicon.ico is a container rather than a single image: this one holds PNG-encoded 16, 32, and 48 px bitmaps, so a single file covers tabs, bookmarks, and the address bar.

  • Start from 512×512 px or larger. Upscaling a small source invents no detail — the 16 px preview is the honest test.
  • A non-square image loses its edges: the crop keeps the middle, so centre your mark before uploading.
  • Transparency survives. Every icon is PNG-encoded, including the ones packed inside the .ico.
  • On Android the 192 and 512 px icons are read from your web app manifest, not from the <head> tags — list them in both places.
  • The image is decoded and resized locally; it is never uploaded.

For reference

Which favicon files you actually need

FileSizeUsed by
favicon.ico16, 32, 48 pxBrowser tabs, bookmarks, the address bar
apple-touch-icon.png180 pxiOS and iPadOS home screens
icon-192.png192 pxAndroid home screens, web app manifest
icon-512.png512 pxPWA install prompts and splash screens

The generator produces all four, plus the <link> tags to paste into your <head>.

How to use

4 clear steps.

  1. Upload a square logo (512×512 px or larger looks best).

  2. Check the previews — the 16 px version should still be recognizable.

  3. Download favicon.ico and the PNG icons.

  4. Copy the HTML snippet into your site's <head>.

Good to know

Frequently asked questions

What favicon sizes do I actually need?
In practice: favicon.ico with 16/32/48 px for browser tabs and bookmarks, a 180 px apple-touch-icon for iOS home screens, and 192/512 px PNGs for Android and PWA manifests. This tool generates exactly that set.
Why does my favicon look blurry at 16 px?
Detailed logos don't survive being shrunk to 16×16. Icons that stay crisp use a simple shape, high contrast, and little or no text — check the 16 px preview before publishing.
Is .ico still required?
Modern browsers accept PNG and SVG favicons, but favicon.ico remains the most universally supported fallback — some tools and older browsers still request /favicon.ico directly, so shipping one costs nothing and covers every case.