How to Create a Favicon From an Image

A favicon is the tiny icon that sits in the browser tab, in the bookmarks bar and next to your site in search results and browser history. It is the smallest piece of branding you will ever ship, and it is also the one people see most often. This guide covers what a favicon actually needs to be, how to make one from an image you already have, and the two mistakes that make favicons look blurry or refuse to appear at all.

What a favicon is, technically

The classic favicon is a file called favicon.ico. ICO is an old Windows icon format with one unusual and very useful property: a single .ico file can contain several images at different sizes. The browser reaches into the file and picks whichever size fits the place it is drawing — 16 px in a tab, 32 px in a bookmark list, larger again on a high-DPI screen or a pinned shortcut.

That is why simply renaming a PNG to .ico does not work, and why exporting one lonely 16×16 image gives you a favicon that turns into mush the moment anything displays it bigger. A proper favicon is a container of sizes, not a single tiny picture.

What size should the source image be?

Start with a square image, 256×256 pixels or larger. Bigger is fine — the converter scales down, and scaling down always looks better than scaling up. A PNG with a transparent background is ideal, but JPG works too.

If your logo is not square, crop it first with the image cropper using the 1:1 preset. Squashing a wide wordmark into a square favicon is the fastest way to an unreadable icon. If it is square but too small, do not upscale it and hope — go back to the original artwork if you can.

Design rules for something 16 pixels wide

A favicon is not a shrunken logo. At 16×16 you have roughly the detail budget of a single letterform, so:

• Use one element — a mark, a monogram, a single letter. Not your full wordmark with a tagline.
• Drop thin lines. Hairlines disappear or alias into grey fuzz at small sizes. Thicken strokes before you convert.
• Keep contrast high. The icon has to read against both a light and a dark browser theme.
• Leave a little padding so the mark does not run into the edge of the tab.

A quick test: shrink your image to 16 px in the image resizer and look at it. If you cannot tell what it is at a glance, neither can anyone else.

Create the favicon, step by step

1. Open the converter. Go to the Image to ICO tool and drop in your square PNG or JPG.
2. Create the favicon. The image is packed into a multi-size ICO containing the 16, 32, 48, 64 and 256 px versions in one file.
3. Download the .ico and rename it favicon.ico.

Where to put the file

Upload favicon.ico to the root of your site, so it is reachable at https://yoursite.com/favicon.ico. Browsers look there automatically, with no HTML at all — which is exactly why the root location still matters even in 2026.

To be explicit about it, or to serve the file from somewhere else, add a tag in the head:

<link rel="icon" href="/favicon.ico" sizes="any">

Modern frameworks often have their own convention — Next.js picks up an app/icon file, WordPress calls it the Site Icon under Appearance, and Shopify sets it in the theme editor. In every case the file you upload is the one you just made.

Do I still need ICO if PNG favicons work?

Browsers do accept a PNG favicon, and many sites ship one. But favicon.ico at the root remains the universal fallback: it is what a browser requests when no tag is present, what older software expects, and what many crawlers, feed readers and link-preview services look for. It costs a couple of kilobytes.

The pragmatic answer is to have both — favicon.ico at the root for compatibility, plus a larger PNG (180×180 is the usual choice) for the icon shown when someone saves your site to a phone home screen. You can produce that second file from the same artwork with the image resizer.

Why is my favicon not updating?

This one catches everybody. Browsers cache favicons harder than almost anything else, so after you replace the file the old icon can hang around for days. Before you assume the conversion failed:

• Open https://yoursite.com/favicon.ico directly and hard-refresh it. If the new icon appears there, the file is fine and you are looking at a cache.
• Try a private window or a different browser.
• Add a version query to your link tag — /favicon.ico?v=2 — to force a re-fetch.
• Check that your host is not returning a 404 for the root path, which some static setups do if the file landed in the wrong folder.

Does a favicon help SEO?

Not as a ranking factor. But Google does display a favicon next to your result on mobile search, so it affects whether people recognise and click your listing — and a missing icon leaves a generic globe in its place. Treat it as a trust and click-through detail rather than a ranking trick.

Is it private and free?

Building a multi-size ICO needs real image software, so this tool runs on our secure server rather than in your browser. Your file travels over an encrypted HTTPS connection, is converted in an isolated workspace, and is deleted automatically the moment the ICO is sent back — nothing is stored, logged or shared. It is completely free, with no watermark and no sign-up.

Frequently asked questions

What size should a favicon be? Supply a square source of at least 256×256. The generated ICO holds 16, 32, 48, 64 and 256 px versions so the browser always has a clean size to draw.

Can I use a JPG? Yes, though a PNG is better — JPG cannot store a transparent background, so your icon will carry whatever solid colour is behind it.

Will transparency be kept? Yes. A transparent PNG produces an ICO with transparency intact, which is what you want for a mark that sits on a tab of any colour.

Can I make a favicon from a photo? Technically yes, but photos rarely survive the trip to 16 px. Crop tightly to one recognisable subject, or use a simple graphic instead.

Make your favicon now

Open the Image to ICO converter and turn your logo into a proper multi-size favicon.ico in seconds — free, watermark-free and deleted right after. Need to square up or shrink the artwork first? Use the image cropper and image resizer.