Creating Site Icons with the X-Icon Editor

Site icons (AKA, favicons) are used to help establish the identity of a website. When you navigate to a website with an associated site icon, most modern browsers will display it at various places in the user interface. Not only does Internet Explorer 9 support site icons but takes this experience a step further when a site is pinned to the taskbar. For example, if you pin the site, beautyoftheweb.ca to the taskbar, the site icon and its colour scheme are incorporated as part of the user interface, providing a more immersive experience:

Site icon from beautyoftheweb.ca integration in Internet Explorer 9

It's easy to associate a site icon with a website; all you need is an image (preferably, an .ICO file for broad compatibility) and a minor update to the markup of your page. (I'd recommend checking out Wikipedia's "Favicon" article for more information on how this done.) However, there are many web developers who neglect to do this. And that sucks because I consider site icons to be important from a design perspective since they help establish your website's identity.

Now, there are many tools that exist for creating site icons. However, I've found X-Icon Editor to be one of the simplest.

The X-Icon Editor is a HTML5 application that provides tools to create high-resolution site icons (.ICO file) with up to four different resolutions: 64x64, 32x32, 24x24 and 16x16 pixels:

X-Icon Editor running in Internet Explorer 9

As you can see in the image (above), the X-Icon Editor provides editing tools to create site icons from scratch. However, because I'm less graphically-inclined than most (AKA, "definitely NOT the world's greatest graphic designer"), I'd recommend that you start by importing an existing image:

X-Icon Editor upload dialog in Internet Explorer 9

From the X-Icon Editor FAQ: "X-Icon Editor allows multiple uploads of different images. The image formats currently supported are: .PNG, .JPG, .BMP, .GIF and .ICO. After importing an image, you can also crop dynamically just the area of the picture you would like to elaborate (not supported for .ICO)."

After importing an image into the X-Icon Editor, you're now ready to start editing your site icon:

X-Icon Editor with uploaded image in Internet Explorer 9

The X-Icon Editor provides many editing tools to modify the design of your site icon. (For background information of site icon design, I'd recommend checking out 3 Ways To Successfully Design Your FavIcon from the LogoDesignerBlog.) Once finished, you can preview your work and (more importantly) see how your site icon will look in Internet Explorer 9:

X-Icon Editor preview of site icon
The ability to preview your work-in-process is total awesome sauce because it saves a lot of time during the design process. Here, you can get a quick peek and make adjustments (if necessary).

Once you've finished your design, previewed your work and are happy with the final results, it's time to export your site icon:

X-Icon Editor site icon export

The X-Icon Editor will provide you with a .ICO file, embedded with the different resolutions you've specified. From here, it's simply a matter of uploading the .ICO file to your web server and associating your site icon via markup (as shown in the image above). That's it!

I really like the X-Icon Editor and would recommend that you check it out. More importantly, if you haven't created a site icon for your website, you really should consider it – especially for Internet Explorer 9!