Upload one logo and get the complete favicon set a modern site needs: a multi-resolution favicon.ico, PNG icons at every standard size, and an Apple touch icon — plus the HTML to paste into your <head>.

How to use this tool

Drop in a square logo — 512×512 or larger gives the sharpest result.
Optionally fill transparency with a background colour.
Preview every size, then download the files you need.
Copy the <head> snippet from the panel at the bottom.

What you get

favicon.ico — a single file containing 16, 32, 48, 64, 128 and 256px layers. Windows and older browsers pick the size they need from inside it.
icon-192.png — Android home screen and PWA install icon
icon-512.png — PWA splash screens and app listings
apple-touch-icon.png — 180×180, used when someone adds your site to an iOS home screen

Design tips for small icons

A favicon is often rendered at 16×16. That is about the size of this letter — most logos are illegible at that scale.

Use a single glyph or monogram, not your full wordmark
Keep strokes thick; hairlines vanish
Prefer high contrast against both light and dark browser chrome
Leave a little padding — icons that bleed to the edge look cramped in tabs
Check the 16px preview above before committing

Apple touch icons should not be transparent — iOS composites them onto a white card, so transparency produces odd fringing. Use the background fill option for those.

Related tools

PNG to ICO — single conversion without the full set
Image compressor — shrink the source logo first
Image format converter — change format in bulk
Colour converter — match your brand colour exactly

FAQ

Is my logo uploaded?

No. Every size is rendered in your browser with canvas, and the .ico is assembled locally too.

What size should my source image be?

At least 512×512, square, and PNG or SVG. Upscaling a small image produces blurry icons at the large sizes.

Do I still need favicon.ico?

Yes, it is worth including. Browsers request /favicon.ico from the site root by default even without a <link> tag, and it remains the most reliable fallback.

My logo is not square — what happens?

It is scaled to fit and centred, preserving its proportions rather than stretching. For a good result, crop to a square first.

Why does my favicon not update?

Browsers cache favicons aggressively. Hard-refresh, or append a query string like /favicon.ico?v=2 to your <link> tag.

Can I use this for a PWA?

Yes — the 192px and 512px PNGs are exactly what a web app manifest needs. You will also want a maskable variant with extra padding for Android's adaptive icons.

Favicon Generator