How to Make a Favicon (.ICO) from PNG or WEBP
The favicon is the smallest asset on a website and the one most likely to be wrong: blurry at 16 pixels, invisible in dark mode, or missing entirely because a bot asked for favicon.ico and got a 404. Here is what a favicon actually needs in 2026, and how to build one from your existing artwork without uploading unreleased branding anywhere.
Morphix WEBP → ICO converter
Turn modern web artwork into a classic favicon file, converted entirely in your browser. PNG, JPG, AVIF and TIFF sources work too.
Why ICO survived
ICO is a container format: a single file that holds the same icon at several resolutions so the operating system or browser can pick the one it needs. That is a genuinely good idea, which is why a format from the early nineties is still sitting at the root of nearly every website.
Browsers will use a PNG when you point at one in your HTML, but plenty of clients never read your HTML. Feed readers, link-preview bots, older browsers and some corporate proxies simply request /favicon.ico and take what they get. Shipping that file is the cheapest way to stop the missing-icon question recurring.
Design for 16 pixels, not for your header
The single most common favicon mistake is scaling down the full logo. Wordmarks, taglines and fine strokes vanish below about 32 pixels and reappear as grey soup. What works is one strong element: an initial, a monogram, a distinctive glyph, drawn on a square canvas with generous padding.
Test it honestly. Set the artwork to 16 pixels wide on screen, lean back, and ask whether the shape reads. If it does not, simplify further — this is the one asset where less detail is objectively better.
The set of files worth shipping
- favicon.ico at the site root, containing the 16, 32 and 48 pixel versions.
- A 180-pixel PNG for the iOS home-screen icon.
- 192 and 512 pixel PNGs referenced from your web app manifest for Android and PWA installs.
- An SVG mark if you want a crisp icon in browsers that support it, with the ICO still present as the fallback.
Step by step
- Create or crop a square version of your mark with transparent background and even padding.
- Export it as a 512-pixel PNG or WEBP.
- Drop that file into the Morphix ICO converter and download the result.
- Rename it to favicon.ico and place it at the root of your site.
- Load the site in a private window and check the tab in both light and dark mode.
Dark mode, contrast and the transparent-background trap
Browser tabs are no longer reliably light. A dark navy monogram on a transparent background looks sharp on a white tab strip and disappears completely in dark mode, which is now the default for a large share of users.
The fix is to choose a mark colour with enough contrast against both extremes, or to keep a subtle filled shape behind it so the icon always has its own backdrop. Check both themes before you ship — it takes ten seconds and it is the difference between a recognisable tab and an empty square.
FAQ
Is .ico still necessary when browsers accept PNG favicons?
Modern browsers happily use a PNG, but a favicon.ico at the site root is still the fallback that legacy browsers, feed readers, link-preview bots and some corporate proxies request by default. Shipping both costs nothing and removes a whole category of missing-icon reports.
What sizes should a favicon contain?
16 and 32 pixels cover browser tabs and bookmarks, 48 covers Windows shortcuts, and 180 to 512 pixel PNGs handle mobile home-screen icons and progressive web apps. An ICO can hold several of the small sizes in a single file, which is precisely what it was designed for.
Why does my favicon look like mush at 16 pixels?
Because a full logo has too much detail to survive being scaled to a 16-pixel square. Favicons need a simplified mark — a single letter, a monogram or one distinct shape — not a shrunken version of the horizontal logo used in your header.
Can I use a WEBP or AVIF image as the source?
Yes as a source, no as the favicon itself. Convert the modern format to ICO and PNG for the actual icon files, because favicon support for newer image codecs is inconsistent across the older clients that request the icon in the first place.
Does transparency work in a favicon?
It does, and it matters more than people expect because browsers now render tabs on light and dark backgrounds. Keep the background transparent and make sure the mark itself has enough contrast to stay visible either way.
Why convert the icon locally rather than using an online generator?
Unreleased branding is exactly the kind of asset that should not sit on a third-party server before launch. Converting in the browser keeps the artwork on your machine, and it is faster than any upload-and-wait generator for a file this small.