How to make a favicon from a PNG (any logo to a multi-size ICO)

A favicon (from "favorite icon") is the small graphic that appears in browser tabs, the address bar, bookmarks, history lists, and — on mobile — the icon used when someone adds your site to their home screen. It is tiny, but it is one of the first trust signals a visitor processes: a site with a crisp custom icon reads as established, while the default generic page glyph reads as abandoned or amateur. For any site that hopes to be taken seriously, a favicon is not optional decoration; it is identity infrastructure.

Despite the name, modern favicons are not limited to one 16-pixel image. Browsers request multiple sizes for different contexts: 16 px for tabs, 32 px for high-density tabs and Windows taskbar pins, 48 px for legacy shortcuts, and larger 180–512 px sizes for Apple touch icons and PWA manifests. The traditional delivery vehicle is the ICO file — a Windows-born container that bundles several of those sizes into one file — while PNG-based favicons and manifest icons handle the modern web-app side.

ICO is one of the oldest Windows file formats still in daily use, and its defining trick is embedding multiple resolutions in a single file. A proper favicon.ico might contain 16, 32, 48, and 256-pixel versions of the same icon; the browser or operating system picks whichever size renders sharpest in its context. That is why one correctly built ICO satisfies desktop browsers, bookmarks, and taskbar pins at once.

You might wonder whether ICO is obsolete given that modern browsers also accept PNG favicons referenced directly. In practice, most sites still ship a favicon.ico at the root path because it remains the single most universally requested location — crawlers, legacy integrations, and some browser shortcuts probe /favicon.ico whether or not you declared anything else. The robust recipe is: a root favicon.ico with embedded sizes, plus PNG entries in your site manifest for touch icons.

The best source is a square (or easily squared) image with strong shapes and minimal fine detail. Logos, marks, letterforms, and flat illustrations convert beautifully; photographs and gradients turn to mud at 16 pixels because there simply are not enough pixels to preserve detail. If your logo is a wide horizontal lockup, create a square crop using just the mark or initial — viewers will not read wordmarks at favicon size anyway.

Work from the largest, cleanest file you have — an SVG or high-resolution PNG export beats a screenshot. Ensure the background is what you want: favicons render on both light and dark tab strips, so transparent backgrounds with a high-contrast mark are the safe choice. If your logo is thin-stroked, thicken the strokes before downscaling; hairlines disappear below 24 pixels. A useful test: shrink your source to 16×16 in any image editor and squint. If you can still tell what it is, the favicon will work.

• Square or easily squared composition
• Bold shapes over fine detail — 16 px is unforgiving
• Transparent background with strong contrast
• Start from the highest-resolution export available

You do not need design software or an icon editor: the ConvertKit image converter produces ICO files directly in your browser, embedding the standard sizes automatically. The workflow takes under a minute and keeps the source private, since the file never leaves your machine.

1. Open the ConvertKit image converter and drop your square PNG logo into the drop zone.
2. Choose ICO as the output format — the converter embeds the standard favicon sizes (16, 32, 48, and larger) into the single file.
3. Convert, preview the result, and download the finished favicon.ico.
4. Also export PNG versions at 180×180 (apple-touch-icon) and 512×512 (manifest icon) for mobile and PWA support — same tool, PNG output, resized first.

Place favicon.ico at the root of your site (many browsers probe that path automatically) and declare the rest explicitly in your document head. A complete modern setup looks like this: a root favicon.ico, a link tag with type="image/x-icon" pointing to it, a link tag for a 32 px PNG fallback, an apple-touch-icon link for iOS home screens, and an icons array inside your web app manifest for Android and install prompts.

Framework users have it easier: Next.js serves anything placed in the public directory, and its metadata API can declare icons in code. After deploying, hard-refresh with cache disabled and check the tab, the address bar on mobile, and a bookmark — the three places size selection differs. If any shows the default icon, the usual culprit is caching (browsers cache favicons aggressively) or a path typo in the link tag. Test on at least two browsers as well, since each maintains its own favicon cache independently of the others.

Before you call the icon done, run this checklist. Dimensions: source was square and the final files are exactly 16, 32, 48, 180, and 512 px where required. Contrast: the mark is legible at 16 px on both light and dark tab strips. Files: favicon.ico sits at the root, PNG touch icons are linked in head, manifest icons exist for install prompts. And caching: a fresh browser profile loads the new icon without manual purging — verify in an incognito window.

Finally, resist the urge to redesign the brand for the favicon. The job of this image is recognition, not expression: same colors, same mark, simplified only as much as the size demands. Sites that change their favicon every month train visitors to ignore it; sites that keep one stable icon accumulate the small, compounding familiarity that makes a tab recognizable in a sea of open windows.