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.

Once the basic ICO is in place, three modern extensions are worth knowing — each solves a problem that appears only in specific contexts. Maskable icons serve Android and install prompts, where the system draws the icon inside a circle, squircle, or other shape and clips the edges. A maskable icon must keep its artwork inside the central safe zone — roughly the middle 80% of the canvas — with generous padding, because anything near the edge can be cropped away by the shape mask. An icon designed edge-to-edge looks broken on a home screen even though it looks perfect in a browser tab.

SVG favicons are the elegant upgrade where they work: a single vector file stays sharp at every size, including large high-density contexts, and scales without shipping four raster files. Support in current desktop browsers is good, but SVG is not universal — older browsers and several mobile contexts still want raster — so the correct pattern is an SVG link declared before the PNG fallback in your head. If the browser understands SVG it uses it; if not, it moves to the next candidate. The ICO stays regardless, as the root-path safety net.

Dark-mode awareness is the third refinement: tab strips come in light and dark, and a dark-colored mark on transparency can vanish against a dark tab. Some browsers now honor a color-scheme-aware icon (a separate icon reference for dark backgrounds, or an SVG using current-color), while others simply composite whatever you gave them. The universally safe design remains a high-contrast mark that survives both backgrounds — check it in your OS dark mode before shipping, and only reach for scheme-specific variants if your brand colors genuinely fail one of them.

• Maskable: keep artwork in the central 80% — the OS crops the rest
• SVG: sharpest possible icon, declared before the PNG fallback for safety
• Dark tabs: verify the mark against dark backgrounds before finalizing
• Ship raster anyway — SVG support is good, not universal

Favicon problems are frustrating because each browser maintains its own icon cache and several failure modes look identical from the outside. Working symptom-first resolves them faster than re-reading the setup docs. No icon anywhere, even in a fresh profile: the file is not where the browser is looking — confirm /favicon.ico returns 200 at your domain root (open the URL directly), check for a typo or case mismatch in the link tag, and make sure the file type is what the header claims. A wrong path is the cause in the overwhelming majority of "missing favicon" reports.

Old icon showing after you replaced the file: caching. Browsers cache favicons more aggressively than any other asset, sometimes ignoring query-string cache busting. Test in an incognito window first (if it appears there, the file and path are correct and only your persistent cache is stale); then clear site data or restart the browser fully — on Windows, the OS icon cache can survive even that until Explorer restarts. Renaming the file (favicon-v2.ico) and updating the link tag sidesteps the whole problem on deployments.

Correct in the tab but wrong or missing elsewhere means the specific asset for that context is absent: no 180-pixel apple-touch-icon, no manifest icons for install prompts, or an ICO that only bundles 16 px so high-density contexts upscale a blurry version. And "works in Chrome, fails in Firefox" is almost always a missing MIME type or a link element placed after the browser already requested the default — validate the head markup rather than blaming the browser. Keep a written checklist of the four contexts — tab, new tab page, bookmark, home screen — and verify each after every icon change.

The favicon is one of three small images people conflate, and mixing them up produces sites that look unfinished in exactly the places they hoped to look polished. The favicon is the identity mark in tabs and bookmarks — 16 to 512 pixels, square, built for recognition at a glance. The social share image (the Open Graph image) is a wide 1200×630 graphic that appears when someone pastes your link into a chat, Slack, or social feed — text, branding, a hook, functioning as a mini headline rather than a logo. And the app/touch icon is the rounded-square artwork your phone shows when the site is saved to a home screen.

Each has its own file, dimensions, and declaration: favicon.ico and link tags for the first, og:image meta tags for the second, apple-touch-icon and manifest icons for the third. Shipping one does not imply the others — a site with a perfect favicon and no share image still shows an empty gray card when its link is shared, which for many audiences is the only image they will ever see. The quick audit: paste your URL into any link-preview checker, look at your browser tab, bookmark the page, and add it to a phone home screen. Four checks, four images, and a site that presents consistently everywhere it appears.

The downgrade from logo to favicon is where most marks fail, and the fix is a deliberate redesign for the small size rather than a hopeful downscale. The instructive version of the exercise: draw at 16×16 first. At that size you have room for roughly one idea — a single letterform, a simplified glyph, or a two-shape symbol — and every element beyond that turns into gray noise. Designers of icon systems work the same way: solve the 16-pixel problem, then let the larger sizes inherit the simplification rather than the other way around.

Practical rules that follow from the pixel budget. Contrast beats nuance: a mark that depends on two shades of the same color disappears when both render as adjacent grays; two colors with strong separation survive every background. Strokes need weight — hairlines thinner than about two pixels vanish or shimmer when the browser downscales a larger source, so thicken them before export. Detail is the first casualty: text inside the icon is unreadable (viewers will not zoom a favicon), gradients read as smudges, and drop shadows just blur the silhouette that recognition depends on.

Then validate honestly in the three states that matter. First, at actual size: render the candidate at 16×16 next to two or three competitors (your browser’s built-in icons, other tabs’ favicons) and see whether yours remains identifiable — recognition is comparative, not absolute. Second, on both light and dark tab strips, since a mark that shines on white can sink into dark mode. Third, scaled up to 32 and 48: simplification designed for 16 usually enlarges gracefully, but check that nothing designed for the small grid looks deliberately crude in the high-density tab. If the mark passes all three, ship it — and keep the simplification as the canonical small-size asset rather than re-deriving it from the full logo each time the site changes.

Favicons sit in an odd accessibility position: they are decorative by default (screen readers do not announce tab icons, and they should not — the page title provides identity for assistive technology), but they still serve low-vision and cognitive accessibility through recognition. A high-contrast, simply shaped mark helps anyone scanning a dozen open tabs distinguish them without reading every title. That argues for contrast that survives viewing at small scale and under common OS display scaling — Windows at 125–150% zoom and macOS Retina both cause browsers to request larger icon variants, which is precisely why shipping 32- and 48-pixel versions inside the ICO earns its keep rather than being cargo-cult tradition.

Home-screen icons carry a little more weight, because the label under the icon comes from your manifest’s name field rather than the image — set a human-readable name there (the site name, not a codename), since install prompts and home screens present it to users verbatim. If the icon is ever the only thing a returning visitor sees, meaning that lives only in your wordmark is a liability: the graphic version of the brand needs to carry recognition on its own.

Over the long term, treat the favicon set as versioned brand assets. Store the source (vector or large PNG) alongside the exports, keep every derived size generated from that one source so sizes never drift apart, and regenerate the full set whenever the mark changes — a 16-pixel file updated from the new brand while the 180-pixel touch icon still shows the old one is worse than changing nothing. Icons are small files with long memories: browsers cache them, users memorize them, and screenshots keep them. Get the set consistent once, and it will quietly work for years.