Asset Utility

Favicon Converter

Convert your PNG logo into a production-ready .ico file. Optimized for modern browsers and legacy compatibility.

Click to select or drop PNG

Maximum file size: 2MB

Preview (32x32)
Preview filename.png

Favicon Best Practices

Why .ICO?

While modern browsers support PNG, the .ico format is a container that holds multiple sizes. This ensures your icon looks crisp in browser tabs (16x16) and on the Windows desktop (32x32 or 48x48).

Transparency

Always use a PNG with a transparent background for your source. If your image has a white box around it, that box will appear in the browser tab.

HTML Implementation

Place the file in your root directory and add: <link rel="icon" href="/favicon.ico"> to your <head> section.

Building a favicon that works everywhere

A favicon is the small image in a browser tab, bookmark list and history entry. The ICO format is unusual in that a single file can contain several resolutions, letting the browser pick whichever size suits the context it is drawing.

Why multiple sizes matter

This converter embeds 16 by 16, 32 by 32 and 48 by 48 versions into one file. The browser tab typically uses 16 pixels, bookmark bars and higher density displays use 32, and Windows desktop shortcuts reach for 48.

Supplying only a large image and letting the browser downscale produces a muddy result. Detail that reads clearly at 64 pixels turns to noise at 16, which is why the multi-resolution container exists in the first place.

Designing for 16 pixels

At this size you have almost no room. A full logo with a wordmark will be illegible, so reduce to a single letter, a distinctive shape or one strong symbol. Look at the favicons of sites you recognise and note how aggressively simplified they are.

High contrast is essential, and it needs to work against both light and dark browser chrome. A dark icon vanishes against a dark theme, so test both rather than assuming.

Avoid thin lines and fine gradients. A single-pixel stroke either disappears or turns grey when the image is scaled, and subtle gradients become flat blocks.

Adding it to your site

Place favicon.ico in your web root and most browsers will find it automatically. For explicit control, add a link element in the head, and supply a 180 by 180 PNG as an apple-touch-icon for iOS home screen bookmarks.

Start square

Upload a square PNG. A rectangular source gets distorted when squeezed into the icon dimensions.

Keep transparency

PNG alpha is preserved through conversion, so your icon sits cleanly on any tab colour.

Force a refresh

Browsers cache favicons aggressively. Use a hard refresh or a private window to see a change.

Frequently asked questions

Why is my new favicon not showing?

Favicon caching is unusually persistent. Try a hard refresh, a private window, or appending a query string to the file path to bust the cache.

What size should I upload?

A square PNG of at least 256 by 256 gives the converter clean detail to downscale from. Larger is fine.

Do I still need an ICO file?

Modern browsers accept PNG favicons, but ICO remains the most broadly compatible choice, particularly for older Windows browsers and desktop shortcuts.

Where should the file go?

The root of your site as favicon.ico. Browsers check that path automatically even without a link tag.