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.
- All PNGs — one click grabs every size as a separate PNG.
- 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

The tool draws your image into square canvases, so a non-square source gets squished — crop it to a square first (try crop) for a clean result. It also doesn't add rounded corners or padding 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? A non-square image gets stretched into a square. Crop it to a 1:1 ratio first for a clean icon.

— Milo 🐨