How to Create a Favicon From an Image

A favicon is the small icon that appears in a browser tab, next to the page title, and in bookmarks. It's tiny, but it matters: a site without one looks unfinished, while a clear favicon makes your brand recognisable among a wall of open tabs. The good news is that making one from an existing logo or image takes just a couple of minutes.

What makes a good favicon

Because it's displayed at around 16×16 to 32×32 pixels, a favicon has to work when it's very small. Simple, bold shapes read well; detailed logos with thin lines or small text turn into an unreadable blur. If your logo is complex, use just its most recognisable element — a single letter, a symbol, a monogram.

A square source image works best, since the favicon itself is square. Make sure the important part is centred with a little breathing room around it so nothing gets cropped.

What size and format?

The classic favicon format is .ico, which can hold several sizes in one file (16×16, 32×32, 48×48) so the browser picks the right one. Modern browsers also accept PNG favicons, but .ico remains the most universally supported and is still the safest choice.

Start from an image that's at least 256×256 pixels so the icon stays sharp when generated at each size. Working from a high-resolution square logo gives the cleanest result.

How to create it

Take your square logo or image, and convert it to an .ico file. Drop the image into our converter, choose ICO as the output, and download the favicon — it runs entirely in your browser, so your logo is never uploaded. If your source isn't square, crop it to a square first so the icon isn't distorted.

For the best result across all sizes, generate the .ico from a clean, high-contrast version of your mark rather than a busy full-colour photo.

How to add it to your site

Place the file (commonly named favicon.ico) in your website's root folder. Most browsers will find it automatically, but it's good practice to also reference it in your HTML head with a link tag: <link rel="icon" href="/favicon.ico">. If you use a website builder or CMS, there's usually a "favicon" or "site icon" upload field in the settings — just upload the file you created.

Once it's live, you may need to refresh or clear your cache to see the new icon in your tab. After that, your site looks that little bit more polished everywhere it appears.