🌟 Favicon Generator

By ToolNimba Web Team · Updated 2026-06-19

Choose a source image

A square image of at least 512 x 512 px works best. PNG, JPEG, WebP, GIF, BMP or SVG. Files stay on your device, nothing is uploaded.

HTML link tags

Place the PNG files in your site root (or adjust the paths), then paste these tags inside the head section of your HTML.

Choose an image to begin. All processing happens locally in your browser.

A favicon is the small icon a browser shows in the tab, the bookmarks bar and the history list, and that phones use when a site is saved to the home screen. This generator takes one image you upload and redraws it on a canvas at the sizes modern browsers and devices expect: 16, 32 and 48 px for tabs and bookmarks, 180 px for the Apple touch icon, and 512 px for progressive web apps and Android. Preview each size, download the PNG files, and copy a ready-made set of HTML link tags to drop into your page head. Everything happens in your browser, so the image is never uploaded anywhere.

What is the Favicon Generator?

A favicon (short for "favorite icon") is the tiny graphic a browser pairs with your site. The classic favicon.ico lived at the site root and held a single 16x16 image, but the modern approach is to ship several PNG files at different sizes and let the browser or device pick the one it needs. A 16x16 icon is enough for a crowded tab, while a 512x512 icon is used when someone installs your site as an app, so a single fixed size can never look sharp everywhere.

Resizing is where most homemade favicons go wrong. Browsers draw favicons at exact pixel dimensions, so an icon should be generated for each target size from the highest-quality source available, not stretched up from a tiny image. That is why a square source of at least 512x512 px gives the best result: the tool can scale down cleanly to every smaller size, and downscaling preserves far more detail than upscaling ever can. If your source is not square, cropping to a centred square avoids the squashed, distorted look you get when a rectangle is forced into a square frame.

Once the files exist, the browser still has to be told about them. That is the job of the link rel=icon tags (and the link rel=apple-touch-icon tag for iOS) you place in the head of your HTML. Each tag names a file, its type and its size, so the browser can choose the right one. This generator builds those tags for you with sensible default paths, so you can paste them straight in and adjust the paths if your icons live in a subfolder.

When to use it

Adding a proper favicon to a new website, blog or landing page so it looks finished in the browser tab.
Creating an Apple touch icon (180 px) and a 512 px PWA icon so a site looks right when saved to a phone home screen.
Refreshing an old 16x16 only favicon with crisp PNGs at every size modern browsers expect.
Turning a logo, emoji rendering or simple graphic into a complete favicon set without installing software.

How to use the Favicon Generator

Choose a source image, ideally a square graphic at least 512 x 512 px for the sharpest result.
Leave "Crop to a centred square" ticked if the image is not square, and pick a background if the image has transparency you want filled.
Press Generate favicons to redraw the image at 16, 32, 48, 180 and 512 px.
Preview each size, then use the Download button next to each one to save the PNG.
Copy the HTML link tags, put the files in your site root (or fix the paths), and paste the tags inside the head of your page.

Formula & method

For each target size s, the icon is drawn at exactly s x s pixels. Square crop: edge = min(width, height); the centred edge x edge region is scaled to s x s. Fit mode: scale = min(s ÷ width, s ÷ height); the whole image is drawn at width × scale by height × scale and centred.

Worked examples

You upload a square 1024 x 1024 px logo and generate the standard set.

The image is already square, so cropping changes nothing.
For the 32 px icon, the 1024 x 1024 source is scaled down to 32 x 32 px on the canvas.
For the 180 px Apple touch icon, the same source is scaled to 180 x 180 px.
For the 512 px PWA icon, the source is scaled to 512 x 512 px (a clean downscale from 1024).
Each canvas is exported with canvas.toBlob as a PNG download.

Result: Five sharp PNG files: 16x16, 32x32, 48x48, 180x180 and 512x512.

You upload a 1200 x 800 px banner and keep the centred-square crop on.

edge = min(1200, 800) = 800.
Crop offset sx = (1200 − 800) ÷ 2 = 200, sy = (800 − 800) ÷ 2 = 0.
The 800 x 800 region starting at x = 200, y = 0 is taken from the centre.
That square region is scaled to each target size, for example 32 x 32 px.
The sides of the banner are trimmed, so the icon is not squashed.

Result: A centred square is cut from the banner and resized to each favicon size without distortion.

Favicon sizes this tool generates and what each is for

Size (px)	File name	Primary use
16 x 16	favicon-16x16.png	Browser tab and address bar (smallest)
32 x 32	favicon-32x32.png	Standard tab icon on most desktop browsers
48 x 48	favicon-48x48.png	Windows site icons and some bookmark views
180 x 180	apple-touch-icon.png	iOS home screen and Safari pinned tabs
512 x 512	icon-512x512.png	Progressive web apps, Android splash and install

HTML link tags the generator produces (paths assume the site root)

Purpose	rel value	sizes value
Standard small icon	icon	16x16
Standard tab icon	icon	32x32
Windows / bookmarks	icon	48x48
Apple touch icon	apple-touch-icon	180x180
PWA / Android icon	icon	512x512

Common mistakes to avoid

Using a tiny source image. Upscaling a 64 px graphic to 512 px gives a blurry, blocky icon. Always start from the largest, cleanest source you have, ideally 512 px or more on each side, so every size is produced by downscaling.
Feeding in a non-square image without cropping. Forcing a wide or tall image into a square frame stretches it. Keep the centred-square crop on (or crop the image first) so the icon keeps its proportions instead of looking squashed.
Forgetting the link tags. Generating the files is only half the job. The browser will not use them until the link rel=icon and link rel=apple-touch-icon tags are added to the head of your HTML, with paths that match where the files actually live.
Expecting an instant change after upload. Browsers cache favicons aggressively. After you deploy new icons you may need a hard refresh, a cache clear, or simply some time before the new favicon appears in the tab.
Leaving JPEG-style transparency unhandled. If your source has a transparent background and you want a solid tile (common for the Apple touch icon), choose a white or black background before generating, otherwise transparent areas stay see-through.

Glossary

Favicon: The small icon a browser shows for a site in tabs, bookmarks and history, and that devices use for home-screen shortcuts.
Apple touch icon: A 180 x 180 px icon iOS uses when a site is added to the home screen, declared with a link rel=apple-touch-icon tag.
PWA icon: A large icon (often 512 x 512 px) used by progressive web apps for installation prompts, splash screens and the app launcher.
Canvas: A browser drawing surface used here to redraw and resize your image, then export each size as a PNG with toBlob.
Aspect ratio: The ratio of width to height. Cropping to a centred square keeps the icon from being stretched when the source is not square.

Frequently asked questions

What sizes does this favicon generator create?

It produces five PNG files: 16x16, 32x32 and 48x48 for browser tabs and bookmarks, 180x180 for the Apple touch icon used on iOS home screens, and 512x512 for progressive web apps and Android. Together these cover the sizes modern browsers and devices ask for.

What image should I upload for the best result?

A square image at least 512 x 512 px gives the sharpest icons, because every smaller size is produced by downscaling, which keeps far more detail than upscaling. A clean, simple graphic or logo reads better at 16 px than a busy photo.

Is my image uploaded to a server?

No. The tool reads your file with the browser FileReader and redraws it on a canvas entirely on your device. Nothing is sent over the network, so your image never leaves your computer.

Does it create a favicon.ico file?

It generates modern PNG favicons rather than the older ICO container, because current browsers fully support PNG icons declared with link rel=icon tags. PNG files give better quality at each size and are simpler to manage.

How do I add the favicons to my website?

Download each PNG, place the files in your site root (or any folder, adjusting the paths), then copy the link tags this tool builds and paste them inside the head section of your HTML. The browser will pick the right size automatically.

Why does my new favicon not show up right away?

Browsers cache favicons heavily, so an old icon can linger after you deploy a new one. Try a hard refresh, clear the site cache, or open the page in a private window. Confirming the link tag paths match the deployed files also helps.