Introducing: An icon converter!


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:

  1. 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.
  2. 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!

Related posts:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.