Creating Good Looking 16x16 Icons

By Echilon
in Essential Guides

 Share

Recommended Posts

Grand Master

Echilon

Posted
Posted

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...
Apprentice

EchoSphere

Posted
Posted

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

Grand Master

Echilon

Posted
  • Author
Posted
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.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Windows 11's big performance boost is finally available for all

      By sphbecker · Posted

      Close, but it is for any application starting, not just during boot time. In fact, it probably will not improve boot time at all because during a boot, the CPU is already boosting, so a pre-boost wouldn't change anything. I agree that it isn't exciting (especially considering every other OS already does it), but it is a good thing, even if they are just playing catch up.
    • Windows 11's big performance boost is finally available for all

      By cyberhash · Posted

      Any so called performance increase will be in milliseconds, which nobody will actually notice in real world usage.
    • Windows 11's big performance boost is finally available for all

      By WaltC · Posted

      All it does is use the CPU more efficiently during boot to speed up boot times. That's it. Yawn....
    • Windows 11's big performance boost is finally available for all

      By sphbecker · Posted

      It's not a one or the other kind of thing. Software should run efficiently, and the operating system should appropriately manage the CPU clocks. You could have the best most optimized software on earth, and it will still run faster if the CPU does a better job of boosting as needed. All this is doing is pre-boosting the CPU based on user actions, instead of waiting for the normal detection mechanism to kick in. If the OS knows it is about to need more CPU, why shouldn't it use that knowledge? It's the same idea of downshifting before passing someone, instead of just burying your foot into the peddle and waiting for the transmission to figure out what you want to do.
    • Audacity 3.7.8

      By Copernic · Posted

      Audacity 3.7.8 by Razvan Serea Audacity is a free, open source digital audio editor and recording application. Edit your sounds using cut, copy, and paste features (with unlimited undo functionality), mix tracks, or apply effects to your recordings. The program also has a built-in amplitude-envelope editor, a customizable spectrogram mode, and a frequency-analysis window for audio-analysis applications. Built-in effects include bass boost, wah wah, and noise removal, and the program also supports VST plug-in effects. You can use Audacity to: Record live audio. Record computer playback on any Windows Vista or later machine. Convert tapes and records into digital recordings or CDs. Edit WAV, AIFF, FLAC, MP2, MP3 or Ogg Vorbis sound files. AC3, M4A/M4R (AAC), WMA and other formats supported using optional libraries. Cut, copy, splice or mix sounds together. Numerous effects including change the speed or pitch of a recording. Write your own plug-in effects with Nyquist. And more! See the complete list of features. Audacity 3.7.8 changelog: #10688 Fixed an exception thrown when pasting into a newly-created track (Thanks, David Bailes (@DavidBailes)!) #10870, #10884, #10775, #10629 Fixed tone generation, waveform-scale setting, SetClip Name parameter, and clip-boundary command names for scripting and macros (Thank you, David Bailes (@DavidBailes)!) #11106 Fixed the loading of presets for the Distortion effect (A million thanks, David Bailes (@DavidBailes)!) #10947 Fixed paste into an empty audio track not preserving the source sample rate (Thanks, Juan Gabriel Colonna (@juancolonna)!) #10776 Allowed AltGr modifier in label and clip name editing (Thanks, Davide Peressoni (@DPDmancul)!) #9938 Added options to choose where silence is truncated (start/middle/end) (Thanks, Noah Rosenfield (@nosenfield)!) #9935 Added Podcast 2.0 chapters JSON export for label tracks (Thanks, Noah Rosenfield (@nosenfield)!) #10103 Improve UI on HiDPI displays on Linux/wxGTK (Thanks, Ivan A. Melnikov (@iv-m)!) #10099 Fixed MixerBoard Mute and Solo button display (Thanks, Ivan A. Melnikov (@iv-m)!) #10681 Fixed multichannel FLAC import #10999 Fixed envelope being broken after joining clips Download: Audacity 64-bit | Standalone ~20.0 MB (Open Source) Download: Audacity 32-bit | Standalone Download: Audacity ARM64 | Standalone View: Audacity Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware

  • Recent Achievements

    • One Month Later
      highriskpaym earned a badge
      One Month Later
    • Week One Done
      highriskpaym earned a badge
      Week One Done
    • One Year In
      highriskpaym earned a badge
      One Year In
    • Week One Done
      FBSPL earned a badge
      Week One Done
    • One Year In
      Jim Dugan earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      499
    2. 2
      PsYcHoKiLLa
      198
    3. 3
      +Edouard
      155
    4. 4
      Steven P.
      84
    5. 5
      ATLien_0
      71
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!