Favicon Generator
Square images work best. The file stays on your device.
<link rel="icon" href="/favicon-32.png" sizes="32x32"> <link rel="icon" href="/favicon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/favicon-180.png">
The favicon generator resizes one image into the six sizes browsers and platforms actually request (16, 32, 48, 180, 192 and 512 pixels) and gives you the link tags to reference them. The image is processed in your browser using a canvas, so nothing is uploaded.
How it works
Each size exists for a specific consumer, which is why the list is not arbitrary.
- 16px, the browser tab and address bar at standard density.
- 32px, the tab at 2x density, and the Windows taskbar.
- 48px, Windows site shortcuts.
- 180px, the Apple touch icon for the iOS home screen.
- 192px and 512px, Android and the web app manifest, where 512 is used for the splash screen.
Resizing uses cover-fit: the image is scaled until it fills the square and the overflow is cropped, rather than being squashed. A non-square source therefore loses its edges rather than distorting.
Examples
A square logo
Source
512 x 512 PNG with transparency
Background
Keep transparent
Result
Six PNGs from 16 to 512 pixels, transparency preserved
A square source needs no cropping, so every size is a clean downscale. Transparency survives because PNG is the output format throughout.
A wide logo
Source
800 x 300 JPG
Background
Fill with a colour
Result
Six square PNGs, with the left and right thirds of the logo cropped away
Cover-fit scales the 300px height up to fill the square, which pushes the width well beyond the frame. A wide wordmark is usually better replaced by a single letter or a symbol at favicon sizes.
Frequently asked questions
Do I still need an .ico file?
Rarely. Every current browser accepts PNG favicons through a link tag. An .ico at the site root is still useful as a fallback, because some crawlers and older software request /favicon.ico directly without reading the HTML.
Why does my logo look like a blur at 16 pixels?
Because 16px is 256 pixels in total, which cannot hold detail. Anything with fine lines, gradients or more than one or two shapes turns to mush. Favicons that work are usually a single letter or a simple silhouette in a strong colour.
What happens to a non-square image?
It is scaled to fill the square and the overflow is cropped, centred. That keeps the proportions correct at the cost of losing the edges. Squashing to fit would keep everything visible but distort the artwork, which usually looks worse.
Why generate a 512px icon for something displayed at 16?
Because the larger sizes are not favicons in the tab sense. 180px is the iOS home screen icon, and 192 and 512 are referenced from the web app manifest, where 512 becomes the splash screen image on Android.