Overview
Turn a logo into a complete favicon set: sixteen, thirty-two, forty-eight and sixty-four pixel sizes plus the 180-pixel Apple touch icon and the 192-pixel Android or PWA icon. Each size is generated on a canvas at high quality, previewed in a mock browser tab, and downloadable as PNG, with a multi-resolution favicon.ico (16, 32 and 48 pixels) and a copy-paste HTML snippet included.
How It Works
Drop a PNG, JPG, SVG, GIF or WebP image - square sources around 512 pixels work best. The page generates all six sizes instantly and shows each on a checkerboard so transparency is visible, labelled with its real-world use such as browser tab or iOS home screen; the 180-pixel Apple touch icon is flattened onto white because iOS would otherwise paint transparent pixels black. A mock browser tab renders your actual 16-pixel favicon next to an editable tab title, so you can judge legibility where it matters. Download any single size, press favicon.ico for one multi-resolution icon file, or press Download All for the six PNGs, which staggers the files to avoid browser pop-up blocking. Below, a ready-made link snippet shows the head tags to paste.
Step-by-Step Usage Guide
- Drop a square logo image, ideally around 512 by 512 pixels.
- Judge the 16-pixel result in the mock browser tab preview.
- Download individual sizes or press Download All.
- Paste the provided link tags into your page's head element.
Technical Specifications & Standards
Each size is produced by drawing the source onto a dedicated canvas with imageSmoothingQuality set to high, then exported as a PNG data URL - genuinely resampled pixels, not CSS-scaled previews, which is why the 16-pixel tab preview can look convincingly like the real thing. The size list matches current platform conventions: 16 and 32 for browser tabs and retina tabs, 48 for Windows shortcuts, 64 as a large Windows site icon, 180 for apple-touch-icon and 192 for Android Chrome and PWA manifests. The included HTML snippet reflects those pairings and adds a /favicon.ico link. Two things to know: a favicon.ico button packs the 16, 32 and 48 pixel renders into one multi-resolution ICO container (the 64, 180 and 192 pixel sizes are PNG only), and non-square sources are fitted inside the square at their original aspect ratio, centred with transparent bars, rather than stretched or cropped - a square logo still gives the cleanest result.
Targeted Use Cases
- Launching a website that needs tab, bookmark and home-screen icons.
- Generating PWA manifest icons from an existing logo.
- Checking whether a detailed logo survives 16-pixel rendering before shipping.
- Producing the standard icon set for a client handoff.
Notes & Gotchas
- Start from a square, high-contrast source; intricate logos turn to mush at 16 pixels.
- Use the mock tab preview with your real product name before deciding.
- Place the downloaded PNGs in your public or web-root folder and keep the snippet's filenames.
- For legacy favicon.ico requirements, use the favicon.ico button and put the file in your web root.
Frequently Asked Questions
Which sizes are generated and why those?
16, 32, 48, 64, 180 and 192 pixels: browser tabs, Windows shortcuts, the Apple touch icon and Android/PWA manifest icons respectively - the set modern platforms actually request.
Do I get a real .ico file?
Yes. The favicon.ico button downloads one multi-resolution file containing the 16, 32 and 48 pixel images. The other sizes are individual PNGs, which all modern browsers accept via link tags.
Why does my logo look bad at 16 pixels?
Detail does not survive a 16-pixel canvas. Simplify the mark: fewer elements, thicker strokes, high contrast. The tab preview exists precisely to check this before shipping.
Where do I put the generated files?
In your site's public folder or web root, with the filenames matching the provided HTML snippet. The PNG names are built from your uploaded file's name (for example /logo-32x32.png) and the snippet also points at /favicon.ico, so put the ICO in the web root too.