Click to open the tool!
I made a web-based icon converter tool! You can check it out and/or read this small post I wrote about development.
Technical
ICO format is not particularly complex, save for the whole "uncompressed icons are bitmaps with half of the header" part.
But, what if I were to tell you that I already made a similar thing... in 2009... in Flash?
Unfortunately the archive doesn't quite work, but for once I didn't lose any of the AS3 files, so here's what it looked like:
At some point I removed the tool from my website after getting
threats warnings from Google Analytics strongly suggesting that I remove the
Flash content or have my search rankings tanked.
So, I rewrote my suspucious-looking AS3 code in Haxe, added some features, added PNG compression support (really non-intimidating as it turned out), and there you have it - an icon converter that fits in just 30 KB of minified JS code.
Features
Much like its predecessor, the tool follows the reasonable standards for what I expect from an online converter, with some additions:
- You can automatically generate additional icon sizes from existing ones.
This includes support for super-sampling, which makes downscaling from large sizes nicer. - You can choose how to upscale/downscale your images.
For example, if you have a low-resolution pixel-art image that you want to use as an icon, you probably want to keep it pixelated when scaling up, and you can. - You can import more than one image if you have different versions prepared for different resolutions.
You can even provide all of your intended resolutions yourself! - You can file-pick, drag-and-drop, and paste your images.
Seamlessly replacing images means that you can quickly convert multiple images to icons using the same settings.
Findings
As it goes with just about anything I make that is innovative in smallest way, I'm doomed to find some fundamental flaw with how tools or environments work, in this case:
- Asking the browser to downscale your image with imageSmoothingEnabled == false (thus using nearest-neighbour sampling) is apparently too much - Firefox straight up ignores this and interpolates as usual while Chromium works at first but stops taking the argument into account once you call putPixelData on the context.
- Pasting semi-transparent images into browser on Windows is comically unpredictable and
I have not found a single image editor that could copy pixels in a way that could be
pasted both in Chromium and Firefox without losing alpha.
I have shared my findings under a single question I could find on the subject.
Conclusion
I spent longer on this than I originally intended, but it was fun!