You are here: mozdev.org > iconpacks  

firefox & mozilla icon packs

Location: Icon Packs > Docs/Tutorials > Grayrest's Tutorial

Introduction

The goal of this guide is to provide people with some direction on making icons for Mozilla/Firefox (and distributions such as Netscape and Beonex that use the same windowIDs). Making such icons is not a difficult process and is exactly like making any other kind of icons, so this tutorial will be very short.

Requirements:

  • An idea for the icons
  • A piece of paper
  • A pencil
  • A graphics Package (aka. Photoshop, GIMP)
  • An icon package (I use Microangelo)

Step 1: PLAN!

As with most things in graphic design (or any design for that matter), planning is crucial in the path to getting a good result. Take the sheet of paper I listed in the requirements and doodle. Get some ideas on paper and see how they work out before firing up Photoshop. Keep in mind that detailed drawings aren't necessary, as the smallest icons (16x16) only give you 256 px to work with. Try for a design that will convey the idea in simple shapes. An excellent example of this is the mailnews icon on the mini-taskbar.

Here's a list of all the icons you need to make for mozilla (or rather, the ones I have in my icon pack, if you have a more definitive list, please email me):

Application Window Icons Mozilla Filetypes Icons
Window Icon Name filetype(s) Icon Name
Address Book Card abcardWindow.ico GIF gif.ico
Main Address Book addressbookWindow.ico HTM, HTML, SHTML html.ico
Bookmark bookmark-window.ico JPG, JPEG jpeg.ico
Calendar calendar-window.ico JS js.ico
Chatzilla chatzilla-window.ico MNG mng.ico
Download Manager downloadManager.ico PNG png.ico
Composer HTML Editor editorWindow.ico SVG svg.ico
History history-window.ico XML xml.ico
JavaScript Console jsconsoleWindow.ico XUL xul.ico
Navigator main-window.ico
Mail/News messengerWindow.ico
Mail/News Message Composer msgcomposeWindow.ico
JavaScript Debugger venkman-window.ico
DOM Inspector winInspectorWindow.ico

The standard windows icon sizes are 16x16 and 32x32. You'll also want a 48x48 icon size to make the WinXP people happy. It can be just the 32x32 icon without being resized to avoid the ugly pixellation when XP scales the icons up.

Step 2: Paint

Fire up your paint program and sketch out your icons. I don't have much to say here, this is where you come in and provide the creative energy. I do, however, have some tips:

  • I use Photoshop here, but the GIMP is almost as good and several hundred dollars cheaper.
  • I find setting the canvas size a few pixels larger than the final product and setting rules the best for giving me room to work with.
  • My icons share a background, so I have that on the bottom layer and each of the icons for the apps on a different layer.
  • If you use Microangelo to turn your graphics to icons, as I do, be sure to output one size as a gif and the others as bitmaps. Why? You can't start an icon using a bitmap and you can't import a gif.

Step 3: Iconify

I use Microangelo, so some of these instructions will be specific to that program. I encourage you to find a better program, as I really hate to use Microangelo. Unfortuanately, all the other programs were even worse. I ask: how hard can it be to write software that takes in a set of pngs and makes an icon out of it using the alpha channel? On to the actual instructions.

Fire up Studio, then hit open and pick your GIF, then pick the transparent color from the swath on the right and clear out all the transparent pixels that Microangelo helpfully fills in. Then import the rest of your sizes using File>import and importing them in BMP format. Clear out all the transparent pixels again, and save the icon as the appropriate name shown above. Lather, rinse, repeat.

To test your icons, simply open up the directory you saved the icons to (it really helps to save them all to a single, initially empty directory) and choose View>Small Icons, View>Large Icons, View>Tile (for WinXP users). You can also use the Microangelo viewer, but I don't. If you want to actually see them in action, move them to <mozillaroot>/chrome/icons/default/ and, if they're appropriately named, they'll show up in new mozilla windows.

Step 4: Package as a XPI

XPI (pronounced "zippy") is Mozilla's cross platform installer. You can install icons on any platform you wish, though only windows users can currently make use of window icons. In any case, it makes installation a snap and isn't difficult to set up.

First, get all your icons into an empty folder named "icons". You then need to create an install.js. This javascript tells mozilla where to put your icons. Create it in the parent folder of "icons" to make it easy to zip up. I've reproduced my install.js below. The parts you should change are in red. Also, remove the lines corresponding to icons you don't have in your icon pack.

    //<------------------------Begin grayrest install.js--------------------------->

        var iconpackname="grayrest/Giovanni Icons";
        var regname="/grayrest/icons";
        var version="20020115";
        var targ="default";
        initInstall(iconpackname,regname,version);
        iconFolder = getFolder("Chrome","icons");
        addDirectory(regname,version,"icons",iconFolder,targ,true);
        addFile(regname,version,"abcardWindow.ico",targ,""",true);
        addFile(regname,version,"addressbookWindow.ico",targ,""",true);
        addFile(regname,version,"bookmark-window.ico",targ,""",true);
        addFile(regname,version,"calendar-window.ico",targ,""",true);
        addFile(regname,version,"chatzilla-window.ico",targ,""",true);
        addFile(regname,version,"downloadManager.ico",targ,""",true);
        addFile(regname,version,"editorWindow.ico",targ,""",true);
        addFile(regname,version,"fullpack.ico",targ,"",true);
        addFile(regname,version,"gif.ico",targ,"",true);
        addFile(regname,version,"history-window.ico",targ,"",true);
        addFile(regname,version,"html.ico",targ,"",true);
        addFile(regname,version,"jpeg.ico",targ,"",true);
        addFile(regname,version,"js.ico",targ,"",true);
        addFile(regname,version,"jsconsoleWindow.ico",targ,"",true);
        addFile(regname,version,"main-window.ico",targ,"",true);
        addFile(regname,version,"messengerWindow.ico",targ,"",true);
        addFile(regname,version,"mng.ico",targ,"",true);
        addFile(regname,version,"mozapp.ico",targ,"",true);
        addFile(regname,version,"mozfile.ico",targ,"",true);
        addFile(regname,version,"mozfiletemplate.ico",targ,"",true);
        addFile(regname,version,"mozilla.ico",targ,"",true);
        addFile(regname,version,"msgcomposeWindow.ico",targ,"",true);
        addFile(regname,version,"png.ico",targ,"",true);
        addFile(regname,version,"svg.ico",targ,"",true);
        addFile(regname,version,"venkman-window.ico",targ,"",true);
        addFile(regname,version,"winInspectorWindow.ico",targ,"",true);
        addFile(regname,version,"xml.ico",targ,"",true);
        addFile(regname,version,"xul.ico",targ,"",true);
        if(getLastError()){
            performInstall();
        }else{
            cancelInstall();
        } //if(getLastError())))

    //<----------------------------End grayrest install.js------------------------->

        

This script doesn't do error checking to see if the user has space on his/her drive, but given the size of today's drive and the fact that icon packs are around 100k, it's not much of an issue.

Little added note (from iconpacks.mozdev.org webmaster):

[I've found that the following above doesn't work for Linux, and not just because you'd be adding *.xpm files, not *.ico files, but the script in general. So I came across another one, which will also make things a hell of a lot easier for you because it doesn't need any modifying like the one above might do. It works in both Linux and Windows too! - so perhaps you shouldn't bother with the script above. Here it is...

//<------------------------Begin my fantastic icon pack install.js--------------------------->
var prettyName = "Some fantastically beautiful icon pack";
var regName = "somereferencenamehellputwhatyoulikehereaswell";

var err;
err = initInstall(prettyName, regName, "1.1");
logComment("initInstall: " + err);

var fProgram;
fProgram = getFolder("Program");
logComment("fProgram: " + fProgram);

err = addDirectory("Program", "1.1", "default", fProgram, "chrome/icons/default/", true);
err = performInstall();
logComment("performInstall() returned: " + err);

Yep, enjoy it :-) ...]

Step 5: Distribute!

There's two ways of distributing icon packs: doing it yourself, and making somebody else do it. [eg. iconpacks.mozdev.org!] If you're sticking the icons on your own site, you should set the .xpi filetype to application/x-xpinstall and set up a javascript trigger. The trigger I use on my page is listed below. Change the parts in red.

    //<-------------------Begin grayrest installtrigger.js------------------------->
        function doneFunction(name,result){
        alert("The icons have been successfully installed! 
                         Restart to see them in action! (don\'t forget quickstart)");
        }
        function installforWindows(){
            var xpi = new Object();
            xpi["grayrest/Giovanni Icons"] = "files/icons.xpi";
            InstallTrigger.install(xpi,doneFunction);
        }
    //<---------------------End grayrest installtrigger.js------------------------->
        

This is triggered by an html link such as <a href="javascript:installforWindows()">install me</a>. The first function is optional. If you don't give people the ability to download the xpi without installing, you'll get requests via email.

Closing

I hope you've enjoyed this little tutorial and will provide the Mozilla community with a cool icon pack. Have a nice day. You are free to copy and distribute this tutorial in any form you see fit. I only ask that you attribute it to grayrest (grayrest@grayrest.com). The most up to date version of this page can be found at http://gr.ayre.st/moz/resources/tutorials/iconstutorial.shtml

Back to the top

Best viewed with Firefox. Haven't got it yet? Well get it now!

Icon Packs | F.A.Q. | Submissions | Tutorials | Give us Your Feedback | View in other languages

No Software Patents!