ICO to React Converter: Free, Private, No Upload

What actually changes in this conversion

• React is an encoding of the image data, not a new compression scheme. The text is about a third larger than the binary file, so what you gain is portability rather than a smaller size.
• Transparency follows the image data being encoded. React itself is only a text wrapper.
• EXIF, GPS and camera data are stripped on every conversion. That is good for privacy, but you lose capture dates.

About ICO: history and technical details

Introduced by Microsoft with Windows 1.0 in 1985. The modern 32-bit alpha version became standard with Windows XP (2001). Windows Vista (2007) added PNG compression inside ICO for icons larger than 48x48.

Technical: Container holds 1-65535 images. Each entry has a 16-byte directory: width, height, colour count, planes, bit count, data size, data offset. Images are BMP (DIB) or PNG. Max dimension 256x256. Typical Windows icons use 16, 32, 48, 64, 128, 256.

Real-world size: A 6-size favicon.ico is typically 15-40 KB. A single 256x256 PNG favicon is 8-15 KB. Modern best practice uses separate files for 16, 32, 180 (Apple), 192, 512 (PWA).

Popular tools: IcoFX, GIMP, Adobe Photoshop (with plugin), ImageMagick, Favicon Generator, RealFaviconGenerator.

Alternatives: PNG (single size, widely accepted), SVG (sharp at any size), favicon.ico (still needed for legacy).

About React: what you get

React (2013+) and JSX made <img src={dataUrl} /> a common pattern for small icons. The React docs recommend against large data URIs in JSX because they bloat the JS bundle and cannot be hashed by the bundler.

Technical: <img src="data:image/png;base64,..." alt="..." width={} height={} />. The string becomes part of the JS bundle. For production, import the image file and let webpack/Vite hash and cache it.

Real-world size: A 5 KB icon inline in JSX adds 7 KB to the JS bundle. Gzipped, this is maybe 2-3 KB (base64 compresses well). For 20 icons, ~60 KB uncompressed, ~20 KB gzipped.

Popular tools: Create React App, Next.js, Vite, Storybook, any React toolchain.

Alternatives: import img from "./x.png", next/image, Vite import.meta.url, public folder + URL.

Browser and software compatibility

ICO: Supported by Windows and by browsers as a favicon, but most image viewers and editors do not open it directly. React: Works in any React project, since it is plain JSX with a string source.

The JSX snippet works in any React project.

Why people move away from ICO

• ICO is capped at 256 by 256 pixels, so it is of no use as a general-purpose image format.
• Many image viewers and design tools cannot open ICO directly, so you need a PNG to edit it.

Why people choose React

• A JSX snippet lets you drop an embedded image into a component without configuring asset loaders or imports.
• It is useful for quick demos, Storybook stories and tests.

Common mistakes with ICO

• Creating a favicon.ico with a single 16x16 size — looks blurry on Retina
• Using ICO for general images — 256x256 limit makes it useless
• Forgetting the .ico fallback — some old browsers still request it automatically

Best practices for keeping quality

• ICO files are tiny, often 32 by 32 pixels. Scaling them up blurs, so start from a larger original when possible.
• For production, import the image file and let your bundler handle hashing and caching, for example through Next.js Image or Vite asset imports. Large strings bloat the JavaScript bundle.
• Add alt text and explicit dimensions to the generated element.
• Resize before converting if the image will be shown small. A 4000 pixel photo displayed at 800 pixels wastes bytes in any format.
• Check the result at 100 percent zoom, especially around text, edges and gradients, before you replace any originals.
• Keep your original files. Conversions to a lossy format cannot be undone.
• When you convert a set of images, use the same quality setting for the whole batch. The converter handles up to 20 files at once.