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

    • While I agree with all that, it just proves there's an a** built for every seat.
    • Lol are you mad because I'm not using AI? I'd rather pay people than lose a bunch of potential customers and get humilated because I used AI. A lot of people won't purchase a game if it used AI during development.
    • LibreWolf 152.0-1 by Razvan Serea LibreWolf is an independent “fork” of Firefox, with the primary goals of privacy security and user freedom. It is the community run successor to LibreFox. LibreWolf is designed to increase protection against tracking and fingerprinting techniques, while also including a few security improvements. This is achieved through our privacy and security oriented settings and patches. LibreWolf also aims to remove all the telemetry, data collection and annoyances, as well as disabling anti-freedom features like DRM. LibreWolf features: Latest Firefox — LibreWolf is compiled directly from the latest build of Firefox Stable. You will have the the latest features, and security updates. Independent Build — LibreWolf uses a build independent of Firefox and has its own settings, profile folder and installation path. As a result, it can be installed alongside Firefox or any other browser. No phoning home — Embedded server links and other calling home functions are removed. In other words, minimal background connections by default. User settings updates Extensions firewall: limit internet access for extensions. Multi-platform (Windows/Linux/Mac/and soon Android) Community-Driven Dark theme (classic and advanced) LibreWolf privacy features: Delete cookies and website data on close. Include only privacy respecting search engines like DuckDuckGo and Searx. Include uBlockOrigin with custom default filter lists, and Tracking Protection in strict mode, to block trackers and ads. Strip tracking elements from URLs, both natively and through uBO. Enable dFPI, also known as Total Cookie Protection. Enable RFP which is part of the Tor Uplift project. RFP is considered the best in class anti-fingerprinting solution, and its goal is to make users look the same and cover as many metrics as possible, in an effort to block fingerprinting techniques. Always display user language as en-US to websites, in order to protect the language used in the browser and in the OS. Disable WebGL, as it is a strong fingerprinting vector. Prevent access to the location services of the OS, and use Mozilla's location API instead of Google's API. Limit ICE candidates generation to a single interface when sharing video or audio during a videoconference. Force DNS and WebRTC inside the proxy, when one is being used. Trim cross-origin referrers, so that they don't include the full URI. Disable link prefetching and speculative connections. Disable disk cache and clear temporary files on close. Disable form autofill. Disable search and form history...and more. LibreWolf 152.0-1 changelog: Upstream release, see the Firefox 152.0 Release Notes Notable changes: The AppImages are now built on Codeberg along with the other releases We have decided to wait a bit longer to enable the settings redesign, due to use being aware of multiple upstream issues Download: LibreWolf 64-bit | Portable 64-bit | ~100.0 MB (Open Source) Download: ARM64 | Portable ARM64 Links: LibreWolf Home Page | Addons | Screenshot | Reddit Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • hahahahah wow hahahah you sure got me there hahahahahah, you know that bad performance is always due to poor optimization by the developers, right???
    • "I know for a fact I'll never own one of these." This is why choice is better than government regulation. Globaly Android has something like 72% of the smartphone market. Granted the vast majority of that is low end phones. Apple can and should charge whatever they want. The market will decide if it is too much.
  • Recent Achievements

    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done
    • One Month Later
      eurospharma62 earned a badge
      One Month Later
    • Week One Done
      With What earned a badge
      Week One Done
    • Week One Done
      Harris Gilbert earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      560
    2. 2
      +Edouard
      168
    3. 3
      PsYcHoKiLLa
      72
    4. 4
      Michael Scrip
      64
    5. 5
      ATLien_0
      64
  • Tell a friend

    Love Neowin? Tell a friend!