Skip to content
ToolBoxGeniehome

Favicon Generator

Image Tools · Added

Produce every favicon size a modern browser asks for from a single source image, with the markup to install them. Six PNGs covering the browser tab, the bookmark bar, the iOS home screen and the PWA splash screen — generated in your browser, so unreleased branding never leaves your machine.

Or drop a file onto this box.

A square image of at least 512×512 gives the best result. It is read from your device and never uploaded.

How to use the favicon generator

  1. 1Choose a source image. Square and at least 512×512 gives the best result, because every size is derived from it by scaling down.
  2. 2Decide how a non-square image should be handled: cropped to its centre square, or contained whole with background around it.
  3. 3Leave transparency on for a logo that should sit on any colour, or turn it off and pick a background if your artwork needs one.
  4. 4Check the previews. The 16×16 is the one to look at hardest — detail that reads fine at 512 usually turns to mud at tab size.
  5. 5Download each PNG to your site root, then paste the link tags into your <head> and the icons entry into your manifest.

Examples

A square logo, straight through

Input
512×512 PNG with a transparent background
Result
Six PNGs: 16, 32, 48, 180, 192 and 512, transparency preserved

The ideal case. Nothing is cropped and nothing is enlarged, so every size is a clean reduction of the original.

A wide banner logo

Input
1200×400 PNG · crop to centre square on
Result
Icons built from the centre 400×400 region

A wide logo cannot become a square icon without losing its sides. If the centre of your banner is not the recognisable part, crop it deliberately first rather than letting the middle be chosen for you.

Artwork that is too small

Input
128×128 PNG
Result
A full set, but the 512×512 is enlarged and soft

The tool warns when the shorter side is under 512. Scaling up cannot add detail, and the PWA splash screen is where that shows most.

About the favicon generator

Why one image cannot serve every size

A browser does not scale your favicon on demand from a single large file — or rather, it will, and the result is worse than doing it deliberately. Downscaling in a browser is a general-purpose operation optimised for speed; producing each size as its own file lets each one be checked and, where necessary, redrawn. That is why the link tags declare a size for each: the browser picks the file closest to what it needs rather than resampling something else.

The gap between the largest and smallest is enormous. 512×512 is 262,144 pixels; 16×16 is 256. That is a thousandfold reduction, and it is the reason a logo that looks precise in a design tool can arrive in the tab as an indistinct smudge. Anti-aliasing that reads as crispness at full size becomes blur at icon size, and thin strokes disappear entirely below about two pixels wide.

Designing for sixteen pixels

The practical advice from anyone who has shipped a favicon they were happy with is the same: design the 16×16 first, or at least check it first. Detail is not the goal at that size — recognisability at a glance, among twenty other tabs, is. That usually means one strong shape, high contrast against both light and dark tab bars, and no text beyond a single character.

It is entirely legitimate for the small sizes to be a different image from the large ones. Many well-known sites use a simplified monogram at 16 and 32 and the full logo at 180 and above, because those are seen in different contexts at different scales. This tool derives every size from one source, which is the right default and the common case; if your 16×16 preview does not survive, the answer is to prepare simplified artwork and run it again rather than to accept the reduction.

Transparency, backgrounds and dark mode

PNG carries an alpha channel, so a transparent icon adapts to whatever sits behind it — which is usually what you want, given that browser tab bars are light in one theme and dark in another. An icon drawn in dark grey on transparency will vanish against a dark tab bar; one with a solid background of its own will always be visible but will show as a coloured tile rather than a floating mark.

The choice is genuinely contextual, so both are offered. If your mark has enough internal contrast to survive on any background, keep transparency. If it relies on sitting on white, fill the background here rather than discovering the problem after launch, and pick the fill deliberately — the default white is a reasonable starting point, not a recommendation.

Frequently asked questions

Which favicon sizes do I actually need?
Six cover everything current: 16 and 32 for the browser tab and bookmarks, 48 for the Windows site icon, 180 for the iOS home screen, and 192 and 512 for Android and the PWA splash screen. Older guides list twenty or more, covering Windows tiles and legacy touch icons that no current browser requests. Emitting those teaches people to paste markup they cannot audit, so this tool does not.
Do I still need a favicon.ico file?
Almost certainly not. Every browser in current use accepts PNG favicons through the link tags, and has for years. The .ico format matters only if you must support very old Internet Explorer, and it exists mainly because browsers used to request /favicon.ico from the site root automatically when no link tag was present.
Why does my icon look muddy in the tab?
Because 16×16 is 256 pixels in total, and detail that reads clearly at 512 simply has nowhere to go. Logos with fine lines, gradients or any text almost always fail at that size. The usual fix is a separate simplified mark for the small sizes — a single letter or shape rather than the full logo — which is a design decision no scaling algorithm can make for you.
What happens to a non-square image?
You choose. Cropping to the centre square keeps the artwork at full resolution but discards the sides, which is right for a logo whose subject is central. Containing it fits the whole image inside the square and fills the remainder with your background colour, which preserves everything but makes the artwork smaller within the icon. Neither is universally correct, which is why it is a control rather than an assumption.
Are my files uploaded?
No. The image is decoded and redrawn at each size by your own browser's canvas, and the PNGs are written straight to your downloads folder. Nothing is sent anywhere, which matters here specifically because a favicon is often the first asset produced for a brand that has not launched yet.
Where do the files and the markup go?
Put the PNGs at the root of your site, so that /favicon-32x32.png resolves, then paste the link tags into the <head> of every page and the icons block into your site.webmanifest. The generated paths assume the root; if you serve icons from a subdirectory, edit the href values to match or they will silently 404 and browsers will fall back to a blank icon.

Related tools