How to Create a Favicon for Your Website

Why a Renamed PNG Doesn't Always Work

Many platforms and browsers specifically expect a real .ico file for a favicon -- simply renaming a .png to end in .ico doesn't actually change its internal file format, since the file extension is just a label and doesn't rewrite the underlying byte structure of the file. Browsers and platforms that check the file's actual content rather than trusting the extension will reject or fail to render a relabeled PNG, which shows up as a missing or broken favicon icon in the browser tab -- an easy mistake to make and a slightly confusing one to debug the first time it happens.

Step 1: Start With a Square Image

Favicons and app icons are almost always expected to be square, since browser tabs, bookmark bars, and home-screen icons all display them in a fixed square space -- a non-square source image will get stretched, cropped unpredictably, or padded with unwanted whitespace by whatever's rendering it. If your source image isn't already square, crop it first with the Square Image Cropper rather than letting the browser make that cropping decision for you.

Step 2: Convert to a Real ICO File

Use the matching converter for your source format: PNG to ICO, JPG to ICO, WebP to ICO, SVG to ICO, GIF to ICO, or BMP to ICO -- each produces a genuine, valid .ico file entirely in your browser, with the actual internal ICO structure a strict platform expects, not just a relabeled file.

Step 3: Add It to Your Site

Place the resulting favicon.ico in your site's root directory, and/or reference it explicitly with a <link rel="icon"> tag in your HTML <head> -- exact implementation varies by platform. A static HTML site typically just needs the file dropped in the root along with the link tag; a CMS like WordPress usually has a dedicated Site Icon upload field in its settings that handles this automatically; and a custom web app framework may have its own convention for where favicon assets live, worth checking the framework's own documentation for the expected path.

Why Browsers Still Cache the Old One

A frustratingly common experience after updating a favicon: the change doesn't appear to take effect, even though the new file is genuinely in place. Browsers cache favicons aggressively, often more aggressively than regular page assets, so a hard refresh, clearing the browser's cache specifically, or testing in a private/incognito window are all worth trying before assuming the new favicon didn't upload correctly.

Beyond the Basic Browser Tab Icon

A "favicon" today covers more ground than the small icon in a browser tab -- home screen shortcuts on mobile devices, browser bookmark bars, and browser tab-switcher previews all pull from related but sometimes distinct icon assets. A thorough setup typically includes the standard favicon.ico alongside a few additional sizes and formats referenced via additional link tags, covering the range of contexts a site's icon might actually appear in across different devices and browsers.

Keeping the Source Design Simple

Because a favicon displays at a genuinely tiny size in most contexts, intricate detail or small text in the source design simply won't be legible once scaled down -- a bold, simple shape or a single recognizable letterform tends to read far more clearly at 16x16 or 32x32 pixels than a detailed logo with fine internal detail. Testing the final icon at its actual small display size, not just admiring it zoomed in during design, is the real test of whether it will work in practice.

Why One Size Is Never Enough

A favicon is shown at surprisingly different sizes depending on where it appears. A browser tab might render it at a tiny 16 by 16 pixel square, a bookmarks list or high-density screen might use 32 by 32, and a phone home screen shortcut typically wants something much larger. A real ICO file can hold several sizes inside one file, and the browser picks whichever fits best. If you only supply a single tiny image, larger uses get blurry; if you only supply a single huge image, small uses can look muddy because the browser has to shrink it aggressively.

A good habit is to start from a source image that is at least 512 by 512 pixels. Shrinking a big, crisp image down always looks better than enlarging a small one, which is why the source matters more than the converter you pick.

A Quick Pre-Publish Checklist

• Is the source square, with the main shape centered and some breathing room around the edges?
• Does it stay recognizable when you view it at roughly the size of a fingernail on your screen?
• Does the background work on both light and dark browser themes? A dark logo on a transparent background can vanish in a dark-mode tab bar.
• Did you generate a genuine ICO file rather than just renaming an image?
• Have you tested it in a private or incognito window, so an older cached icon does not fool you?

Common Mistakes to Avoid

The most frequent problem is using a full logo that includes a company name in small text. At tab size, that text becomes an unreadable smudge. Use just the symbol, a single letter, or a bold simplified shape instead. Another common slip is keeping the file in an unexpected location, so the browser looks for it and finds nothing; confirm the file is reachable at the address your page points to by opening that address directly in a browser tab.

Finally, avoid photographs. Photos contain fine detail and gradients that collapse into noise at 16 pixels. Flat colors and simple shapes survive shrinking far better.

Frequently Asked Questions