How to Create a Favicon From an Image (ICO + PNG, All Sizes)

Q: What sizes and formats do I get?

A `favicon.ico` containing 16, 32, and 48px, plus standalone PNGs at 16, 32, 48, 180 (Apple Touch), 192, and 512px (Android/PWA).

Q: Do I still need a .ico file, or just PNGs?

Both. `favicon.ico` is the most broadly compatible for browser tabs, while the larger PNGs cover Apple Touch and Android/PWA home-screen icons. This tool gives you both so you're covered everywhere.

2026-07-27

Short answer: To create a favicon from an image, open ToolKoala's favicon generator, drop in a square image, and download. You get a favicon.ico (containing 16, 32, and 48px) plus standalone PNGs at 16, 32, 48, 180, 192, and 512px, and a ready-to-paste block of HTML <link> tags. It's free, and it all runs in your browser — the image never uploads. I built this the week I got tired of favicon sites that make you sign in to download a 16-pixel icon.

Why you need more than one favicon size

Back in the day a favicon was one 16×16 .ico and you were done. Not anymore. Different places show your icon at different sizes:

16 / 32 / 48px — the classic browser tab and bookmark icon. These live inside favicon.ico.
180px — the Apple Touch Icon, used when someone adds your site to their iPhone home screen.
192 / 512px — Android and PWA icons, used for home-screen install and the app switcher.

Ship only a 16px icon and your site looks crisp in a tab but blurry the moment someone saves it to a phone. This tool generates the whole set from one source image so you don't have to think about it.

How to create your favicon

Open ToolKoala's favicon generator and drop in your image.
It instantly renders previews at every size — 16 up to 512 — so you can see how your icon holds up when it's tiny.
Download what you need:
- favicon.ico — the multi-resolution icon (16 + 32 + 48) for the browser tab.
- Download all (ZIP) — one file with favicon.ico, every PNG size and the HTML tags.
- Or click any single preview to download just that size.
Copy the HTML snippet it gives you and paste it into your page's <head>.

The snippet is already filled in with the right rel, type, and sizes attributes:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

Drop the files in your site root (or wherever the href points), paste the tags, and you're done.

Tips for an icon that reads at 16 pixels

Start square and simple. At 16×16 there's room for one bold shape or a single letter — not your full logo with a tagline. If your logo is detailed, make a stripped-down "icon mark" version just for this.
Feed it a big source. Upload at least 512px so the large PWA icons stay sharp; the tool downscales, it can't invent detail.
High contrast wins. The icon sits on browser chrome and phone wallpapers you don't control. Strong contrast keeps it visible everywhere.
Check the tiny previews. The tool shows the 16 and 32px versions pixel-accurately — if it's mush at that size, simplify the artwork before you ship.

Honest limits

Favicons are square. If your source isn't, the tool asks how it should fit — the whole image centred with transparent edges (the default), the centre square cropped out, or stretched — so nothing gets squished by accident. For a crop that isn't dead centre, use crop first. It doesn't add rounded corners or a background colour for you; what you upload is what gets scaled. And it generates the standard modern set — if you need every legacy Microsoft tile and Safari pinned-tab SVG under the sun, a heavier generator covers those edge cases. For 99% of sites, the ICO + PNG set here is exactly what browsers actually ask for.

FAQ

How do I make a favicon from an image? Open a browser-based favicon generator like ToolKoala's, drop in a square image, and download the favicon.ico plus PNGs at every size. Then paste the provided HTML tags into your page's <head>.

What sizes and formats do I get? A favicon.ico containing 16, 32, and 48px, plus standalone PNGs at 16, 32, 48, 180 (Apple Touch), 192, and 512px (Android/PWA).

Do I still need a .ico file, or just PNGs? Both. favicon.ico is the most broadly compatible for browser tabs, while the larger PNGs cover Apple Touch and Android/PWA home-screen icons. This tool gives you both so you're covered everywhere.

Does my image get uploaded? No. The favicon is generated in your browser using canvas — your image never leaves your device.

My source image isn't square. Will it look right? It won't be squashed: you choose between fitting the whole image (transparent edges), cropping the centre square, or stretching. For a different crop, square it up in crop first.

— Milo 🐨