Skip to content
AZ Tools

Favicon Generator (multi-size PNG)

Generate 10 favicon PNG sizes (16, 32, 48, 64, 96, 128, 180, 192, 256, 512) from one source image — copy the HTML snippet.

Drop an image to generate the icon pack.

How to use

  1. Drop a square source image (PNG/SVG/JPG, ideally 512×512 or larger).
  2. Pick background (transparent or color) and padding %.
  3. Download individual sizes or all at once, then paste the HTML snippet into your <head>.

About this tool

Show

Turn one image into the whole set of icons a site needs — 16 through 512 pixels, including the 180-pixel Apple touch icon and the 192 and 512 sizes a web app manifest expects — and copy the matching link tags to paste into your head. Each size is rendered and previewed so you can see the result before downloading rather than discovering it in a browser tab. That preview is the useful part: a logo that looks sharp at 512 usually turns to mush at 16, where you have 256 pixels in total to work with, so the small sizes are where you find out whether the mark needs simplifying down to a single letter or shape. Everything is rendered in the page and nothing is uploaded.

Frequently asked questions

Why so many sizes?

Each environment picks the size closest to its needs without scaling. Browsers prefer 32, Apple touch wants 180, and Chrome PWA installs need 192/512. Shipping all of them is the safe path.

Where's the .ico file?

Modern browsers prefer PNG. If you still need favicon.ico, rename favicon-32.png to favicon.ico — most browsers accept a PNG with the .ico extension.

My image looks pixelated at 16×16.

Use a simpler version of your logo for the small sizes — fine detail disappears at favicon scale. Many sites use a separate 'mark' for icons under 32px.

Transparent vs solid background?

Transparent looks better on dark/light browsers and PWA installs. Solid (white/brand color) reads more like a button on iOS home screens.

Is a renamed favicon-32.png a real .ico file?

No — it is still a PNG with a different extension. Browsers get away with it because they sniff the content rather than trusting the name, so a PNG served at /favicon.ico displays correctly in everything current. What it is not is a valid ICO container, so old Internet Explorer, some feed readers and desktop tools that parse the format properly will reject it. If you need a genuine multi-resolution icon — one file holding 16, 32 and 48 — use a real ICO converter; otherwise the PNG links in the generated markup already cover every modern browser.

Why does my logo get cropped into a circle when installed on Android?

Because Android applies a mask to icons declared with purpose "maskable", and the guaranteed-visible region is only the inner circle — a diameter of 80% of the icon, so 409.6 px inside a 512 px square. Artwork that fills the whole square loses its corners, and a logo that already reaches the edges can lose meaningful parts of itself. Leave that 10% margin on every side in the source image, or ship two entries in the manifest: a maskable one with padding and a normal "any" one without.

Related tools