Favicon Generator
One image in, a complete favicon set out — including a real multi-size .ico rather than a PNG with the extension changed.
Drop an image here
A square image of 512px or larger avoids any upscaling. Nothing is uploaded.
Inset as a percentage of the icon. Useful when your logo runs to its own edges.
iOS composites onto its own background, so a transparent source shows through as black.
Every size at its real resolution
Paste into your <head>
site.webmanifest
Everything here runs on your device. Nothing you enter is uploaded or stored.
A favicon is one of the smallest assets on a site and one of the most consistently botched. The two failure modes are a file that is not really an ICO, and a list of twenty declarations copied from a 2014 blog post. This does neither.
How to use it
- Drop a square image onto the panel, ideally 512 pixels or larger.
- Choose a background and corner shape, or leave it transparent and square.
- Look at the 16px preview and decide whether your mark survives at that size.
- Download the ZIP and copy the snippet into your
<head>.
What an ICO actually is
An ICO is not an image format. It is a container: a six-byte header, then a sixteen-byte directory entry for each image it holds, then the image payloads laid end to end. Each directory entry records the dimensions, the colour depth, the payload length and the absolute offset where that payload begins.
The useful modern detail is that the payloads may be PNG data. Every current browser and every supported version of Windows reads PNG-in-ICO, which means a correct ICO can be assembled in a browser with no encoder library at all — the canvas already produces the PNGs, and the container is just a header written by hand.
This is why so many tools cheat. If you rename a single PNG to favicon.ico, browsers sniff the content, notice it is a PNG and render it anyway. Nothing appears to be wrong. Then someone pins the site to their Windows taskbar and gets a blank square, because the shell actually parses the ICO directory and there isn’t one.
The file this tool produces holds three images — 16, 32 and 48 — in one container, with a real directory table. The 48 exists only inside the ICO, since nothing links to it directly.
The sizes that are still load-bearing
16px is the browser tab and the bookmark bar. 32px is the Windows taskbar shortcut and any high-DPI tab; a 16px icon scaled up to 32 looks visibly rough, and this is the size most often missing. 48px is the Windows site tile, bundled into the ICO.
180px is the iOS home screen. This one cannot be skipped, because iOS does not read the web app manifest for its home-screen icon — it looks for the apple-touch-icon link tag and nothing else. It also composites onto its own background, so a transparent source shows through as black. The tool fills the background on that size by default for exactly this reason.
192px and 512px are the manifest sizes for Android. The 512 is what an install prompt and a splash screen use, which makes it the largest and most prominent place your icon ever appears — and the reason the tool warns when your source is too small to fill it without upscaling.
Designing for 16 pixels
A 16 by 16 icon is 256 pixels in total. That is not enough for a wordmark, a tagline, a gradient with detail in it, or anything with strokes thinner than about two pixels. The marks that work at tab size are single letters, simple geometric shapes and bold silhouettes.
The preview grid here renders every size at its true resolution rather than showing one scaled thumbnail, because the 16px cell is the one that tells you whether your icon works. If it reads as a grey smudge in the preview, it will read as a grey smudge in the tab.
What you get
A ZIP containing favicon.ico, the standalone PNG sizes, a valid site.webmanifest referencing the two Android icons, and a head-snippet.html with the five link tags. Everything is rendered on your own device; the image is never uploaded.
Questions
Why do I still need a .ico file in 2026?
Because browsers request /favicon.ico by default even when you have declared PNG icons, and Windows shortcuts and pinned sites read the ICO specifically. A real ICO is also a container that holds several sizes in one file, so the browser picks the right one instead of scaling. It costs one small file to avoid a 404 in every server log.
What is wrong with a PNG renamed to .ico?
It works in browsers, which is why so many generators do it and get away with it. It fails where an ICO is genuinely parsed — Windows shortcuts, pinned taskbar sites and some older desktop software show nothing at all. This tool assembles a proper ICO container with a real directory table, which is why the output works in both places.
Do I need twenty different favicon files?
No. That list is a decade out of date, and every entry in it is another request the browser makes. Five declarations cover current browsers, iOS and Android completely. The one thing you cannot drop is apple-touch-icon, because iOS ignores the web app manifest and reads that link tag instead.
Why does my detailed logo look like a smudge at 16 pixels?
Because 16 by 16 is 256 pixels in total, and no amount of care will fit a wordmark or fine linework into that. Icons that read at tab size are almost always a single letter, a simple mark, or a bold silhouette. The preview grid shows every size at its true resolution so you can see the problem here rather than after deploying.
Last updated