Change the IE Animated Icon in the top right

Posted on Thu, 2006-02-23 15:04

This tutorial with guide you through how to change the small image located in the top right hand corner of Internet Explorer:

WARNING: Knowledge of the registry is required.

This is known to work with Internet Explorer 6 as I use a custom image. If you use an older version it may not work, although I don't see why it wouldn't.

You are doing this at your own risk. Skeletorscorpse can not be held liable for any damages.

By following this tutorial you are not holding Skeletorscorpse liable.

If you follow the instructions carefully no damage will be caused to your Windows installation.

What will we be changing?

  • The small icon located at the top right of IE
    top right icon IE
  • The text on the title bar of IE
    titlebar IE branded

 

What do I need to change these?

  • Small amount of Registry knowledge or navigating your way around explorer (they are basically the same)
  • Photoshop and a program that can save BMP as 256 color (the Paint program included with Windows can do this).

 

Why do I need Paint?

  • The icons used in IE have to be 256 color Bitmap files (BMP). If you don't use 256 color BMPs it will not work. As far as I am aware of Photoshop can't save as 256 color (at least in CS2 you can't).

 

What will we end up with?

  • 4 Files

    • 22x22
    • 22x220
    • 38x38
    • 38x380
  • The larger files are for the animated icons, IE rolls through them like a projector.
  • 5 registry entries

 

1.

Navigate your way to C:\WINDOWS\
2.

Create a new folder and call it IE or something like that so you know what it is associated with. Also good to keep it short so you don't have giant file paths.
3.

We will use this folder to store our files. Now press Start » Run and type in "regedit" (don't type the "")
4.

Press the + sign next to the words to see the keys under it. Navigate your way to

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main

5.

Right click in the main area to the right and create 2 new Strings and name them BigBitmap and SmallBitmap.
6.

Double left click BigBitmap. For the value type in C:\WINDOWS\IE\38x38.bmp. Now double left click SmallBitmap. For the value type in C:\WINDOWS\IE\22x22.bmp. If you used another folder than IE then change the path to whereever you are going to put your bitmaps.
7.

Create another String and name it Window Title double click Window Title and type in whatever you want to be displayed in the titlebar after the websites title. In this example I just typed Skeletorscorpse. Everything before is from the website.

titlebar branded
8.

On the left click the Toolbar key. This will bring you to this path:

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Toobar
9.

Create 2 new strings and name them BrandBitmap and SmBrandBitmap

10.

Double left click BrandBitmap. For the value type in C:\WINDOWS\IE\BrandBitmap.bmp. Now double left click SmBrandBitmap. For the value type in C:\WINDOWS\IE\SmBrandBitmap.bmp. If you used another folder than IE then change the path to whereever you are going to put your bitmaps.
11.

You can name your files whatever you want to but remember to make sure they match up with the names in the registry. I name the bitmaps after the string they are under.

Creating the Bitmaps

12.

Open Photoshop and create a new image 38x38. Either draw an image that you wish to use or paste in an image. Save it as a BMP file by going to File » Save As... then select Bitmap (BMP) from the drop down. Name the file 38x38.bmp
13.

Once saved go to Image » Canvas Size and set the height to 380 and click the top middle arrow.
14.

Duplicate the layer over and over again and move them so you have the same image following each other. Then change each frame to whatever you want it to be.

 

For my one I created a new layer, and filled this with a gradient of White to transparent from top to bottom. Then pressed Ctrl + T and set it to 50% height and moved it so that the top was inline with the middle of the canvas. Then I duplicated the layer and flipped it vertically the aligned it to the top of the canvas so i had a transparent to white to transparent gradient. I then merged the layers together and set the blending mode to Overlay.
15.

Save this as a bitmap under the name BrandBitmap.bmp then go to Image » Image Size and set to 22x220. Now save this as a bitmap under the name of SmBrandBitmap.bmp
16.

Open the 38x38.bmp file and go to Image » Image Size and set to 22x22. Save as 22x22.bmp
17.

Open each of the bitmaps in Paint and go to File » Save As and change the Save As Type to 256 Color Bitmap. Repeat this for all of the bitmaps.
18.

Now open IE (close any IE windows if they were open during this process) and it should have picked up the new icons.