Good Looking 16×16 Icons

Having a decent icon for your application or site can mean the difference between it looking either professional or like the work of an amateur. In the past, I’ve never really needed to bother with icons, I’ve always just used a freely licensed icon by someone else, but for QuantumFTP I wanted to create my own. The first few versions of the program had a pretty ugly favicon which looked awful in the taskbar, but after some experimentation in Photoshop, I came up with what I think is a good looking result.

To start, you’ll need an some decent image editing software – Photoshop, Paint Shop Pro or The GIMP and a copy of Axialis Icon Workshop. You’ll also need a plugin to save images as .ico files.

  1. Start with a canvas of 64×64 pixels, the colour depth isn’t important for the minute.
  2. Create your icon. I used a Q with a gradient overlay.
  3. Resize the image to 16×16. You’ll notice the clarity will drop but that’s because there are 1/16th as many pixels to display the fine details.
    The resized image at 64x64 pixels
    The image should still look good, but that’s because it’s got an aplha channel to render semi-transparent pixels.
  4. Change the colour mode to indexed colour by selecting Image->Mode->Indexed Color.
    Decresing the colour depth
    You’ll need to play around with the settings here to find what works best for the image you’re working ok. For me, a green Matte worked well.
  5. After decreasing the colour depth, the image might not look as good at high zoom, but that’s Ok because it will only be displayed at 16×16 pixels.
    The image at reduced colour depth
  6. Save the image as a .ico file using the plugin from Telegraphics.
  7. Now open Axialis. If you already have an icon containing multiple format, for an application for example, create a new format for the 16×16 icon. Otherwise you’ll need to create a new icon.
  8. Open the icon you exported in Photoshop, then copy and paste it into your new icon format in Axialis. Choose to create a new palette.
    Opening in Axialis Icon Workshop
  9. Save the icon in Axialis, then either add it to your webpage or use it in your application.
  10. Since this is an application icon, I updated my form in Visual Studio and here’s the result.
    The final result