Announcing HTML5 X-Icon Editor

  • Article

Along with all the other announcements, today I’m very happy to announce the X-Icon Editor, an HTML5 application that allows you to create high resolution icons. I’ll be honest: I love this tool. Let me show you why. Sorriso

First of all, what is a high resolution icon? The ICO format supports multiple resolutions. In the past, websites usually implemented a 16x16 pixel icon. Today Internet Explorer 9 allows websites to specify crisper icons that will shine in the different parts of the UI (for example, navigation bar, taskbar, or new tab page).

The X-Icon Editor helps you build a high resolution icon that can include up to 4 sizes: 16x16, 24x24, 32x32 and 64x64 pixels.

Let’s get started. Open either Internet Explorer 9 and go to www.xiconeditor.com.

image

Import an image

You can hand-draw your own icon or import an existing image: transparent png, gif, jpg, bmp, and ico formats are all supported. To have some fun, I’ll use my photo. After uploading the image, you can crop out just the area you are interested in working on.

image

Editing the icon

From the panel on the right, you can select all the sizes that will apply to this image. In a different scenario, you might want to upload 4 different images (one for each size).

The editing tools are not super advanced, but they still allow you to be pretty flexible and creative. Let’s add some transparency to the background. In order to do this, I will use the Paint Bucket Tool to set the Alpha channel to 0 and change the Tolerance to 15%. When you click on the background, the tool will automatically detect the “adjacent area” and clear it. If you make a mistake, you can use the blue arrows to go back/go next.

image

Size matters

Now that I’m happy with the icon at 64x64 pixels, I can click on the 32x32 box in the right panel and repeat the same Paint Bucket Tool operations. Or, after clicking the 32x32 pixel option, I can import my 64x64 pixel image and it will come in with all the same formatting, but at 32x32 pixels.. I repeat the same steps for the 24x24 and 16x16 sizes. At the end, this is what I get.

image

Preview online

Before exporting the icon, I can preview how my icon will fit in the browser.

image

Moreover, since the new icon actually becomes the default icon for this page, I can do a live test and drag-and-drop my tab to the Windows 7 Taskbar.

image

It’s awesome--I always dreamed of being between IE9 and Visual Studio!! Angelo

Exporting

I like my icon: the transparency is neat and the IE9 chrome picks up nice colors. When you click Export, the tool will generate only 1 icon, which embeds all the dimensions used (that is, where at least one pixel in the dimension is not transparent). You will also get some recommendations in regard to performance (for example, use max-age, expires date, and compress the icon using GZIP).

image

With the addition of one standard line, you can add it to your site…

<link rel="shortcut icon" href="favicon.ico"/>

…and you are ready to go! 

Thanks!

Special thanks go to Gregor and the other folks at Avarice who built this awesome application. You guys rock!

Questions? Issues? Feature requests?

Please let us know.

Comments

  • Anonymous
    November 08, 2010
    Looks great - I'll try it.