Changing the Windows XP Start Button Icon

For those of you who followed along with the last article, you’re all set to go.  Any new readers need to stop by Part 1 and learn how to back up the files we’ll be editing and how to unprotect Explorer.exe.

Once again you’re going to need a resource editor.  I’ll be using Resource Hacker.  I’ve provided the example graphic that I’m using in the component pack for this article, but if you want to create your own you’ll need a graphics editor capable of editing Windows bitmaps.  You can use any one you like, but I’ll be using Photoshop CS because it’s one of the few that can handle the secret that I’ll be revealing a little later on.

Once you’re all set, go ahead and open Explorer.exe in Resource Hacker.  For those new readers, just choose Open… from the File menu.  Explorer.exe will be in your Windows directory.  This is typically C:Windows but may be C:WINNT on upgraded Windows 2000 machines.

Once you have Explorer.exe open in Resource Hacker, expand the Bitmaps heading and navigate to 143.  Expand that and choose the entry for your installed language; in my case it's 1033.  You should see the Windows graphic in the pane to the right.

It’s a 25x20 32-bit Windows bitmap.  You can create your own from scratch if you like, but I’m going to show you how to edit this one instead.  With it showing in the right pane, choose Save [Bitmap 143 : 1033]… from the Actions menu.  Give it a name like start_orig.bmp and save it to your Desktop.

If you're using the Windows Classic theme, you'll want to change the 16x16 bitmap at 176:1033 instead.

Go ahead and close Resource Hacker for now.  We’re done with it until we have our custom graphic.  Open up Photoshop, load your newly saved bitmap, and let’s get started customizing it.

If you’re like me and not a graphic designer, take the easy way out.  Find an icon that you would like to use and size it to fit in a 25x20 graphic.  Then we’ll just copy and paste it in when we’re ready.

With the original start button graphic loaded, set the zoom to 1000%.  This should make it large enough to see individual pixels easily.  Use whatever method you like to fill the entire image with black (0,0,0) pixels.  I just used the pencil tool to make sure that there were no lighter pixels anywhere.

Any pixel that you want to be transparent later will need to be pure black.  Any other color will cause partial transparency at best.

Now go to your other image and select whatever you would like to appear in your start button.  Use the Copy command in the Edit menu.  Return to the start button image and paste it in.

It should have pasted into a new layer.  You can move it around if need be.  Once you have it in place grab the eraser tool and clear any extra pixels that need to be cleaned up.  As you erase around your objects, you should see the black pixels underneath.  Once you have it the way you like it, press Ctrl + E to merge the two layers together.

Try to use a 20x20 graphic placed all the way to the left of the image.  The right 5 pixels should remain black from the top to the bottom as they provide the padding between the start button graphic and the start button text.

You should now have a flat image of your icon on a black background.  You’re almost done.  Here’s the part you’ve been waiting for. 

I’ve seen this question asked hundreds of times across the Internet and never have I seen a correct response. “How do you add transparency to the start button graphic?”  Well, here’s how.

In Photoshop, switch to the Channels palette.  If you’re editing the original, you’ll see a channel named Alpha 1.  If you’re creating your own, just click the Create new channel button and it will create it for you.

Make sure that the Alpha 1 channel is selected.  While it’s selected, make the RGB channel visible as well.  You should see a reddish version of your image.  Grab the pencil tool and set your foreground color to black (0,0,0) again.

Using the pencil tool on the Alpha 1 channel, color all of the pixels that you would like to appear transparent.  They should become pure red.  Then change the foreground color to white (255,255,255) and color all of the pixels that you would like to be opaque.

Alpha channels are used to define transparency levels in an image. Rather than making individual transparent pixels based on a selected color, an Alpha channel works as a sort of mask. It's a grayscale layer applied to an image. Black areas are transparent and white are opaque. Levels of grey create partial transparency based on color depth.

Now remove visibility on the RGB channel again so that you can only see the Alpha 1 channel.  All of your pixels should be either black (transparent pixels) or white (all other pixels).  You should not see any other colors here.  Transparency is based off of this Alpha channel.

Now select the RGB channel and all visibilities should return to normal.  You should again see your image on a black background.  Now save your image as something like start_custom.bmp.  In Photoshop you will be asked what bitmap format you want to use.  Choose Windows 32-bit.

Now that you have your new graphic, we’re all set to make the change.

Open up Resource Hacker again, but before loading Explorer.exe you’ll need to make sure that it’s not running before trying to edit it.  Otherwise, you’ll just get a “file is in use” error.  To do that you’ll need to open Task Manager by pressing Ctrl + Alt + Del.

In Task Manager, choose the Processes tab and select the explorer.exe process.  Then click the End Process button.  Do the same for each if there are multiple instances of it.  Your taskbar should disappear.

If Resource Hacker is not visible, hold down the Alt key and press Tab repeatedly until it is selected.  Then release the Alt key to return it to focus.

Now open Explorer.exe in your Windows folder.  From the Action menu, choose Replace Bitmap…  Make sure that the start button icon is showing at the right and then click the Open file with new bitmap… button.  Find your newly created bitmap file and open it.  Then click the Replace button.

You should be returned to the normal view with your new graphic showing.  Choose Save from the File menu to commit your changes.  Once saved, you can close Resource Hacker.

Now you need to start the explorer.exe process again.  Press Ctrl + Alt + Del to open Task Manager and choose New Task (Run…) from the File menu.  Type in Explorer.exe and click OK.  After a few seconds your taskbar should appear with your new start button!

Wipe your forehead, that wasn’t half as hard as you thought it would be, was it?

You’re start button should now look something like the one above.  If it does, you’ve done it correctly.  If it doesn’t, you can open Resource Hacker and try again.

If something goes wrong, you can replace the damaged Explorer.exe file with the backup that you created when we began.  You’ll need to make sure the file isn’t in use before trying to replace it.

What?  You didn’t take the time to create a backup?

In case of emergency, if you didn’t create a backup, you can replace Explorer.exe by expanding it from your original Windows CD or the Restore disc provided by your PC manufacturer.

Well, if that wasn’t enough for you, be sure to stick around for the final part in this series when I show you step-by-step how to change the start button background without having to use unnecessary third-party apps or installing any new themes or theme managers.

You won’t want to miss it.  Until next time…