🌟 Favicon Generator: Create Favicons From an Image

By Shihab Mia · Reviewed by ToolNimba Review Team, Front-end and web standards review · Updated 2026-07-14

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 generator turns one image into the small icons a browser shows in its tab, bookmarks and history, and that phones use when a site is saved to the home screen. Upload a square graphic and this favicon generator redraws it on a canvas at the exact 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. You preview every size, download each PNG, and copy a ready-made set of HTML link tags to paste into your page head. Everything runs in your browser, so your image is never uploaded to a server. The quickest path is a clean, square source of at least 512 x 512 px, which downscales sharply to every smaller icon.

What is the Favicon Generator?

A favicon (short for "favorite icon") is the tiny graphic a browser pairs with your site. The original 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 each browser or device pick the one it needs. A 16 px icon is enough for a crowded tab, while a 512 px icon is used when someone installs your site as an app, so one fixed size can never look sharp everywhere. A good favicon generator solves this by producing the full set from a single upload.

Resizing is where most homemade favicons fail. 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 512 x 512 px gives the best result: the favicon generator 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 look you get when a rectangle is forced into a square frame.

Design matters as much as size. At 16 px an icon is only 256 pixels in total, so fine text, thin lines and busy photos turn to mush. The favicons that read well are simple: a single bold letter, a monogram, a recognisable shape or the most distinctive part of a logo, with strong contrast against both light and dark browser chrome. Test your icon at true 16 px, not just in the large preview, because a mark that looks great at 512 px can be illegible in the tab where it actually lives.

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 favicon 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 such as /assets or /icons.

Beyond the raw PNGs, a complete 2026 favicon setup often adds three optional pieces: a favicon.ico fallback that bundles 16, 32 and 48 px for older browsers, an SVG favicon that scales infinitely and can adapt to dark mode, and a web app manifest (site.webmanifest) that lists the 192 and 512 px icons Android and PWAs read. This tool focuses on the PNG icons and link tags that cover the vast majority of real-world needs; the reference tables below show exactly where the optional files fit if you want the maximum-coverage set.

Privacy is a real advantage of an in-browser favicon generator. Many online tools upload your logo to their servers to process it, which is a concern for unreleased brands and confidential projects. Here the file is read with the browser FileReader, redrawn on a canvas, and exported with canvas.toBlob entirely on your device, so nothing ever leaves your computer.

When to use it

Adding a proper favicon to a new website, blog or landing page so it looks finished in the browser tab instead of showing a blank default icon.
Creating an Apple touch icon (180 px) and a 512 px PWA icon so a site looks right when saved to an iPhone, iPad or Android home screen.
Refreshing an old 16x16-only favicon with crisp PNGs at every size modern browsers and devices expect.
Turning a logo, monogram, emoji rendering or simple graphic into a complete favicon set without installing design software.
Producing consistent icons for a client handoff, with matching link tags ready to drop into the site template.
Generating quick favicons for internal tools, staging sites and demos where a memorable tab icon speeds up tab-switching.

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 colour if the image has transparency you want filled (useful for the Apple touch icon).
Press Generate favicons to redraw the image at 16, 32, 48, 180 and 512 px.
Preview each size, checking especially that the 16 px version is still legible, 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 x scale by height x scale and centred, leaving the chosen background around it.

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 16 px icon, the 1024 x 1024 source is scaled down to 16 x 16 px on the canvas.
For the 32 px icon, the same source is scaled to 32 x 32 px.
For the 180 px Apple touch icon, the 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 2x 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, all downscaled from one high-quality source.

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 left and right edges 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.

You upload a transparent PNG monogram and want a solid tile for the iOS home screen.

Set the background colour to white (iOS renders Apple touch icons on an opaque tile).
Leave the square crop on since the monogram is already square.
Press Generate favicons; the transparent areas are filled with white before export.
Download the 180 px apple-touch-icon.png and the smaller PNGs for tabs.

Result: A clean monogram on a white tile for iOS, plus transparent-friendly small icons for desktop tabs.

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, test legibility here)
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 and shortcut views
180 x 180	apple-touch-icon.png	iOS and iPadOS home screen and Safari pinned tabs
512 x 512	icon-512x512.png	Progressive web apps, Android install prompt and splash

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

The full 2026 favicon file set and which files this tool covers

File	Format	Covered here?
favicon-16/32/48.png	PNG	Yes, generated directly
apple-touch-icon.png (180)	PNG	Yes, generated directly
icon-192 / icon-512.png	PNG	512 generated; 192 optional for the manifest
favicon.ico (16/32/48 bundle)	ICO	Optional legacy fallback, add separately if needed
icon.svg	SVG	Optional, infinitely scalable and dark-mode capable
site.webmanifest	JSON	Optional, lists the 192/512 PNGs for PWAs and Android

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.
Designing for 512 px instead of 16 px. A mark with fine text or thin lines can look great in the large preview yet turn to mush in the actual tab. Simplify to a bold letter, monogram or shape and always check the 16 px version before shipping.
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 transparency unhandled for iOS. 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 on the home screen.

Glossary

Favicon: The small icon a browser shows for a site in tabs, bookmarks and history, and that devices use for home-screen shortcuts.
favicon.ico: The classic favicon container that can bundle several small sizes (16, 32 and 48 px) in one file, still used as a legacy fallback.
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.
Web app manifest: A site.webmanifest JSON file that lists icons (commonly 192 and 512 px), the app name and theme colour for PWAs and Android.
SVG favicon: A vector favicon that scales to any size and can adapt to dark mode with CSS, supported by Chrome, Firefox and Edge.
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, letter or logo reads better at 16 px than a busy photo.

Is my image uploaded to a server?

No. The favicon generator 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, which is ideal for unreleased brands.

Does it create a favicon.ico file?

This tool generates modern PNG favicons rather than the older ICO container, because current browsers fully support PNG icons declared with link rel=icon tags. If you still want a favicon.ico for very old browsers, it should bundle 16, 32 and 48 px; you can add one separately as a fallback.

Do I still need a favicon.ico in 2026?

For most sites, no. Modern browsers read PNG icons from link tags, so the PNG set here is enough. A favicon.ico is only useful as a fallback for legacy browsers and for tools that look for /favicon.ico at the site root by default.

What about an SVG favicon?

An SVG favicon is optional but nice: it scales to any size from one file and can switch colours in dark mode using CSS. Support covers Chrome, Firefox and Edge, so pair it with PNG fallbacks. This tool focuses on the PNGs, which every browser understands.

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 favicon generator builds and paste them inside the head section of your HTML. The browser will pick the right size automatically.

What sizes do Android and PWAs need?

Android and progressive web apps use 192 x 192 px for the home-screen icon and 512 x 512 px for the install prompt and splash screen, listed in a web app manifest (site.webmanifest). This tool outputs the 512 px icon; add a 192 px entry and the manifest for full PWA coverage.

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 that the link tag paths match the deployed files also helps.

Can I make a favicon from text or an emoji?

Yes, indirectly. Render your letter, monogram or emoji as a square image (a screenshot or a simple canvas export works), then upload that image here. The favicon generator will resize it to every size and build the link tags.

Sources

Favicon Size Guide, All Favicon Sizes , favicon.io (2026)
How to Favicon: Files That Fit Most Needs , Evil Martians (2026)
Configuring Web Applications, Specifying a Webpage Icon for Web Clip , Apple Developer