Image → Icon

Generate favicon and PWA icons

The .zip includes:

favicon-16.png16×16
favicon-32.png32×32
favicon-48.png48×48
apple-touch-icon.png180×180
icon-192.png192×192
icon-512.png512×512
manifest.jsonPWA
head-snippet.html<head>

How it works

Image → Icon — Generate favicon and PWA icons. All processing happens in your browser — no upload, no signup, no email required. Free forever.

Last updated: 2026-05-06

Editor's note

We built this because every framework wants a different favicon size, Apple keeps inventing new ones, and the PWA manifest needs its own 192 and 512 px variants. The morning we counted twenty-eight separate icon files across the Multilities project we decided we were never doing it by hand again. The ZIP this tool spits out is the exact bundle we drop into public/ on a new site — anything smaller leaves a 404 in someone's manifest two months later and an iOS home-screen icon that looks blurry in screenshots.

The centre-crop preview is there because we kept feeding the tool tall logos and being surprised when the 16×16 lost the top of the letterform. Now you see the crop before you commit. We did not add background-removal or rounded-corner masking on purpose — those are design decisions that should live in your source file, not be guessed by a utility. Bring a clean square PNG and the rest is mechanical.

About Image → Icon

Image → Icon turns a single source PNG into a complete favicon and PWA icon set, including the manifest.json and HTML head snippet you need to wire it up. It is a one-click favicon oluşturma and PWA ikon üretici aimed at developers who would rather skip the manual ImageMagick dance.

Drop in your logo and the tool centre-crops it to a square, generates each required size (16, 32, 48, 180, 192, 512), zips everything together with a manifest, and gives you a copy-paste HTML snippet for your <head>.

Generation happens in your browser, so unreleased branding never leaves your machine. The output is a clean .zip you can commit straight into the public/ folder of your project.

How to use Image → Icon

Drag a square PNG into the upload area — square images work best, ideally with a transparent background.
Review the centre-cropped preview to make sure your logo isn't cut off; non-square sources are auto-cropped.
Click Generate icon set & download .zip and wait a moment while each size is rendered.
Unzip the archive into your project's public/ (or static/) folder.
Paste the included HTML head snippet into your <head> and reference manifest.json from the relevant <link> tag.
Hard-refresh in a private window to confirm the new favicon and PWA install icon appear.

Common use cases

Bootstrapping a new website where you have a logo PNG but no time to manually export 8 different sizes.
Adding PWA support to an existing app — the 192 and 512 px icons satisfy the manifest requirements out of the box.
Refreshing the favicon after a rebrand without bothering the design team for re-exports.
Producing Apple touch icons (180 px) so iOS home-screen shortcuts look crisp.
Generating consistent icon sets for multiple environments (staging, production) from one source file.

Tips & common mistakes

Start with a high-resolution source (at least 512×512) so the down-scaled sizes stay sharp.
Use a transparent background — opaque backgrounds look odd inside iOS rounded-corner masks.
Test the favicon by visiting your site in an incognito window; browsers cache favicons aggressively.
If your logo has very thin strokes, they may disappear at 16×16 — design a simplified mark for tiny sizes if necessary.

Frequently asked questions

What sizes does the generated set include?

16, 32, 48 (favicons), 180 (Apple touch icon), 192 and 512 (PWA). Plus a manifest.json and HTML head snippet you can paste into your project.

What if my source isn't square?

We center-crop to a square automatically. For best results, supply a square image with the main content centred.

What format works best as the source?

PNG with a transparent background. SVG is also supported through our SVG → PNG tool first.

Do I need a separate .ico file in 2026?

Modern browsers happily use PNG favicons referenced via <link rel="icon" type="image/png">. The legacy /favicon.ico file is only needed if you support very old IE versions. Many teams still keep one for safety.

Why is my PWA icon showing a white background instead of being transparent?

Some platforms (notably iOS) flatten transparency onto white. Design the icon assuming a solid backdrop will appear, or supply a maskable icon variant in your manifest with the right safe zone.

Can I generate icons from an SVG?

Convert the SVG to a high-resolution PNG first using our SVG → PNG tool (try 1024 px width), then feed that PNG into Image → Icon. Going through PNG ensures every size rasterises identically.