Creating a small icon

Community Forums/General Help/Creating a small icon

therevills(Posted 2010) [#1]
Hi All,

I am trying to make an windows icon for my game. I am using IcoFX and I have set up multipe sizes within the image (256,48,32,16) and it looks good in there.

When I save the icon, it looks good in Windows Explorer, but when I create a icon.o file to use in my project the image on my game looks bad:

Windows Explorer:


IcoFX:


Game:


Any way to make it look better?

Thanks,
Steve


therevills(Posted 2010) [#2]
Okay, I think Windows was messing with me...

It now looks like this:



I had to clear the Window's icon cache... :/

I would still like it to look like the one in explorer though...


xlsior(Posted 2010) [#3]
I would still like it to look like the one in explorer though...


You don't have enough detail for the small size -- if you use slightly thicker lines around the borders, then you'll end up with a smoother pixel blend / antialiasing in the small size version and it may look better.

I don't think your small icon looks bad though, there's only so much you can do at that size.


therevills(Posted 2010) [#4]
True... once I figured out windows was caching the icon on the game window Ive managed to make it look a tiny bit better...


Kryzon(Posted 2010) [#5]
That's very weird. If both icons have the same size (in Explorer and your app window), they should be shown the same way.

EDIT: In Explorer, it's Windows that sends the fully built image of the interface. In your app, the Aero UI is handled "more directly" by the graphic card AFAIK, so that's what must be making the difference.


Ts Inventions(Posted 2011) [#6]
Oh wow, how did you get your custom icon into the program window (also the taskbar)? I have and use IcoFX and ResHacker and I can get the custom icon(s) into the exe, but I can't get it into the program window or the taskbar like you did. Can you help me please? What did you do? P.S.: I am using BlitzPlus.


xlsior(Posted 2011) [#7]
By the way: Keep in mind that the windows Vista & Windows 7 design guidelines advice an application icon in several sizes, up to 256x256 for best effect on all computers.


Adam Novagen(Posted 2011) [#8]
I can tell you exactly what went wrong in the first icon, although I'm not sure exactly WHY.

That first icon has been paletted by Windows to 255 colours + 1-bit alpha. This means it just clips everything above or below A127 to A255 or A0. In a nice, smooth-edged image like your icon, this of course can really mess it up.

So solve this problem should it occur on any other computer, make your icon in the GIMP. Make a separate layer for each size of the icon, and scale them accordingly. NOW, take each of those layers and make a DUPLICATE. Use the Layer -> Transparency -> Threshold Alpha filter to manually select the alpha level at which to clip; anything above it will be A255, below it, A0. This lets you manually fine-tune how the smooth alpha-blended edges of your icon get cut off, so that it'll look fine should it ever appear in 8-bit again.

When SAVING the icon - yes, the GIMP can natively save .ICO files - you'll have several options for each layer. For the layers that contain your original, smooth, antialiased icon, use "32 bpp, 8-bit alpha, no palette." For the layers where you've manually controlled the alpha levels, select "8 bpp, 1-bit alpha, 256-slot palette."

Hey presto, you're covered!

Last edited 2011


GfK(Posted 2011) [#9]
I can tell you exactly what went wrong in the first icon, although I'm not sure exactly WHY.
He probably worked it out by now, given that he started this thread over a year ago.


Grey Alien(Posted 2011) [#10]
Seeing as it's bumped, I wanted to ask everyone if they ever make different small and large icons so that the small ones read well and the large ones can have more fancy detail.


Adam Novagen(Posted 2011) [#11]
He probably worked it out by now, given that he started this thread over a year ago.

Er... Derp. I didn't notice that timestamp, sorry; I had no idea this had been resurrected. XD

Seeing as it's bumped, I wanted to ask everyone if they ever make different small and large icons so that the small ones read well and the large ones can have more fancy detail.

Absolutely. As I've learned more about .ICOs, I've changed my methods many times; I now usually start with the 256px "main" icon, which I scale down in stages to 32px. I then usually create a 24px and 16px version from scratch.


Grey Alien(Posted 2011) [#12]
OK thanks Adam. I thought as much. For the small icons, do you use a completely different design or try to stick to the same overall design?


GfK(Posted 2011) [#13]
Keep the image the same for consistency.


Adam Novagen(Posted 2011) [#14]
I usually keep it the same, although not in all cases; sometimes the large-scale design just won't permit it. The icon for GhzLib, for instance, is a "chromified" version of its actual name, GhzLib, in block lettering. Works fine until about 32/24px, at which point the text just becomes a furry grey strip. On the smaller icons, I simply have the letter "G" from the original text, which is visible enough to work.

In retrospect, of course, I could simply have used the "G" for all the icon sizes, or even just made the G into the damn logo from the start. But you get the idea. XD


Ts Inventions(Posted 2011) [#15]
Ummm is anyone going to help me, or is everyone going to take advantage of me bumping this topic? Really guys I need help. Please scroll up and look at my small post.


D4NM4N(Posted 2011) [#16]
Reshacker does do this. You should see the same icon regardless.


Ts Inventions(Posted 2011) [#17]
OK, from what I have figured out, in Reshacker when I add my icon into my program, I don't enter anything into the resource language box and the value for the icon's resource green/yellow gear thingy ends up zero. When I go look at some other blitz programs in Reshacker, that value is 1033 and the icon at least shows up in the task bar! How did they do that? What did they enter in the resource language box (If anything)? Is there also any way to get the icon in both the task bar and the program window? Can someone please help me? Tell me how they did it or post a link to where I can find how to do this? -_-


Kryzon(Posted 2011) [#18]
Look, I think it's more related to the operation rather than the program.

I opened ResHack (some old version I have), then File -> Open... -> chose the EXE I want to replace\add the icon. This EXE would be the release version of your program built from your blitz product.

Once opened, the treeview in the left of ResHack's screen will be populated with folders. I opened the "Icon Group" folder and a sub-folder named "107" until the resource "1033" was reached.
I right click this 1033 resource, and in the context menu chose "Replace Resource...".
Now in this "Replace Icon" dialog, open the icon file you want to embed in your EXE. It can be from another EXE, DLL, ICO or RES files.
After loading it you will have to select the icon (under the "Select New Icon" group), thus highlighting it and setting as the icon you want to include in the program you are currently dealing.
Hit the Replace button.

Go to File -> Save As... -> save your program again as .EXE (make sure to include the extension). It should hold the icon.