Creating Good Looking 16x16 Icons


Recommended Posts

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

  • Start with a canvas of 64x64 pixels, the colour depth isn't important for the minute.
  • Create your icon. I used a Q with a gradient overlay.
  • Resize the image to 16x16. You'll notice the clarity will drop but that's because there are 1/16th as many pixels to display the fine details.
    The image should still look good, but that's because it's got an aplha channel to render semi-transparent pixels.
  • Change the colour mode to indexed colour by selecting Image->Mode->Indexed Color.
    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.
  • 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 16x16 pixels.
  • Save the image as a .ico file using the plugin from Telegraphics.
  • Now open Axialis. If you already have an icon containing multiple format, for an application for example, create a new format for the 16x16 icon. Otherwise you'll need to create a new icon.
  • 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.
  • Save the icon in Axialis, then either add it to your webpage or use it in your application.
  • Since this is an application icon, I updated my form in Visual Studio and here's the result.

Also available (with images) at LegHumped.com

Link to comment
https://www.neowin.net/forum/topic/632699-creating-good-looking-16x16-icons/
Share on other sites

  • 2 weeks later...
  • 4 weeks later...

hi, im new to this site, and i need help, but if im posting in wrong spot message me pls. i need and avatar, i have a rough draft made up, but i need someone to take it and make it better. can someone help me? i can figure something out for the service.. her it is, the top ring is gold the left one is steel, the last ring is crtyal, and the triangle is iron. But this avatar i dont want the text up top. plssss anyone... you can play with it make it like you would like it, but it has to be in those orders.. tys again..

post-253678-1212261813_thumb.jpg

You can also just use favicon generator found here to resize any image of any size.

But that's not what the guide shows. Just resizing an image and reducing the colour depth results in the problem which this guide shows you how to avoid. ;)

hi, im new to this site, and i need help, but if im posting in wrong spot message me pls. i need and avatar, i have a rough draft made up, but i need someone to take it and make it better. can someone help me? i can figure something out for the service.. her it is, the top ring is gold the left one is steel, the last ring is crtyal, and the triangle is iron. But this avatar i dont want the text up top. plssss anyone... you can play with it make it like you would like it, but it has to be in those orders.. tys again..

Sorry, this is a thread about creating 16x16 program/favicons, not resizing images to use as avatars.

  • 2 months later...
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • OK, back to normal now! Ozzy Osbourne - Flying High Again (Official Music Video)  
    • The actual download size is ~130–180 MB, not 100 MB.
    • Big change of pace for me! Gunnar & the Grizzly Boys - Standard American (Official)  
    • draw.io Desktop 30.2.4 by Razvan Serea draw.io desktop is a downloadable security-first diagramming application that runs on Windows, MacOS and Linux. Creating diagrams in the desktop app doesn’t need an internet connection. This is useful when you are disconnected or when you must create diagrams in a highly secure environment, where data protection is of the utmost importance. When you use the draw.io desktop app, your diagrams will be stored on your local device. Because this is a stand-alone application, also designed to run offline, there are no interfaces to cloud storage platforms available. Of course, you can still store your diagrams in folders that are synchronised to your cloud storage if you wish. Easy-to-use diagram editor The draw.io apps work just like the office and drawing tools you are used to using. Drag and drop shapes from the shape libraries and drag to draw connectors between them. Drag connectors to add waypoints and set a precise shape and position, or let them reroute automatically. Double click and start typing to add a label to anything. Create tables and swimlane flows with a familiar tool. Style shapes and connectors with customisable palettes, sketch options, fonts and text formatting tools. Search for shapes, including in open-source icon libraries. Use our vast libraries of shapes and templates, organised into logical categories, to create a range of diagrams and infographics. Generate diagrams from text descriptions using our smart templates. Diagram faster with keyboard shortcuts. draw.io Desktop 30.2.4 changelog: Uses electron 42.4.1 Updates to draw.io core 30.2.4. Download: draw.io 64-bit | Standalone ~100.0 MB (Open Source) Download: draw.io 32-bit | ARM64 | ARM64 Standalone Links: draw.io Home Page | Project page @GitHub | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      Eurosoft10 earned a badge
      Week One Done
    • One Month Later
      Eurosoft10 earned a badge
      One Month Later
    • One Year In
      Skeet Campbell earned a badge
      One Year In
    • One Month Later
      Sharbel earned a badge
      One Month Later
    • First Post
      BizSAR earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      588
    2. 2
      +Edouard
      190
    3. 3
      PsYcHoKiLLa
      79
    4. 4
      Michael Scrip
      77
    5. 5
      Steven P.
      73
  • Tell a friend

    Love Neowin? Tell a friend!