Image to Favicon

What is a favicon, and what is this tool?

A favicon is the small icon a browser shows in a tab, a bookmark, the history list, and on a phone's home screen when someone saves your site. Getting it right used to mean opening an image editor, exporting half a dozen sizes by hand, and hand-writing the markup. This image to favicon tool does all of that from a single image: you drop in a logo or graphic, it rescales it to every size a modern site needs, packs the classic sizes into a real favicon.ico, and hands you the exact HTML to wire it up. Everything happens on a canvas in your own browser, so your image is never uploaded, stored, or logged.

What sizes it generates and why

• 16×16 and 32×32 PNG — the classic browser-tab icon. 16 is the base size; 32 covers high-DPI (Retina) screens so the icon stays crisp.
• 48×48 PNG — used by Windows for site icons and the taskbar.
• 180×180 apple-touch-icon — the icon iOS uses when someone adds your site to their iPhone or iPad home screen.
• 192×192 and 512×512 PNG — the Android and Progressive Web App (PWA) icons referenced from a web manifest, used for the home screen and install splash.
• favicon.ico — a single multi-resolution file containing the 16, 32, and 48 versions, for the legacy /favicon.ico request browsers still make.

How to use it

1. Add your image — click to choose a file, drag and drop it, or paste with Ctrl+V (Cmd+V on Mac). A square, high-contrast graphic works best.
2. If the image is not square, keep centre-crop on so the tool takes the largest centred square instead of stretching it.
3. Every size renders instantly and appears in the preview grid.
4. Download the whole set as a ZIP, or grab the favicon.ico on its own.
5. Copy the provided HTML link snippet into the head of your pages, and drop the files in your site root.

The method behind it

The image is decoded into an off-screen Image object so the browser knows its true pixel size. For each target size, a canvas is sized to that square, and one drawImage call paints the optionally centre-cropped source into it, letting the browser's high-quality resampling smooth the result. Each canvas is exported with canvas.toBlob as a PNG. To build the icon file, the 16, 32 and 48 pixel PNGs are packed into a standard ICO container using the modern PNG-in-ICO format, where the ICO header and directory simply point at each embedded PNG by offset. No server and no round trip are involved.

Examples

• A 512×512 logo: already square, so every size is a clean downscale. You get six PNGs from 16 up to 512 plus a favicon.ico, ready to drop into a site root.
• A 1200×800 banner graphic: with centre-crop on, the tool takes the centred 800×800 square, then scales that down — no squashing.
• A PWA project: grab the 192 and 512 PNGs for the manifest and the 180 Apple touch icon, and paste the markup straight into your app.

Common use cases

• Launching a new website or landing page and needing the favicon done in one minute.
• Refreshing branding across an existing site with a new logo.
• Building a PWA that needs the 192 and 512 manifest icons alongside the tab icon.
• Producing an iOS-ready Apple touch icon so saved-to-home-screen pages look polished.
• Generating icons for a private or pre-launch project where the logo must not be uploaded anywhere.

Why use this one

Most favicon generators upload your image to a server, queue the job, and sometimes add a watermark or a sign-up wall. This one runs entirely in your browser, so the file never leaves your device and the result is instant. You get the full size set, a real multi-resolution .ico, and the copy-ready HTML in one place — free, with no account and no limit on how many icons you generate.

It is part of a small image toolkit. To change a picture's dimensions first, use the Image Resizer; to keep only part of a graphic, try the Image Cropper; and to make a file lighter, reach for the Image Compressor.

Frequently asked questions