Skip to main content
ImageSize
New toolA full set in 20 files

Icon forge

One logo in, a whole set out: browser tabs, nav logo, iPhone home screen, Android / PWA, Chrome extension, circular avatars. Every size is rendered and named by the platform’s published rules, and previewed inside a real interface at the size it will actually be shown.

Drop an image here, or click to choose

JPG / PNG / WebP / AVIF / GIF (first frame only); 2560px or wider recommended.

⌘ / Ctrl + V paste directlyDrop anywhere to replace11 sizes at once

A 1024×1024 square logo is the recommended source; non-square works too and is embedded proportionally with padding.

What you actually get

网站浏览器标签
16×16 / 32×32 · ICO / PNG
网站顶部导航
512 / 1024 · SVG / 透明 PNG
iPhone 主屏幕
180×180 · PNG
Android / PWA
192×192 / 512×512 · PNG
Chrome 扩展
16 / 48 / 128 · PNG

Three traps worth knowing

01

iOS icons cannot carry alpha

Hand a PNG with alpha to apple-touch-icon.png and the system fills transparent pixels with black — a dark ring on a dark phone that looks like a broken asset. Those sizes are forced opaque here.

02

maskable only guarantees the middle 80%

Android adaptive icons are masked to the launcher’s shape (circle, squircle, teardrop) and only the central 80% is guaranteed visible: the safe circle at 512 is just 410px across. Push type or a key shape to the edge and it gets cut on the home screen.

03

At 16px only a silhouette survives

A favicon in a tab is 16×16 — 20 pixels in total. Hairlines, gradients and small type all disappear and only colour blocks remain. After generating, blow the preview up to 8× and look at the outline; if it is not recognisable, simplify the mark.

Common questions

When the files are fine but the live site ignores them
Is my image uploaded anywhere?

No. Decoding, embedding and encoding all run in the browser canvas and the page has no file endpoint — open the Network panel: apart from the page’s own static assets, nothing carries your image.

Do all 20 files have to ship?

No. The minimum is favicon.ico (legacy clients ask for nothing else) plus one PWA icon (192 or 512, which is what installability checks). Add whatever else matches the platforms you target. The iOS home-screen group has 4 sizes (180 / 167 / 152 / 120); for iPhone only, 180 is enough.

I replaced the icon but the tab still shows the old one?

Favicons are among the most stubborn caches on the web, often outliving the HTML that references them. Hard-reload locally (⌘/Ctrl + Shift + R); in production you also wait out both the CDN and the browser cache. To verify immediately, append ?v=2 to the link href — a new URL forces a refetch. None of this is about the files you generated.

Do I need favicon.ico and the PNGs both?

Yes, and you do not need to split anything. favicon.ico covers legacy clients that request /favicon.ico directly, and it already embeds 16 / 32 / 48, so the browser picks by display density; the PNGs are explicit declarations for modern browsers and feed readers.

Why does favicon.svg look blurry when zoomed?

Because those two files are bitmaps embedded in SVG, not true vectors. A bitmap cannot be converted to a vector — traced paths at 16px are pure noise, so honest embedding is better. They exist so filenames and references line up; for production, have a designer export a real vector SVG over the same name.

How large should the source be? Can it be non-square?

A 1024 × 1024 square logo covers the largest output exactly. Non-square works too: it is embedded proportionally in the centre of the canvas with padding on the short axis, never stretched, and the padding is controlled by the inset slider.

What does “source too small” mean on a card?

That size’s canvas exceeds the usable area of your source, so those pixels can only be interpolated up and will look soft — the problem is the input, not the export. Either supply a larger source, or turn on “no upscale” to embed native pixels and see the pixel grid instead of a blur.

I chose squares, so why is the avatar square?

It always was. The 512 size exports a square canvas and the platform applies the circle after upload. If you set the shape to circle, the exported PNG has transparent corners, which some avatar slots fill with white or black — when in doubt keep it square.

Does dragging the inset slider recompute constantly?

It recomputes, but coalesced: it renders once you stop, and a further change cancels the previous run. Old results stay on screen during a re-render and are swapped in atomically at the end, so dragging never collapses the page into skeletons.

What else is in the ZIP?

A README.txt: source name and dimensions, the crop region if there was one, this run’s render parameters (shape / inset / background / transparency), the full file list and both snippets. A colleague can pick the bundle up without asking you anything. The archive is named like icons-20261024-1208.zip, with a local timestamp.

Need social image sizes instead?Use the size converterUse bulk compressionthe guide