Create favicon and app icon sizes from one source image

Use this page when a logo or square brand mark must become a practical icon pack for a website, web app or PWA. QuokkaPix exports common PNG sizes locally, so you can review sharpness and padding before adding the files to a project.

No file uploadsRuns locallyFree

Open live editor All tools

The button below opens the QuokkaPix editor with this tool already selected.

What this tool does

Generate favicon, Apple touch icon and PWA icon PNG sizes locally in your browser without uploading the logo.

16 to 512 px

Local ZIP export

Website and PWA icons

How it works

Upload a square or centered logo image.

Open the favicon/app icon output pack.

Review padding, contrast and shape at small sizes.

Download the ZIP with generated PNG icons.

FAQ

Does it upload my logo?

No. Icon generation runs locally in the browser.

Which sizes are generated?

The pack includes common favicon, Apple touch and PWA PNG sizes such as 16, 32, 48, 180, 192 and 512 px.

Practical QA notes

Favicon export needs more than one square icon

A favicon set has to work in browser tabs, bookmarks, pinned shortcuts and small mobile previews. Start from a simple, high-contrast mark and avoid text that disappears at 16 px. Export the expected icon sizes, then check whether the smallest version is still recognizable without relying on color alone. Keep a master icon separately, because the generated favicon files are delivery assets rather than a design source.

Use a simple shape with strong contrast.

Check 16 px and 32 px results before publishing.

Keep the source logo or icon separate from generated favicon files.

Design for 16 px before trusting the full pack

A favicon fails at the smallest size first. Before using the generated ZIP, open the 16 px and 32 px PNG files separately, not only the large 512 px icon. Thin text, detailed mascots and horizontal logos often disappear in a browser tab. A good source is usually a simplified mark with strong contrast and enough empty space around it. Keep the original brand artwork separately so the favicon pack can be regenerated with another crop or background.

Check 16 px and 32 px as real files.

Avoid text-heavy marks.

Keep a clean square master for future icon packs.

If you need the next step, open the matching tool and continue in the same editor.